/* =============================================================================
   Bounty Board / Workspace  —  design system
   -----------------------------------------------------------------------------
   One stylesheet for the whole /workspace portal and the public /bounty-board
   pages. Extracted out of ~24 Blade files that each carried their own inline
   <style> block. The workspace is NOT a separate product: it borrows the main
   Monstersgate identity — the dark breadcrumb band, the #4242d6 brand, Inter /
   Readex Pro, the same card + pill vocabulary used across the student and
   mentor portals. MonsterCoin gets a real mark (a gold hex coin), not a bare
   glyph.

   Loaded after css/custom.css, so plain class selectors here win ties.
   Everything is namespaced (.bb-*, .ws-*, .eng-*, .bf__*, …) so the file is
   inert on the rest of the site even though head.blade.php links it globally.
   ========================================================================== */

:root {
    /* brand — the site's own tokens (--sec-color / --sec-color-light) restated
       under bb- names so this file is self-contained */
    --bb-brand:        #4242d6;
    --bb-brand-strong: #3634b8;
    --bb-brand-deep:   #1c1c6e;
    --bb-brand-tint:   #ecebff;
    --bb-brand-wash:   #f5f4ff;

    /*Leaser And Character*/
    --3d-face-leaser:#27f2f8;

    /* ink */
    --bb-ink:    #1c1c6e;   /* headings */
    --bb-body:   #403d59;   /* running text */
    --bb-muted:  #7c7893;   /* labels, meta, captions */
    --bb-faint:  #b4b0c6;   /* disabled, placeholder, dividusers in text */

    /* surfaces */
    --bb-surface:     #ffffff;
    --bb-surface-2:   #faf9fd;   /* inset wells, table zebra */
    --bb-canvas:      #f6f5fb;   /* page background under the cards */
    --bb-line:        #e7e5f2;   /* card borders, hairlines */
    --bb-line-soft:   #f1f0f8;   /* inner dividers */

    /* MonsterCoin */
    --bb-coin-ink:  #96601b;
    --bb-coin-bg:   #fdf4e3;
    --bb-coin-line: #efd9ab;
    --bb-coin-face: #efc15a;
    --bb-coin-rim:  #b77c1e;

    /* semantic status */
    --bb-ok:      #2c7a51;  --bb-ok-bg:     #e6f4ec;
    --bb-warn:    #a5641a;  --bb-warn-bg:   #fbeede;
    --bb-danger:  #b3392a;  --bb-danger-bg: #fbeae6;
    --bb-info:    #275ea5;  --bb-info-bg:   #e9f1fb;

    /* geometry */
    --bb-r-sm:  9px;
    --bb-r:    13px;
    --bb-r-lg: 16px;
    --bb-r-xl: 20px;

    --bb-shadow-sm: 0 1px 2px rgba(28, 28, 110, .05);
    --bb-shadow:    0 10px 30px -18px rgba(28, 28, 110, .28);
    --bb-shadow-lg: 0 26px 56px -32px rgba(28, 28, 110, .40);

    --bb-control-h: 44px;
    --bb-focus: 0 0 0 3px rgba(66, 66, 214, .17);
    --bb-ease: .16s cubic-bezier(.4, 0, .2, 1);
}

[x-cloak] { display: none !important; }

/* =============================================================================
   MonsterCoin  —  <x-monster-coin :amount="120" />
   Inline currency lockup: gold hex coin + tabular figure + MC unit. Scales with
   font-size; drop `unit` for a bare amount, add .mc--plain to inherit colour.
   ========================================================================== */
.mc {
    display: inline-flex;
    align-items: baseline;
    gap: .34em;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    unicode-bidi: isolate;
}
.mc__coin {
    flex-shrink: 0;
    width: 1.15em;
    height: 1.15em;
    object-fit: contain;
    transform: translateY(.16em);
}
.mc__amt  { font-weight: 800; color: var(--bb-coin-ink); letter-spacing: -.01em; }
.mc__unit {
    font-size: .68em;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bb-coin-ink);
    opacity: .7;
}
.mc--plain .mc__amt,
.mc--plain .mc__unit { color: inherit; opacity: 1; }
.mc--lg { font-size: 1.05rem; }

/* Standalone coin glyphs that stand in for a type icon (the MonsterCoin
   image replaces ph-hexagon wherever "task" is shown). */
.bf__rail-coin   { width: 14px; height: 14px; object-fit: contain; vertical-align: -2px; }
.bb-row__coin    { width: 28px; height: 28px; object-fit: contain; }
.bbs-kicker__coin { width: 15px; height: 15px; object-fit: contain; vertical-align: -2px; }

/* A soft pill treatment for standalone balances / escrow figures */
.mc-badge {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: 5px 11px 5px 8px;
    border-radius: 999px;
    background: var(--bb-coin-bg);
    border: 1px solid var(--bb-coin-line);
    font-size: 12.5px;
}
.mc-badge .mc__amt,
.mc-badge .mc__unit { color: var(--bb-coin-ink); }

/* =============================================================================
   PORTAL SHELL
   The layout keeps the site's dark breadcrumb band (bg-neutral-900, shapes),
   then the content section pulls up over it — identical skeleton to the
   student / mentor dashboards.
   ========================================================================== */
.bb-portal-head__sub {
    max-width: 52ch;
    margin: 0 0 16px;
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
    line-height: 1.6;
}

/*
   A handful of pages (the engagement page, "Apply to X", "Applicants for X")
   feed a real bounty title into this slot instead of a short static page
   name , display-4's hero size was built for "Engagements"/"My bounties",
   not a full sentence, and ran off the visible page at that scale. Smaller,
   viewport-aware, and guaranteed to wrap instead of overflow.
*/
.breadcrumb__title--dynamic {
    font-size: clamp(22px, 3.4vw, 38px);
    line-height: 1.3;
    max-width: 32ch;
    overflow-wrap: break-word;
    word-break: break-word;
}
.bb-portal-head__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 14px;
}
.bb-portal-head__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(6px);
}
.bb-portal-head__chip b { font-weight: 800; }
.bb-portal-head__chip i { font-size: 14px; opacity: .8; }

.bb-shell { position: relative; }
.bb-portal {
    position: relative;
    z-index: 2;
    margin-top: -120px;
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    padding-bottom: 72px;
}

/* --- side nav ------------------------------------------------------------- */
.bb-side {
    position: sticky;
    top: 22px;
    background: var(--bb-surface);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-lg);
    box-shadow: var(--bb-shadow);
    padding: 12px;
}
.bb-side__label {
    margin: 6px 10px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bb-faint);
}
.ws-nav__item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--bb-body);
    text-decoration: none;
    transition: background var(--bb-ease), color var(--bb-ease);
}
.ws-nav__item + .ws-nav__item { margin-top: 2px; }
.ws-nav__item i {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--bb-muted);
    transition: color var(--bb-ease);
}
.ws-nav__item:hover { background: var(--bb-surface-2); color: var(--bb-ink); }
.ws-nav__item:hover i { color: var(--bb-brand); }
.ws-nav__item.is-active { background: var(--bb-brand-tint); color: var(--bb-brand); font-weight: 700; }
.ws-nav__item.is-active i { color: var(--bb-brand); }
.ws-nav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--bb-warn);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    margin-inline-start: auto;
}
.ws-card__title .ws-nav__badge { margin-inline-start: 8px; vertical-align: middle; }
.ws-nav__soon {
    margin-inline-start: auto;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bb-faint);
}
/* The drawer's close button , only ever visible while the drawer IS a
   drawer (see the responsive section); at desktop widths this element is the
   first child of a plain sidebar column and must not render at all. */
.ws-nav__close { display: none; }

/* The language switcher row in the drawer. custom.css governs WHEN it shows
   (hidden at >=1200px, where the header's own switcher is visible); these
   rules only make it look like the nav rows around it. */
/* The label reads "Switch language (العربية)" , it names the target language
   in that language's own script, which is the whole point of it.
   In a 230px drawer on a 320px phone it was breaking the Arabic mid-word
   ("العربي / ة"), which is not a word any anymore. The fix is NOT nowrap:
   clipping that label to "Switch language ( ا )" loses exactly the part
   worth reading. Let it take a second line, and forbid breaking inside a
   word so whichever line each word lands on, it stays a word. */
.ws-nav__lang .ws-nav__item {
    width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    /* Two short lines read better centred on the icon than hanging off it. */
    align-items: center;
}
.ws-nav__lang-icon { display: inline-flex; font-size: 18px; color: var(--bb-muted); }
.ws-nav__lang .ws-nav__item:hover .ws-nav__lang-icon { color: var(--bb-brand); }

.ws-nav__foot {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--bb-line-soft);
}
.ws-nav__back { color: var(--bb-muted); font-weight: 600; font-size: 13px; }
.ws-nav__back:hover { color: var(--bb-brand); }

/* --- content column ---------------------------------------------------- */
.bb-main { min-width: 0; }
.bb-main > .ws-card:first-child,
.bb-main > .bb-toolbar:first-child { margin-top: 0; }

/* the mobile menu button that lives in the breadcrumb band */
.ws-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    flex-shrink: 0;
}
.ws-nav-scrim { display: none; }

/* =============================================================================
   PRIMITIVES
   ========================================================================== */

/* --- card ------------------------------------------------------------------ */
.ws-card {
    background: var(--bb-surface);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-lg);
    box-shadow: var(--bb-shadow-sm);
    padding: 24px;
}
.ws-card + .ws-card { margin-top: 16px; }
.ws-card__title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 800;
    color: var(--bb-ink);
    letter-spacing: -.01em;
}
.ws-card__hint {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--bb-muted);
}
.ws-card__hint:last-child { margin-bottom: 0; }

/* A lightweight section header used inside detail views */
.bb-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bb-line-soft);
}
.bb-sec-head__title {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bb-muted);
}
.bb-sec-head__aside { font-size: 12.5px; color: var(--bb-muted); font-weight: 600; }
.bb-sec-head__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--bb-brand);
    text-decoration: none;
    white-space: nowrap;
}
.bb-sec-head__link i { font-size: 13px; }
.bb-sec-head__link:hover { color: var(--bb-brand-strong); }

/* --- toolbar (page-top row: tabs / filters + a primary action) --------- */
.bb-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

/* --- buttons ------------------------------------------------------------ */
.ws-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--bb-ease), border-color var(--bb-ease), color var(--bb-ease), box-shadow var(--bb-ease);
}
.ws-btn i { font-size: 16px; }
.ws-btn--primary {
    background: var(--bb-brand);
    color: #fff;
    box-shadow: 0 6px 16px -8px rgba(66, 66, 214, .6);
}
.ws-btn--primary:hover { background: var(--bb-brand-strong); color: #fff; }
.ws-btn--ghost {
    background: var(--bb-surface);
    border-color: var(--bb-line);
    color: var(--bb-body);
}
.ws-btn--ghost:hover { border-color: var(--bb-brand); color: var(--bb-brand); background: var(--bb-brand-wash); }
.ws-btn--danger { background: var(--bb-danger-bg); color: var(--bb-danger); }
.ws-btn--danger:hover { background: #f7ddd6; color: var(--bb-danger); }
.ws-btn--accent { background: var(--3d-face-leaser); color: var(--bb-brand-deep); box-shadow: 0 10px 24px -12px rgba(239, 193, 90, .55); }
.ws-btn--accent:hover { background: #74d7f5; color: var(--bb-brand-deep); }
.ws-btn--sm { min-height: 36px; padding: 8px 13px; font-size: 12.5px; border-radius: 9px; }
.ws-btn--block { width: 100%; }
.ws-btn:disabled,
.ws-btn.is-disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.ws-btn:focus-visible { outline: none; box-shadow: var(--bb-focus); }

/* --- back link -------------------------------------------------------- */
.bb-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bb-surface);
    text-decoration: none;
}
.bb-back:hover { color: var(--bb-brand); }
.bb-back i { font-size: 14px; }

/* --- flash / notice --------------------------------------------------- */
.ws-flash,
.bb-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-radius: var(--bb-r);
    padding: 13px 16px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 20px;
}
.ws-flash { background: var(--bb-ok-bg); color: var(--bb-ok); }
.bb-note--ok     { background: var(--bb-ok-bg);     color: var(--bb-ok); }
.bb-note--info   { background: var(--bb-info-bg);   color: var(--bb-info); }
.bb-note--warn   { background: var(--bb-warn-bg);   color: var(--bb-warn); }
.bb-note--danger { background: var(--bb-danger-bg); color: var(--bb-danger); }
.bb-note--muted  { background: var(--bb-surface-2); color: var(--bb-muted); border: 1px solid var(--bb-line); }

/* Phosphor <i> glyphs sit low/high in their line box. In these
   icon-then-text rows, box the icon to the text's line-height and let
   flex-start centre it against the first line , reliable across the
   module (notes, checklists, list items, hints). */
.ws-flash > i,
.bb-note > i,
.wm-list li > i,
.wm-fine li > i,
.wm-note > i,
.bb-sec-head__link > i {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.5em;
    line-height: 1;
}

/* --- status pill : one system, every surface -------------------------- */
.ws-status, .eng-status, .we-status, .wa-status, .wp-status, .wm-status, .bb-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
    line-height: 1.4;
}
.ws-status::before, .eng-status::before, .we-status::before,
.wa-status::before, .wp-status::before, .wm-status::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
/* neutral / grey */
.ws-status--draft, .ws-status--closed, .ws-status--expired,
.eng-status--cancelled, .we-status--cancelled,
.wa-status--pending,
.bb-pill--muted {
    background: var(--bb-surface-2); color: var(--bb-muted); box-shadow: inset 0 0 0 1px var(--bb-line);
}
/* dead / withdrawn , same neutral family as pending, but visibly "over" so it
   never reads as an active state on a platform that moves money and work.
   The already-faint text carries that on its own , the parent row (.wa-row
   --withdrawn / .wp-card--withdrawn) is what dims further, so no
   strikethrough here: on a small pill it reads as a rendering glitch, not
   a deliberate "this is done" signal. */
.wa-status--withdrawn, .wp-status--withdrawn {
    background: var(--bb-surface-2); color: var(--bb-faint); box-shadow: inset 0 0 0 1px var(--bb-line);
}
/* info / blue */
.eng-status--active, .eng-status--submitted,
.we-status--active, .we-status--submitted,
.wa-status--shortlisted, .wp-status--shortlisted,
.wm-status--pending_review,
.bb-pill--info {
    background: var(--bb-info-bg); color: var(--bb-info);
}
/* warn / amber */
.ws-status--pending_review,
.eng-status--revision_requested, .we-status--revision_requested,
.wm-status--pending,
.wa-status--draft,
.bb-pill--warn {
    background: var(--bb-warn-bg); color: var(--bb-warn);
}
/* success / green */
.ws-status--open,
.eng-status--approved, .eng-status--completed,
.we-status--approved, .we-status--completed,
.wa-status--accepted, .wp-status--accepted,
.wm-status--active,
.bb-pill--ok {
    background: var(--bb-ok-bg); color: var(--bb-ok);
}
/* danger / red */
.ws-status--rejected,
.eng-status--disputed, .we-status--disputed,
.wa-status--rejected, .wp-status--rejected,
.bb-pill--danger {
    background: var(--bb-danger-bg); color: var(--bb-danger);
}

/* --- chips ---------------------------------------------------------- */
.bb-chip, .bbs-chip, .tal-chip, .wp-chip {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--bb-body);
    background: var(--bb-surface-2);
    border: 1px solid var(--bb-line);
    padding: 3px 10px;
    border-radius: 999px;
    unicode-bidi: isolate;
}
.bb-chip--more { background: transparent; border-color: transparent; color: var(--bb-muted); }

/* --- empty state -------------------------------------------------- */
.bb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 28px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-xl);
    background: var(--bb-surface);
}
.bb-empty__icon {
    width: 54px; height: 54px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--bb-r);
    background: var(--bb-brand-tint);
    color: var(--bb-brand);
    font-size: 26px;
    margin-bottom: 16px;
}
.bb-empty__title { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: var(--bb-ink); }
.bb-empty__body { margin: 0; max-width: 42ch; font-size: 13.5px; line-height: 1.65; color: var(--bb-muted); }
.bb-empty__cta { margin-top: 18px; }

/* small inline empty inside a card */
.bb-empty-line { margin: 0; padding: 26px 8px; text-align: center; color: var(--bb-muted); font-size: 13.5px; }

/* =============================================================================
   FORM CONTROLS  —  re-UX'd: 44px targets, visible labels, one focus ring
   ========================================================================== */
.bb-field { margin-bottom: 16px; }
.bb-field:last-child { margin-bottom: 0; }
.bb-field--inline { max-width: 280px; }
.bb-field--sm { max-width: 200px; }
.bb-field-pair { display: flex; gap: 10px; max-width: 320px; }
.bb-field-pair .bb-input { flex: 1 1 50%; min-width: 0; }
.bb-field-pair .bb-select { flex: 1 1 50%; min-width: 0; }

.bb-label, .bf__label, .eng-field label, .pm-form label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--bb-ink);
    margin-bottom: 6px;
}
.bb-label__opt, .bf__opt {
    color: var(--bb-faint);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.eng-field__hint { font-size: 12px; color: var(--bb-muted); margin: -2px 0 8px; }
/* the review form's comment is genuinely optional , a shorter box reads as
   "optional, sparse is fine" instead of a broken required field. */
.eng-sec .eng-field textarea { min-height: 90px; }

.bb-input, .bb-textarea, .bb-select,
.bf__input, .bf__textarea, .bf__select,
.eng-field input, .eng-field textarea,
.pm-form input, .pm-form select {
    width: 100%;
    min-height: var(--bb-control-h);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-sm);
    padding: 10px 13px;
    font-family: inherit;
    font-size: 14px;
    color: var(--bb-ink);
    background: var(--bb-surface);
    box-sizing: border-box;
    transition: border-color var(--bb-ease), box-shadow var(--bb-ease);
}
.bb-input::placeholder, .bb-textarea::placeholder,
.bf__input::placeholder, .bf__textarea::placeholder { color: var(--bb-faint); }

.bb-input:focus, .bb-textarea:focus, .bb-select:focus,
.bf__input:focus, .bf__textarea:focus, .bf__select:focus,
.eng-field input:focus, .eng-field textarea:focus,
.pm-form input:focus, .pm-form select:focus {
    outline: none;
    border-color: var(--bb-brand);
    box-shadow: var(--bb-focus);
}

.bb-textarea, .bf__textarea, .eng-field textarea {
    min-height: 120px;
    line-height: 1.6;
    resize: vertical;
}

/* native select → custom chevron hugging the trailing edge, RTL-safe */
.bb-select, .bf__select,
.pm-form select, .eng-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237c7893' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-inline-end: 38px;
}
[dir="rtl"] .bb-select, [dir="rtl"] .bf__select,
[dir="rtl"] .pm-form select, [dir="rtl"] .eng-field select { background-position: left 13px center; }

.bb-hint, .bf__hint {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--bb-muted);
}
.bf__field-hint { margin: 5px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--bb-faint); }
.bf__field-hint a { color: var(--bb-brand); font-weight: 700; }


/* A higher-stakes inline problem (can't afford this task) gets real visual
   weight , not just a line of text like every other field error. Styled
   with the module's own MonsterCoin palette (.mc-badge etc) and the same
   coin-in-a-soft-circle mark the Wallet page's stat cards use, rather than
   a generic warning-triangle icon , this is "you need more coins," not a
   form mistake, so it should look like it belongs to the coin, not to
   validation. The CTA is the real `.ws-btn--primary` used everywhere else
   in this module, just placed here , not a bespoke button style. */
.bf__coin-alert {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 10px;
    padding: 16px;
    border-radius: var(--bb-r);
    background: var(--bb-coin-bg);
    border: 1px solid var(--bb-coin-line);
    box-shadow: 0 10px 24px -18px rgba(183, 124, 30, .55);
}
.bf__coin-alert__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bb-surface);
    box-shadow: inset 0 0 0 1px var(--bb-coin-line);
}
.bf__coin-alert__icon img { width: 22px; height: 22px; object-fit: contain; }
.bf__coin-alert__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex: 1; min-width: 0; padding-top: 2px; }
.bf__coin-alert__text { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.55; color: var(--bb-coin-ink); }

/* AR/EN switch , reuses the site's .opt-in-card__switch mechanic (auth/sign-up)
   in a lighter, compact row that fits inside a wizard step. */
.bf__ar-toggle {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 16px; margin: 4px 0 20px; border-radius: var(--bb-r-sm);
    background: var(--bb-surface-2); border: 1px solid var(--bb-line-soft); cursor: pointer;
    transition: border-color var(--bb-ease), background var(--bb-ease);
}
.bf__ar-toggle:has(.opt-in-card__input:checked) { border-color: var(--bb-brand-tint); background: var(--bb-brand-wash); }
.bf__ar-toggle:has(.opt-in-card__input:focus-visible) { box-shadow: var(--bb-focus); }
.bf__ar-toggle__icon {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 9px; font-size: 14px;
    background: var(--bb-surface); color: var(--bb-brand); box-shadow: 0 0 0 1px var(--bb-line-soft);
}
.bf__ar-toggle__text { font-size: 13px; font-weight: 700; color: var(--bb-ink); margin-inline-end: auto; }
.bb-err, .bf__err {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bb-danger);
}
.bb-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* search field : leading icon, pill, generous target */
.bb-search { position: relative; display: flex; align-items: center; }
.bb-search > i {
    position: absolute;
    inset-inline-start: 15px;
    font-size: 16px;
    color: var(--bb-faint);
    pointer-events: none;
}
.bb-search input {
    width: 100%;
    min-height: var(--bb-control-h);
    border: 1px solid var(--bb-line);
    border-radius: 999px;
    padding-block: 10px;
    padding-inline: 42px 16px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--bb-ink);
    background: var(--bb-surface);
}
.bb-search input:focus { outline: none; border-color: var(--bb-brand); box-shadow: var(--bb-focus); }

/* checkbox / radio rows */
.bb-check, .eng-crit-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--bb-body);
    cursor: pointer;
}
.bb-check input {
    inline-size: 16px;
    block-size: 16px;
    accent-color: var(--bb-brand);
    flex-shrink: 0;
}

/* checkbox rendered as a pressable chip (filters, skills) */
.bb-check-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--bb-line);
    background: var(--bb-surface);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bb-body);
    cursor: pointer;
    transition: border-color var(--bb-ease), background var(--bb-ease), color var(--bb-ease);
}
.bb-check-chip:hover { border-color: var(--bb-brand); color: var(--bb-brand); }
.bb-check-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.bb-check-chip:has(input:checked) {
    border-color: var(--bb-brand);
    background: var(--bb-brand-tint);
    color: var(--bb-brand);
}
.bb-check-chip:has(input:focus-visible) { box-shadow: var(--bb-focus); }

/* segmented control */
.bb-segmented {
    display: inline-flex;
    padding: 4px;
    gap: 2px;
    background: var(--bb-surface-2);
    border: 1px solid var(--bb-line);
    border-radius: 12px;
}
.bb-segmented__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    color: var(--bb-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--bb-ease), color var(--bb-ease);
}
.bb-segmented__item:hover { color: var(--bb-ink); }
.bb-segmented__item.is-active {
    background: var(--bb-surface);
    color: var(--bb-brand);
    box-shadow: var(--bb-shadow-sm), 0 0 0 1px var(--bb-line);
}
.bb-segmented__n {
    font-size: 11px;
    font-weight: 800;
    color: var(--bb-faint);
    font-variant-numeric: tabular-nums;
}
.bb-segmented__item.is-active .bb-segmented__n { color: var(--bb-brand); }

/* =============================================================================
   OVERVIEW
   ========================================================================== */

/* --- push-notification opt-in banner (glassy brand) -------------------- */
.ws-push {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-bottom: 24px;
    padding: 18px 20px;
    border-radius: var(--bb-r-lg);
    color: #fff;
    background: linear-gradient(135deg, var(--bb-brand-deep) 0%, var(--bb-brand-strong) 55%, #5b5be0 100%);
    box-shadow: 0 14px 34px -16px rgba(28, 28, 110, .55);
}
/* frosted sheen + light source */
.ws-push::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(120% 120% at 88% -12%, rgba(255, 255, 255, .22) 0%, transparent 55%),
        radial-gradient(90% 90% at -5% 120%, rgba(130, 130, 255, .28) 0%, transparent 60%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
/* glass edge , a hairline that fades toward the bottom */
.ws-push::after {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, .20);
    -webkit-mask: linear-gradient(180deg, #000, transparent 62%);
            mask: linear-gradient(180deg, #000, transparent 62%);
}
.ws-push__row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    /* reserve the top-right corner for the dismiss button so the CTA can't
       slide under it */
    padding-inline-end: 36px;
}
.ws-push__icon {
    flex-shrink: 0;
    width: 46px; height: 46px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
.ws-push__text { flex: 1 1 240px; min-width: 0; }
.ws-push__title { margin: 0 0 2px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.ws-push__body { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.ws-push__cta {
    flex-shrink: 0;
    padding: 12px 24px;
    border-radius: 999px;
    font-size: 13px; font-weight: 700; white-space: nowrap;
    color: var(--bb-brand-strong);
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(255, 255, 255, .6);
    cursor: pointer;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .4);
    transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.ws-push__cta:hover { background: #fff; box-shadow: 0 9px 24px -8px rgba(0, 0, 0, .45); }
.ws-push__cta:active { transform: translateY(1px); }
.ws-push__cta[disabled] { opacity: .7; cursor: default; box-shadow: none; }
.ws-push__dismiss {
    position: absolute;
    top: 10px; inset-inline-end: 10px;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0;
    color: rgba(255, 255, 255, .65);
    font-size: 14px; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.ws-push__dismiss:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.ws-push__cta:focus-visible,
.ws-push__dismiss:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ws-push__note {
    position: relative;
    margin: 10px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .72);
}
@media (prefers-reduced-motion: reduce) {
    .ws-push__cta { transition: none; }
}
@media (max-width: 560px) {
    .ws-push__row { align-items: stretch; padding-inline-end: 0; }
    .ws-push__cta { width: 100%; }
    .ws-push__text { padding-inline-end: 26px; }
    .ws-push__dismiss { top: 8px; }
}

.ws-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}
.ws-stat {
    background: var(--bb-surface);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r);
    box-shadow: var(--bb-shadow-sm);
    padding: 16px 18px;
}
.ws-stat__num {
    font-size: 26px;
    font-weight: 800;
    color: var(--bb-ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.ws-stat__label {
    margin-top: 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bb-muted);
}
.ws-stat--accent { background: linear-gradient(180deg, var(--bb-brand-wash), var(--bb-surface)); border-color: #dcd9f6; }

.ws-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.ws-cta__text {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--bb-muted);
    max-width: 48ch;
}
.ws-cta__icon {
    flex-shrink: 0;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 13px;
    background: var(--bb-brand-tint);
    color: var(--bb-brand);
    font-size: 22px;
}

.ws-mini { display: flex; flex-direction: column; gap: 8px; }
.ws-mini__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--bb-ease), background var(--bb-ease);
}
.ws-mini__row:hover { border-color: #cbc7ee; background: var(--bb-surface-2); }
.ws-mini__type {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bb-muted);
    background: var(--bb-surface-2);
    border: 1px solid var(--bb-line);
    padding: 3px 8px;
    border-radius: 999px;
}
.ws-mini__title {
    flex: 1;
    min-inline-size: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--bb-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =============================================================================
   IN-PORTAL BROWSE  (.ws-board*)
   ========================================================================== */
.ws-board__filter {
    background: var(--bb-surface);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r);
    box-shadow: var(--bb-shadow-sm);
    padding: 16px 18px;
    margin-bottom: 16px;
}
.ws-board__filter .bb-label { margin-bottom: 10px; }
.ws-board__filter-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}
.ws-board__filter-row .choices { flex: 1 1 320px; margin-bottom: 0; }

/* =============================================================================
   MY BOUNTIES  (.wsb-*)
   ========================================================================== */
.wsb-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.wsb-tab {
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--bb-muted);
    text-decoration: none;
    background: var(--bb-surface);
    border: 1px solid var(--bb-line);
    transition: all var(--bb-ease);
}
.wsb-tab:hover { border-color: var(--bb-brand); color: var(--bb-brand); }
.wsb-tab.is-active { background: var(--bb-brand); border-color: var(--bb-brand); color: #fff; }

.wsb-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px 20px;
    align-items: center;
    padding: 20px 22px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-lg);
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow-sm);
}
.wsb-row + .wsb-row { margin-top: 12px; }
.wsb-row__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.wsb-row__type {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bb-muted);
}
.wsb-row__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--bb-ink); letter-spacing: -.01em; }
.wsb-row__sub { margin: 5px 0 0; font-size: 12.5px; color: var(--bb-muted); }
.wsb-row__sub .bidi { unicode-bidi: isolate; }
.wsb-row__note {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--bb-warn);
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-start;
}
.wsb-row__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* =============================================================================
   APPLICANT INBOX  (.wp-*)
   ========================================================================== */
.wp-card {
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-lg);
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow-sm);
    padding: 20px 22px;
}
.wp-card + .wp-card { margin-top: 12px; }
.wp-head { display: flex; align-items: center; gap: 12px; }
.wp-avatar, .tal-av, .mi-av, .bb-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--bb-brand-tint);
    color: var(--bb-brand);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 15px;
    flex-shrink: 0;
    text-transform: uppercase;
}
.wp-name { font-size: 14.5px; font-weight: 700; color: var(--bb-ink); }

/* --- links & credentials on a public profile -----------------------------
   Rows, not chips: each one is a claim a visitor may want to act on (open it,
   read it), and the "Checked" mark has to sit next to the specific thing that
   was checked rather than floating over the card. Sits in the aside under the
   facts, where someone deciding whether to hire is already looking. */
.tp-cred {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r);
    background: var(--bb-surface);
}
.tp-cred__title {
    margin: 0 0 10px;
    font-size: 10.5px; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase; color: var(--bb-faint);
}
.tp-cred__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tp-cred__item {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 10px; border-radius: var(--bb-r-sm);
    font-size: 13px; font-weight: 600; color: var(--bb-body);
    text-decoration: none;
    transition: background var(--bb-ease), color var(--bb-ease);
}
.tp-cred__item:hover { background: var(--bb-brand-wash); color: var(--bb-brand); }
.tp-cred__item > i:first-child { font-size: 17px; color: var(--bb-muted); flex-shrink: 0; }
.tp-cred__item:hover > i:first-child { color: var(--bb-brand); }
.tp-cred__label { min-width: 0; }

/* The trust mark. A visible word, never hover-only , it is the reason to
   believe the row above it, so it has to survive touch and keyboard. */
.tp-cred__check {
    display: inline-flex; align-items: center; gap: 4px;
    flex-shrink: 0;
    padding: 2px 7px; border-radius: 999px;
    background: var(--bb-ok-bg); color: var(--bb-ok);
    font-size: 10px; font-weight: 800; letter-spacing: .03em;
    white-space: nowrap;
}
.tp-cred__check i { font-size: 11px; }
.tp-cred__out { margin-inline-start: auto; font-size: 13px; color: var(--bb-faint); flex-shrink: 0; }
[dir="rtl"] .tp-cred__out { transform: scaleX(-1); }

/* The owner's own consent row, in Settings. */
.verification-share {
    display: flex; align-items: center; gap: 16px;
    margin-top: 16px; padding: 14px 16px;
    border: 1px solid #e5e3ee; border-radius: 12px; background: #faf9fc;
}
.verification-share__body { flex: 1; min-width: 0; }
.verification-share__label { font-size: 13px; font-weight: 700; color: #211f2e; }
.verification-share__hint { font-size: 12px; line-height: 1.55; color: #9a95ad; margin-top: 3px; }
.verification-share input[type="checkbox"] { width: 17px; height: 17px; accent-color: #4242d6; margin-top: 2px; flex-shrink: 0; }

/* --- verified badge (identity check) , a trust signal, never a gate --- */
.verified-badge {
    display: inline-flex;
    color: var(--bb-brand);
    font-size: .85em;
    margin-inline-start: 4px;
    vertical-align: middle;
}
.wp-when { font-size: 12px; color: var(--bb-muted); }
.wp-head .wp-status { margin-inline-start: auto; }
.wp-decided-note { font-size: 12px; color: var(--bb-faint); margin: 8px 0 0; }
.wp-note {
    margin: 14px 0 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--bb-body);
    white-space: pre-line;
}
.wp-facts {
    display: flex;
    gap: 10px 22px;
    flex-wrap: wrap;
    margin: 14px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--bb-line-soft);
    font-size: 12.5px;
    color: var(--bb-muted);
}
.wp-facts b { color: var(--bb-ink); font-weight: 700; }
.wp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* =============================================================================
   ENGAGEMENT LIST + BOARD  (.we-*, .eng-*)
   ========================================================================== */
/* =============================================================================
   ENGAGEMENT LIST  (.eg-*)
   -----------------------------------------------------------------------------
   Grouped by whose turn it is, not by date. The old list was flat and
   chronological, so the two rows actually waiting on you sat in between
   resolved ones and read as history. Three groups now, and the weight of a row
   follows how much it wants from you:

     needs you   full card, brand accent, a real button
     in progress full card, muted accent, no button
     finished    one compact line with a tick

   The accent for "needs you" is the module's brand, not a warning colour , red
   and amber already mean dispute and attention here, and "your turn" is not a
   problem, it is work.
   ========================================================================== */
/* --- a collapsible list section (.wg) -----------------------------------
   Shared by all four workspace lists. Two states doing two different jobs:

     open    a quiet label. The rows below are the content; a heavy header
             would compete with them.
     closed  the header IS the content, so it grows , bigger type, a tinted
             icon tile, the count alongside , and a collapsed section still
             announces itself from across the page.
*/
details.wg { border: 0; }
details.wg + details.wg { margin-top: 20px; }

/* The header sits on its own surface in BOTH states.
   The portal pulls its content up over the dark breadcrumb band, so on any
   page without a toolbar above the list (engagements, candidates, my
   applications) the first header painted straight onto navy , brand blue on
   near-black, effectively invisible. A bare text label cannot be made safe
   against a background it doesn't control, so it stops being bare. */
.wg__head {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-sm);
    background: var(--bb-surface);
    cursor: pointer; list-style: none;
    color: var(--bb-ink);
    transition: border-color var(--bb-ease), background var(--bb-ease);
}
.wg__head::-webkit-details-marker { display: none; }
.wg__head:hover { border-color: #cbc7ee; }
.wg__head:focus-visible { outline: none; box-shadow: var(--bb-focus); }

.wg__icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 26px; height: 26px; border-radius: 8px;
    background: var(--bb-surface-2); color: var(--bb-muted);
}
.wg__icon i { font-size: 15px; }

/* Was 11px uppercase with wide tracking , a micro-label for a section heading
   that has to be readable at a glance and doubles as the only thing on screen
   when the section is shut. */
.wg__title {
    font-size: 13.5px; font-weight: 800;
    letter-spacing: -.01em;
    transition: font-size var(--bb-ease);
}
.wg__n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; background: var(--bb-surface-2);
    color: var(--bb-muted); font-size: 11.5px; font-weight: 800;
}

/* A real affordance, not a 13px grey tick. It is the only thing telling you
   the section opens at all. */
.wg__chev {
    display: inline-flex; align-items: center; justify-content: center;
    margin-inline-start: auto; flex-shrink: 0;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--bb-surface-2); color: var(--bb-body);
    font-size: 15px;
    transition: transform var(--bb-ease), background var(--bb-ease), color var(--bb-ease);
}
.wg__head:hover .wg__chev { background: var(--bb-brand-tint); color: var(--bb-brand); }
details.wg[open] .wg__chev { transform: rotate(180deg); }
.wg__body { padding-top: 12px; }

/* Collapsed , the header is the whole section now, so it grows into a card. */
details.wg:not([open]) > .wg__head {
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--bb-r);
    box-shadow: var(--bb-shadow-sm);
}
details.wg:not([open]) .wg__icon { width: 34px; height: 34px; border-radius: 10px; }
details.wg:not([open]) .wg__icon i { font-size: 18px; }
details.wg:not([open]) .wg__title { font-size: 15.5px; }
details.wg:not([open]) .wg__n { min-width: 22px; height: 22px; font-size: 12px; }

/* tone , the same three the groups always had */
.wg--action > .wg__head { border-color: var(--bb-brand-tint); box-shadow: inset 3px 0 0 var(--bb-brand); }
[dir="rtl"] .wg--action > .wg__head { box-shadow: inset -3px 0 0 var(--bb-brand); }
.wg--action .wg__title { color: var(--bb-brand-deep); }
.wg--action .wg__icon { background: var(--bb-brand-tint); color: var(--bb-brand); }
.wg--action .wg__n { background: var(--bb-brand-tint); color: var(--bb-brand); }
details.wg--action:not([open]) > .wg__head { box-shadow: inset 3px 0 0 var(--bb-brand), var(--bb-shadow-sm); }
[dir="rtl"] details.wg--action:not([open]) > .wg__head { box-shadow: inset -3px 0 0 var(--bb-brand), var(--bb-shadow-sm); }

/* Finished is quieter, but never so quiet it stops being legible , when the
   section is shut this label is the only thing on screen for it. --bb-muted
   measured 4.23:1 on white, under AA for text this size; the restraint comes
   from the icon and count instead, which carry no meaning on their own. */
.wg--done .wg__title { color: var(--bb-body); }
.wg--done .wg__icon { background: var(--bb-surface-2); color: var(--bb-faint); }

/* --- a live engagement --------------------------------------------------- */
.eg-card {
    position: relative;
    padding: 16px 18px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r);
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow-sm);
    transition: border-color var(--bb-ease), box-shadow var(--bb-ease);
}
.eg-card + .eg-card { margin-top: 10px; }
.eg-card:hover { border-color: #cbc7ee; box-shadow: var(--bb-shadow); }

/* The whole card is the link, but the CTA inside it is a separate target ,
   a stretched overlay under the content rather than an <a> wrapping buttons. */
.eg-card__hit { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.eg-card > *:not(.eg-card__hit) { position: relative; z-index: 1; pointer-events: none; }
.eg-card a:not(.eg-card__hit),
.eg-card button { pointer-events: auto; }

/* Needs you: a left accent rail in the brand, so the group reads at a glance
   even when scrolled past its heading. */
.eg-card--action {
    border-color: var(--bb-brand-tint);
    box-shadow: inset 3px 0 0 var(--bb-brand), var(--bb-shadow-sm);
}
[dir="rtl"] .eg-card--action { box-shadow: inset -3px 0 0 var(--bb-brand), var(--bb-shadow-sm); }
.eg-card--action:hover { border-color: var(--bb-brand); }

.eg-card__top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.eg-card__title {
    margin: 0 0 12px; font-size: 15.5px; font-weight: 700; line-height: 1.4;
    color: var(--bb-ink); word-break: break-word;
}

/* which side of the deal you are on */
.eg-dir {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    background: var(--bb-surface-2); color: var(--bb-body);
    box-shadow: inset 0 0 0 1px var(--bb-line);
}
.eg-dir i { font-size: 13px; }
.eg-dir--hiring { background: var(--bb-brand-tint); color: var(--bb-brand-deep); box-shadow: none; }
.eg-dir--working { background: #e4f3fb; color: #1c5b7a; box-shadow: none; }
.eg-card__top .we-status { margin-inline-start: auto; }

/* --- how far through it is ----------------------------------------------- */
.eg-steps { display: flex; align-items: center; gap: 5px; margin-bottom: 12px; flex-wrap: wrap; }
.eg-steps__dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--bb-surface); box-shadow: inset 0 0 0 1.5px var(--bb-line);
    flex-shrink: 0;
}
.eg-steps__dot i { font-size: 9px; color: #fff; }
.eg-steps__dot.is-done { background: var(--bb-ok); box-shadow: none; }
.eg-steps__dot.is-current { background: var(--bb-brand); box-shadow: 0 0 0 3px var(--bb-brand-tint); }
.eg-steps__bar { width: 18px; height: 2px; border-radius: 2px; background: var(--bb-line); flex-shrink: 0; }
.eg-steps__bar.is-done { background: var(--bb-ok); }
.eg-steps__now {
    margin-inline-start: 6px;
    font-size: 11.5px; font-weight: 700; color: var(--bb-brand);
}

/* --- the next move, and the button that makes it ------------------------- */
.eg-card__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.eg-card__next {
    display: flex; align-items: center; gap: 7px;
    margin: 0; flex: 1; min-width: 220px;
    font-size: 12.5px; line-height: 1.5;
}
.eg-card__next i { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.eg-card__next b { font-weight: 800; margin-inline-end: 3px; }
.eg-card__next--action { color: var(--bb-brand); }
.eg-card__next--waiting { color: var(--bb-muted); }
.eg-card__next--protected { color: var(--bb-ok); }
.eg-card__next--attention { color: var(--bb-danger); }
.eg-card__next--closed { color: var(--bb-faint); }
.eg-card__cta { flex-shrink: 0; margin-inline-start: auto; }

/* --- finished: one line, out of the way ---------------------------------- */
.eg-done {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--bb-line-soft);
    border-radius: var(--bb-r-sm);
    background: var(--bb-surface);
    text-decoration: none;
    transition: background var(--bb-ease), border-color var(--bb-ease);
}
.eg-done + .eg-done { margin-top: 6px; }
.eg-done:hover { background: var(--bb-surface-2); border-color: var(--bb-line); }
.eg-done__mark { font-size: 16px; color: var(--bb-ok); flex-shrink: 0; }
/* Decided, but not a success , a rejection or a withdrawal should not wear
   the same green tick as completed work. */
.eg-done__mark--muted { color: var(--bb-faint); }
.eg-done__title {
    font-size: 13px; font-weight: 700; color: var(--bb-body);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1;
}
.eg-done__who { font-size: 11.5px; color: var(--bb-muted); white-space: nowrap; }
.eg-done__when { font-size: 11.5px; color: var(--bb-faint); white-space: nowrap; }

@media (max-width: 620px) {
    .eg-card__cta { margin-inline-start: 0; width: 100%; justify-content: center; }
    .eg-steps__now { flex-basis: 100%; margin-inline-start: 0; }
    .eg-done__who, .eg-done__when { display: none; }
}

/* the count chip on a filter tab */
.wsb-tab__n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 17px; height: 17px; padding: 0 5px; margin-inline-start: 6px;
    border-radius: 999px; background: var(--bb-surface-2);
    color: var(--bb-muted); font-size: 10.5px; font-weight: 800;
}
.wsb-tab__n--hot { background: var(--bb-brand); color: #fff; }
.wsb-tab.is-active .wsb-tab__n { background: rgba(255, 255, 255, .25); color: inherit; }

/* board */
.eng-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}
/* Status is page state, Message is an action , space-between keeps them
   visually distinct instead of reading as one cluster of chips. */
.eng-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }

/* The header card (status + timeline + "what's next") needs to breathe away
   from the panels below it , without the gap it reads as one slab. */
.eng-head { margin-bottom: 24px; }
.eng-head > :last-child { margin-bottom: 0; }
.eng-sec {
    background: var(--bb-surface);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-lg);
    box-shadow: var(--bb-shadow-sm);
    padding: 22px;
    margin-bottom: 16px;
}
.eng-sec > h3 {
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bb-muted);
}
.eng-sec > h3 .eng-sec__count {
    letter-spacing: 0;
    text-transform: none;
    font-weight: 700;
    color: var(--bb-body);
}
.eng-crit { list-style: none; margin: 0; padding: 0; }
.eng-crit li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid var(--bb-line-soft);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--bb-body);
}
.eng-crit li:last-child { border-bottom: 0; }
.eng-crit input { margin-top: 1px; width: 17px; height: 17px; accent-color: var(--bb-brand); flex-shrink: 0; }
.eng-crit .req,
.eng-crit-prop__text .req {
    margin-inline-start: auto;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bb-danger);
    white-space: nowrap;
}

/* --- proposed acceptance criterion (post-hire, awaiting the member) ------ */
.eng-crit-prop {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--bb-warn);
    border-radius: var(--bb-r);
    background: var(--bb-warn-bg);
}
.eng-crit-prop__eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bb-warn);
}
.eng-crit-prop__text {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--bb-body);
}
.eng-crit-prop__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.eng-crit-prop__req {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 8px 0 12px;
    font-size: 12.5px;
    color: var(--bb-muted);
}
.eng-crit-prop__req input { width: 15px; height: 15px; accent-color: var(--bb-brand); }

/* Client's read-only view of an outstanding / declined proposal */
.eng-crit-await {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--bb-body);
}
.eng-crit-await > i { color: var(--bb-warn); flex-shrink: 0; }
.eng-crit-await--declined > i { color: var(--bb-faint); }
.eng-crit-await--declined { color: var(--bb-muted); }
.eng-crit-await__tag {
    margin-inline-start: auto;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    color: var(--bb-muted);
    white-space: nowrap;
}
.eng-round {
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r);
    padding: 15px;
    margin-bottom: 10px;
    background: var(--bb-surface-2);
}
.eng-round__head {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--bb-muted);
    margin-bottom: 8px;
}
.eng-round__head span:first-child { color: var(--bb-ink); text-transform: uppercase; letter-spacing: .05em; }
.eng-round__note { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; color: var(--bb-body); white-space: pre-line; }
.eng-round__links a {
    display: block;
    font-size: 12.5px;
    color: var(--bb-brand);
    word-break: break-all;
    padding: 2px 0;
}
.eng-round__review {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--bb-line);
    font-size: 12.5px;
    font-weight: 600;
}
.eng-round__review.rev { color: var(--bb-warn); }
.eng-round__review.ok  { color: var(--bb-ok); }

.eng-actions { display: flex;
    flex-wrap: wrap; gap: 10px;
    align-items: baseline;
    margin-top: 14px;
    justify-content: space-between;
}
.eng-field { margin-bottom: 10px; }
.eng-field:last-child { margin-bottom: 0; }

/* --- branded file upload (<x-bb-upload>) -------------------------------- */
.bb-upload { display: block; }
.bb-upload__input {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bb-upload__zone {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 15px 16px; text-align: start;
    background: var(--bb-surface-2);
    border: 1.5px dashed var(--bb-line);
    border-radius: var(--bb-r-lg);
    cursor: pointer; color: inherit;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.bb-upload__zone:hover { border-color: var(--bb-brand); background: var(--bb-brand-tint); }
.bb-upload__zone:focus-visible { outline: none; border-color: var(--bb-brand); box-shadow: 0 0 0 3px var(--bb-brand-tint); }
.bb-upload.is-drag .bb-upload__zone {
    border-color: var(--bb-brand); background: var(--bb-brand-tint);
    box-shadow: 0 0 0 4px var(--bb-brand-tint);
}
.bb-upload__icon {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bb-brand); color: #fff; font-size: 19px;
}
.bb-upload__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bb-upload__title { font-size: 13.5px; font-weight: 700; color: var(--bb-ink); }
.bb-upload__hint { font-size: 12px; color: var(--bb-muted); }
.bb-upload__list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bb-upload__file {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: var(--bb-r);
    background: var(--bb-surface); border: 1px solid var(--bb-line);
    font-size: 12.5px;
}
.bb-upload__file-icon { flex-shrink: 0; color: var(--bb-brand); font-size: 15px; }
.bb-upload__file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bb-body); }
.bb-upload__file-size { flex-shrink: 0; color: var(--bb-faint); font-variant-numeric: tabular-nums; }
.bb-upload__remove {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; color: var(--bb-faint); cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.bb-upload__remove:hover { background: var(--bb-danger-bg); color: var(--bb-danger); }

.eng-aside {
    position: sticky;
    top: 22px;
    background: var(--bb-surface);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-lg);
    box-shadow: var(--bb-shadow);
    padding: 22px;
}
.eng-aside h3 {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bb-muted);
}
.eng-money { font-size: 13.5px; line-height: 1.65; color: var(--bb-body); }
.eng-money b { unicode-bidi: isolate; color: var(--bb-ink); }
.eng-escrow {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: var(--bb-r);
    background: var(--bb-coin-bg);
    border: 1px solid var(--bb-coin-line);
}
.eng-escrow__label { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bb-coin-ink); }
.eng-escrow__state { font-size: 12px; font-weight: 600; color: var(--bb-coin-ink); }
.eng-receipt {
    margin-top: 10px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-sm);
    padding: 12px;
    font-size: 12.5px;
}
.eng-receipt a { color: var(--bb-brand); font-weight: 600; }
.eng-receipt__ok { color: var(--bb-ok); margin-top: 5px; display: flex; gap: 5px; align-items: center; }
.eng-receipt__wait { color: var(--bb-muted); margin-top: 5px; }

/* --- request-a-revision panel ------------------------------------------
   Sending work back is one of the two decisions a client makes on a
   delivery, so its trigger carries the same weight as Approve rather than
   sitting behind a "+" twisty. The panel itself is warn-tinted, not danger:
   a revision is a normal step in the loop, not a destructive one. */
.eng-rev { margin-top: 12px; }

.eng-rev__panel {
    margin-top: 12px;
    padding: 16px;
    border: 1px solid var(--bb-line);
    border-inline-start: 3px solid var(--bb-warn);
    border-radius: var(--bb-r);
    background: var(--bb-surface-2);
}

.eng-rev__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.eng-rev__head i { font-size: 17px; color: var(--bb-warn); line-height: 1.3; flex-shrink: 0; }
.eng-rev__title { font-size: 13.5px; font-weight: 700; color: var(--bb-ink); }
.eng-rev__consequence { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--bb-muted); }

/* Unmet acceptance criteria, restated where the note is actually written ,
   they are the specifics the worker needs and are otherwise further up the
   page, out of sight while typing. */
.eng-rev__unmet {
    margin: 12px 0 0;
    padding: 11px 13px;
    border-radius: var(--bb-r-sm);
    background: var(--bb-warn-bg);
    color: var(--bb-warn);
}
.eng-rev__unmet-head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; }
.eng-rev__unmet ul { list-style: none; margin: 7px 0 0; padding: 0; }
.eng-rev__unmet li {
    position: relative;
    padding-inline-start: 15px;
    font-size: 12.5px;
    line-height: 1.65;
    font-weight: 500;
}
.eng-rev__unmet li::before {
    content: "";
    position: absolute; inset-inline-start: 4px; top: 8px;
    width: 4px; height: 4px; border-radius: 50%;
    background: currentColor; opacity: .55;
}

.eng-rev__field { margin-top: 14px; }

/* Counter sits on the label row, so the limit is visible before typing
   starts rather than appearing only once the field is dirty. */
.eng-rev__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.eng-rev__label-row label { margin-bottom: 6px; }
.eng-rev__count {
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--bb-faint);
    white-space: nowrap;
}
.eng-rev__count.is-short { color: var(--bb-warn); font-weight: 700; }

.eng-rev__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }

@media (max-width: 560px) {
    .eng-rev__foot > .ws-btn { flex: 1 1 100%; justify-content: center; }
}

details.eng-more { margin-top: 12px; }
details.eng-more > summary {
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--bb-brand);
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
details.eng-more > summary::-webkit-details-marker { display: none; }
details.eng-more > summary::before { content: "\002B"; font-weight: 800; }
details.eng-more[open] > summary::before { content: "\2212"; }
details.eng-more[open] > summary { margin-bottom: 10px; }
details.eng-more--danger > summary { color: var(--bb-danger); }
details.eng-more--divider { border-top: 1px solid var(--bb-line-soft); padding-top: 14px; }

/* --- phase timeline: flat labels on a dashed line, not a wizard --------- */
.eng-phase-list {
    display: flex;
    align-items: center;
    margin: 0 0 16px;
    font-size: 12.5px;
    font-weight: 700;
    overflow-x: auto;
    scrollbar-width: none;
}
.eng-phase-list::-webkit-scrollbar { display: none; }
.eng-phase-list__item { display: inline-flex; align-items: center; gap: 4px; color: var(--bb-faint); white-space: nowrap; flex-shrink: 0; }
.eng-phase-list__item i { font-size: 11px; }
.eng-phase-list__item.is-done { color: var(--bb-ok); }
.eng-phase-list__item.is-current { color: var(--bb-brand); }
/* The dash is the timeline itself , solid once its step is behind you,
   still dashed (i.e. "not there yet") for whatever's still ahead. */
.eng-phase-list__dash {
    flex: 1 1 28px;
    min-width: 20px;
    height: 0;
    margin: 0 8px;
    border-top: 2px dashed var(--bb-line);
}
.eng-phase-list__dash.is-done { border-top-color: var(--bb-ok); opacity: .5; }

.eng-collab-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--bb-muted);
}
.eng-collab-note i { flex-shrink: 0; margin-top: 1px; color: var(--bb-faint); }

/* --- "what's next" banner ------------------------------------------------- */
.eng-next {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--bb-r-lg);
    margin-bottom: 18px;
    font-size: 13.5px;
    line-height: 1.5;
}
.eng-next__icon {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.eng-next__text b { font-weight: 800; margin-inline-end: 3px; }
.eng-next--action { background: var(--bb-brand-tint); color: var(--bb-brand-deep); }
.eng-next--action .eng-next__icon { background: var(--bb-brand); color: #fff; }
.eng-next--waiting { background: var(--bb-surface-2); color: var(--bb-body); box-shadow: inset 0 0 0 1px var(--bb-line); }
.eng-next--waiting .eng-next__icon { background: var(--bb-surface); color: var(--bb-muted); box-shadow: inset 0 0 0 1px var(--bb-line); }
.eng-next--protected { background: var(--bb-ok-bg); color: var(--bb-ok); }
.eng-next--protected .eng-next__icon { background: var(--bb-ok); color: #fff; }
.eng-next--attention { background: var(--bb-danger-bg); color: var(--bb-danger); }
.eng-next--attention .eng-next__icon { background: var(--bb-danger); color: #fff; }
.eng-next--closed { background: var(--bb-surface-2); color: var(--bb-faint); box-shadow: inset 0 0 0 1px var(--bb-line); }
.eng-next--closed .eng-next__icon { background: var(--bb-surface); color: var(--bb-faint); box-shadow: inset 0 0 0 1px var(--bb-line); }

/* --- settlement: escrow guarantee card ------------------------------------ */
.eng-guarantee {
    display: flex;
    gap: 12px;
    padding: 14px;
    border-radius: var(--bb-r);
    background: var(--bb-ok-bg);
    margin-bottom: 14px;
}
.eng-guarantee__icon {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--bb-ok);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
}
.eng-guarantee__title { margin: 0 0 2px; font-size: 12.5px; font-weight: 800; color: var(--bb-ok); }
.eng-guarantee__body { margin: 0; font-size: 12px; line-height: 1.55; color: var(--bb-body); }

/* --- settlement: gig payout details + handoff steps ------------------------ */
.eng-payout-hint {
    display: flex; align-items: center; gap: 6px;
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--bb-muted);
}
.eng-payout-hint i { font-size: 15px; }
.eng-payout {
    margin-top: 14px;
    padding: 14px;
    border-radius: var(--bb-r);
    background: var(--bb-surface-2);
    box-shadow: inset 0 0 0 1px var(--bb-line);
}
.eng-payout__title { margin: 0 0 6px; font-size: 12.5px; font-weight: 800; color: var(--bb-ink); }
.eng-payout__type {
    display: inline-block;
    font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: var(--bb-brand); background: var(--bb-brand-tint);
    padding: 2px 8px; border-radius: 999px; margin-bottom: 8px;
}
.eng-payout__fields { margin: 0; }
.eng-payout__fields > div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 12.5px; border-top: 1px solid var(--bb-line-soft); }
.eng-payout__fields > div:first-child { border-top: 0; }
.eng-payout__fields dt { margin: 0; color: var(--bb-muted); }
.eng-payout__fields dd { margin: 0; color: var(--bb-ink); font-weight: 600; unicode-bidi: isolate; }
.eng-payout__missing { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--bb-warn); }

.eng-handoff { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.eng-handoff__step { display: flex; gap: 10px; }
.eng-handoff__num {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--bb-surface-2);
    box-shadow: inset 0 0 0 1px var(--bb-line);
    color: var(--bb-muted);
    font-size: 11.5px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.eng-handoff__title { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--bb-ink); }
.eng-handoff__body { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--bb-muted); }

.eng-disclaimer {
    display: flex; align-items: flex-start; gap: 6px;
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--bb-line-soft);
    font-size: 11.5px; line-height: 1.5;
    color: var(--bb-faint);
}
.eng-disclaimer i { flex-shrink: 0; margin-top: 1px; }

/* The stored phrase echoed back to the applicant , what the poster will
   actually read, in the language it is actually stored in. */
.bb-timeline-preview {
    display: flex; align-items: center; gap: 6px;
    margin-top: 8px;
    font-weight: 700;
    color: var(--bb-brand);
}
.bb-timeline-preview i { font-size: 14px; }
.bb-timeline-preview,
.bb-timeline-preview * { unicode-bidi: isolate; }

/* =============================================================================
   MY APPLICATIONS  (.wa-*)
   ========================================================================== */
.wa-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r);
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow-sm);
}
.wa-row + .wa-row { margin-top: 10px; }
.wa-row__main { flex: 1; min-width: 0; }
.wa-row__title { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--bb-ink); }
.wa-row__sub { margin: 3px 0 0; font-size: 12.5px; color: var(--bb-muted); }

/* =============================================================================
   MEMBERSHIP  (.wm-*)  — a single pricing card
   ========================================================================== */
.wm-card {
    max-width: 480px;
    background: var(--bb-surface);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-lg);
    box-shadow: var(--bb-shadow);
    overflow: hidden;
}
.wm-plan {
    padding: 26px 26px 24px;
    background: linear-gradient(180deg, var(--bb-brand-wash), var(--bb-surface));
    border-bottom: 1px solid var(--bb-line-soft);
}
.wm-plan-tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bb-brand);
    background: var(--bb-surface);
    border: 1px solid #dcd9f6;
    padding: 4px 11px;
    border-radius: 999px;
}
.wm-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 14px;
    unicode-bidi: isolate;
}
.wm-price__num { font-size: 38px; font-weight: 800; color: var(--bb-ink); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.wm-price__cur { font-size: 16px; font-weight: 800; color: var(--bb-ink); }
.wm-price__per { font-size: 13px; font-weight: 600; color: var(--bb-muted); }
.wm-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--bb-muted); }

.wm-includes { padding: 22px 26px; }
.wm-includes__title {
    margin: 0 0 14px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bb-muted);
}
.wm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.wm-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--bb-body); }
.wm-list li > i { color: var(--bb-ok); font-size: 17px; }

.wm-cta { padding: 4px 26px 20px; }

.wm-fine {
    list-style: none;
    margin: 0;
    padding: 16px 26px 22px;
    border-top: 1px solid var(--bb-line-soft);
    background: var(--bb-surface-2);
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.wm-fine li { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; line-height: 1.5; color: var(--bb-muted); }
.wm-fine__coin { flex-shrink: 0; width: 13px; height: 13px; object-fit: contain; margin-top: calc((1.5em - 13px) / 2); }

/* summary line-items (checkout) */
.bb-lineitem {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 14px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--bb-line);
    color: var(--bb-body);
}
.bb-lineitem__val { font-weight: 700; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.bb-lineitem--credit { color: var(--bb-ok); }
.bb-lineitem--total {
    border-bottom: 0;
    padding-top: 14px;
    font-size: 16px;
    font-weight: 800;
    color: var(--bb-ink);
}

/* =============================================================================
   POST CREDITS  (.wc-*)
   ========================================================================== */
.wc-balance {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--bb-ink);
}
.wc-packs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
.wc-pack {
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-lg);
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow-sm);
    padding: 22px 20px;
    text-align: center;
    transition: border-color var(--bb-ease), box-shadow var(--bb-ease), transform var(--bb-ease);
}
.wc-pack:hover { border-color: #cbc7ee; box-shadow: var(--bb-shadow); transform: translateY(-2px); }
.wc-pack__qty { font-size: 30px; font-weight: 800; color: var(--bb-ink); line-height: 1; font-variant-numeric: tabular-nums; }
.wc-pack__qty small {
    display: block;
    margin-top: 5px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bb-muted);
}
.wc-pack__price { margin: 10px 0 16px; font-size: 14px; font-weight: 700; color: var(--bb-brand); unicode-bidi: isolate; }

/* --- Membership plan picker ------------------------------------------------
   A self-contained pricing card: eyebrow row (name + tier badge) → price →
   divider → scannable spec list → pinned CTA. Equal-height via the stretch
   grid + margin-top:auto on the foot. */
.wm-plans-hint { margin-bottom: 16px; }
.wm-plans {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    align-items: stretch;
    margin-top: 4px;
}
.wm-plan-card {
    display: flex;
    flex-direction: column;
    text-align: start;
    padding: 20px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-lg);
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow-sm);
    transition: border-color var(--bb-ease), box-shadow var(--bb-ease), transform var(--bb-ease);
}
.wm-plan-card:hover { border-color: #cbc7ee; box-shadow: var(--bb-shadow); transform: translateY(-2px); }

/* Current & pending share the same emphasis shape (accent border + inset ring
   + solid head badge); only the colour differs. The card body stays white in
   both , the colour lives on the border and the badge, not a full fill. */
.wm-plan-card.is-current {
    border-color: var(--bb-brand);
    background: var(--bb-brand-wash);
    box-shadow: inset 0 0 0 1px var(--bb-brand);
}
.wm-plan-card.is-current:hover { transform: none; }
.wm-plan-card.is-pending {
    border-color: var(--bb-warn);
    box-shadow: inset 0 0 0 1px var(--bb-warn);
}
.wm-plan-card.is-pending:hover { transform: none; box-shadow: inset 0 0 0 1px var(--bb-warn); }

.wm-plan-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.wm-plan-card__name {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--bb-ink);
}
.wm-tier {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.wm-tier i { font-size: 11px; }
.wm-tier--up      { background: var(--bb-brand-tint); color: var(--bb-brand-strong); }
.wm-tier--down    { background: var(--bb-surface-2); color: var(--bb-muted); box-shadow: inset 0 0 0 1px var(--bb-line); }
.wm-tier--current { background: var(--bb-brand); color: #fff; }
.wm-tier--pending { background: var(--bb-warn); color: #fff; }

.wm-plan-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--bb-line-soft);
    unicode-bidi: isolate;
}
.wm-plan-card__amount {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--bb-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.wm-plan-card__cur { font-size: 14px; font-weight: 800; color: var(--bb-ink); }
.wm-plan-card__per { font-size: 12.5px; font-weight: 600; color: var(--bb-muted); }

.wm-plan-card__specs { flex: 1; margin-bottom: 18px; gap: 10px; }
.wm-plan-card__specs li { font-size: 13px; }
.wm-plan-card__specs li > i { font-size: 16px; color: var(--bb-brand); }

.wm-plan-card__foot { margin-top: 8px; }

.pay-checkout__bonus { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--bb-line); font-size: 12.5px; font-weight: 600; color: var(--bb-coin-ink); }

/* =============================================================================
   PAYOUT METHODS  (.pm-*)
   ========================================================================== */
/* --- the "how you get paid" lede ---------------------------------------
   The page leads with the stakes, not a list: nothing on file is the reason
   the worker's own payment cannot move, and the gig settlement panel says the
   same thing from the client's side. Deliberately the calm brand wash, not a
   warning colour , this is orientation, not an alarm. */
.pm-intro {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    margin-bottom: 18px;
    border-radius: var(--bb-r-lg);
    background: var(--bb-brand-wash);
    border: 1px solid var(--bb-brand-tint);
}
.pm-intro__icon {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: var(--bb-r-sm);
    background: var(--bb-surface);
    color: var(--bb-brand);
    font-size: 19px;
    box-shadow: var(--bb-shadow-sm);
}
.pm-intro__title { margin: 0 0 4px; font-size: 14px; font-weight: 800; color: var(--bb-ink); }
.pm-intro__body { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--bb-body); max-width: 68ch; }
.pm-intro__secure {
    display: flex; align-items: center; gap: 6px;
    margin: 9px 0 0;
    font-size: 11.5px; font-weight: 700; color: var(--bb-muted);
}
.pm-intro__secure i { font-size: 13px; color: var(--bb-ok); }

/* --- one saved method ---------------------------------------------------
   A card rather than the old single-line row: the identifier, the label and
   the two actions each need their own line to stay legible, and a delete
   button sitting inline next to an account number was one mis-tap away from
   removing the thing a client is being shown. */
.pm-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.pm-card {
    padding: 16px 18px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r);
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow-sm);
}
/* The one clients actually see reads as the primary card , this is the answer
   to "which account does my money land in?", so the difference has to survive
   a glance and not rest on the badge alone. */
.pm-card.is-default {
    border-color: var(--bb-brand);
    box-shadow: inset 0 0 0 1px var(--bb-brand), var(--bb-shadow);
}
.pm-card.is-default .pm-card__id { color: var(--bb-brand-deep); }

.pm-card__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pm-card__type {
    font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--bb-brand); background: var(--bb-brand-tint);
    padding: 4px 9px; border-radius: 999px;
}
.pm-card__flag {
    display: inline-flex; align-items: center; gap: 5px;
    margin-inline-start: auto;
    font-size: 10.5px; font-weight: 800;
    color: var(--bb-ok); background: var(--bb-ok-bg);
    padding: 4px 10px; border-radius: 999px;
}
.pm-card__flag i { font-size: 12px; }

.pm-card__id {
    margin: 0;
    font-size: 16px; font-weight: 800; color: var(--bb-ink);
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
    unicode-bidi: isolate;
}
.pm-card__label { margin: 3px 0 0; font-size: 12.5px; color: var(--bb-muted); unicode-bidi: isolate; }
.pm-card__details { margin-top: 10px; }
.pm-card__details .eng-payout__fields { margin-top: 4px; }

.pm-card__actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 14px; padding-top: 13px;
    border-top: 1px solid var(--bb-line-soft);
}

/* --- the add form, as a disclosure --------------------------------------
   Open on first visit (nothing to list) and whenever validation sent the user
   back , a closed disclosure would otherwise hide the input it just rejected. */
details.pm-add > summary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 16px;
    border: 1px dashed var(--bb-line);
    border-radius: var(--bb-r);
    background: var(--bb-surface);
    font-size: 13.5px; font-weight: 700; color: var(--bb-brand);
    cursor: pointer; list-style: none;
    transition: border-color var(--bb-ease), background var(--bb-ease);
}
details.pm-add > summary::-webkit-details-marker { display: none; }
details.pm-add > summary:hover { border-color: var(--bb-brand); background: var(--bb-brand-wash); }
details.pm-add > summary i { font-size: 17px; }
details.pm-add[open] > summary { margin-bottom: 14px; }
.pm-add .ws-card { margin-bottom: 0; }

.pm-form .fld { margin-bottom: 14px; }
.pm-form .bb-check-inline {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--bb-body);
    margin-bottom: 16px;
}
.pm-form .bb-check-inline input { width: 16px; height: 16px; accent-color: var(--bb-brand); }

/* =============================================================================
   TALENT DIRECTORY  (.tal-*)
   ========================================================================== */
.tal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
    gap: 14px;
}
.tal-card {
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-lg);
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow-sm);
    padding: 20px;
    transition: border-color var(--bb-ease), box-shadow var(--bb-ease);
}
.tal-card:hover { border-color: #cbc7ee; box-shadow: var(--bb-shadow); }
.tal-head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.tal-name { font-size: 14px; font-weight: 700; color: var(--bb-ink); }
.tal-headline { font-size: 12.5px; color: var(--bb-muted); }
.tal-bio {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--bb-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tal-skills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.tal-rate {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--bb-line-soft);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--bb-ok);
    unicode-bidi: isolate;
}

/* =============================================================================
   MESSAGES  , two-pane inbox  (.wm-*, message bubbles keep .mt-*)
   ========================================================================== */
.wm-wrap { min-width: 0; }
.wm-inbox {
    display: grid;
    grid-template-columns: 304px minmax(0, 1fr);
    height: min(72vh, 720px);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-lg);
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow);
    overflow: hidden;
}

/* --- list pane --- */
.wm-inbox__list {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-inline-end: 1px solid var(--bb-line);
    background: var(--bb-surface-2);
}
.wm-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 16px;
    border-bottom: 1px solid var(--bb-line);
    background: var(--bb-surface);
}
.wm-list-head__title { font-size: 13px; font-weight: 800; letter-spacing: -.01em; color: var(--bb-ink); }
.wm-list-head__unread {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--bb-brand);
    background: var(--bb-brand-tint);
    padding: 3px 9px;
    border-radius: 999px;
}
.wm-threads { flex: 1; overflow-y: auto; padding: 6px; }

.wm-thread {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-radius: var(--bb-r-sm);
    background: transparent;
    text-align: start;
    cursor: pointer;
    transition: background var(--bb-ease);
}
.wm-thread + .wm-thread { margin-top: 2px; }
.wm-thread:hover { background: var(--bb-surface); }
.wm-thread.is-active { background: var(--bb-surface); box-shadow: inset 0 0 0 1px var(--bb-line); }
.wm-thread.is-active .wm-thread__name { color: var(--bb-brand); }

.wm-av {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bb-brand-tint);
    color: var(--bb-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    overflow: hidden;
}
.wm-av img { width: 100%; height: 100%; object-fit: cover; }
.wm-av--sm { width: 36px; height: 36px; font-size: 13px; }

.wm-thread__body { flex: 1; min-width: 0; }
.wm-thread__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wm-thread__name {
    font-size: 13px;
    font-weight: 700;
    color: var(--bb-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wm-thread__time { flex-shrink: 0; font-size: 10.5px; color: var(--bb-faint); font-weight: 600; }
.wm-thread__preview {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--bb-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wm-thread.has-unread .wm-thread__name { color: var(--bb-ink); }
.wm-thread.has-unread .wm-thread__preview { color: var(--bb-body); font-weight: 600; }
.wm-thread__badge {
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--bb-brand);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- conversation pane --- */
.wm-inbox__conv { display: flex; flex-direction: column; min-height: 0; }

.wm-conv__placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px;
    color: var(--bb-muted);
}
.wm-conv__placeholder i { font-size: 40px; color: var(--bb-brand-tint); }
.wm-conv__placeholder-title { margin: 14px 0 4px; font-size: 15px; font-weight: 800; color: var(--bb-ink); }
.wm-conv__placeholder-body { margin: 0; max-width: 34ch; font-size: 12.5px; line-height: 1.6; }

.wm-conv__head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bb-line);
    flex-shrink: 0;
}
.wm-conv__back {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 0;
    border-radius: 9px;
    background: var(--bb-surface-2);
    color: var(--bb-body);
    font-size: 16px;
    cursor: pointer;
}
.wm-conv__ident { flex: 1; min-width: 0; }
.wm-conv__name { display: block; font-size: 14px; font-weight: 800; color: var(--bb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-conv__re {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--bb-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wm-conv__re i { flex-shrink: 0; font-size: 12px; }
.wm-conv__head .ws-btn { flex-shrink: 0; }

.wm-log {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 16px;
    background: var(--bb-surface-2);
}
.wm-log__empty { margin: auto; text-align: center; color: var(--bb-faint); font-size: 13px; }

.mt-msg { max-width: 76%; display: flex; flex-direction: column; }
.mt-msg--me { align-self: flex-end; align-items: flex-end; }
.mt-msg--them { align-self: flex-start; align-items: flex-start; }
.mt-bubble {
    padding: 9px 13px;
    border-radius: 15px;
    font-size: 13.5px;
    line-height: 1.55;
    white-space: pre-line;
    word-break: break-word;
}
.mt-msg--them .mt-bubble { background: var(--bb-surface); color: var(--bb-ink); border: 1px solid var(--bb-line); border-bottom-left-radius: 5px; }
.mt-msg--me   .mt-bubble { background: var(--bb-brand); color: #fff; border-bottom-right-radius: 5px; }
.mt-meta { margin-top: 3px; font-size: 10px; color: var(--bb-faint); }

.wm-composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--bb-line);
    flex-shrink: 0;
}
.wm-composer textarea {
    flex: 1;
    min-height: 42px;
    max-height: 132px;
    border: 1px solid var(--bb-line);
    border-radius: 12px;
    padding: 10px 13px;
    font-size: 13.5px;
    font-family: inherit;
    line-height: 1.5;
    resize: none;
    box-sizing: border-box;
    overflow-y: auto;
}
.wm-composer textarea:focus { outline: none; border-color: var(--bb-brand); box-shadow: var(--bb-focus); }
.wm-composer .ws-btn { flex-shrink: 0; width: 42px; min-height: 42px; padding: 0; }
.wm-composer__err { display: block; padding: 0 14px 10px; }

@media (max-width: 860px) {
    .wm-inbox { grid-template-columns: 1fr; height: min(76vh, 640px); }
    .wm-inbox__list, .wm-inbox__conv { grid-column: 1; grid-row: 1; }
    .wm-inbox__conv { display: none; }
    .wm-wrap.is-conv .wm-inbox__list { display: none; }
    .wm-wrap.is-conv .wm-inbox__conv { display: flex; }
    .wm-conv__back { display: flex; }
    .wm-conv__head-label { display: none; }
}

/* =============================================================================
   OFF-PLATFORM PAYMENT PICKER  (.wsp-pay__*)  — same shape as the mentorship
   booking payment step: radio-card per method, chosen one expands.
   ========================================================================== */
.wsp-pay__card {
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r);
    overflow: hidden;
    background: var(--bb-surface);
}
.wsp-pay__card + .wsp-pay__card { margin-top: 12px; }
.wsp-pay__card.is-on { border-color: var(--bb-brand); box-shadow: inset 0 0 0 1px var(--bb-brand); }

.wsp-pay__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
}
.wsp-pay__card.is-on .wsp-pay__head { background: var(--bb-brand-wash); }
.wsp-pay__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.wsp-pay__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: var(--bb-surface-2);
    color: var(--bb-muted);
    transition: background var(--bb-ease), color var(--bb-ease);
}
.wsp-pay__card.is-on .wsp-pay__icon { background: var(--bb-brand); color: #fff; }

.wsp-pay__name { flex-grow: 1; min-width: 0; font-weight: 700; color: var(--bb-ink); font-size: 14px; line-height: 1.35; }
.wsp-pay__name small {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bb-muted);
}

.wsp-pay__pick {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--bb-line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
}
.wsp-pay__card.is-on .wsp-pay__pick { background: var(--bb-brand); border-color: var(--bb-brand); }
.wsp-pay__card:not(.is-on) .wsp-pay__pick i { display: none; }

.wsp-pay__body { padding: 4px 16px 16px; }
.wsp-pay__card:not(.is-on) .wsp-pay__body { display: none; }
.wsp-pay__desc {
    margin: 8px 0 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--bb-muted);
}
.wsp-pay__desc :is(p, ul, ol) { margin: 0 0 8px; }
.wsp-pay__desc :last-child { margin-bottom: 0; }

.wsp-pay__list { list-style: none; margin: 0; padding: 0; }
.wsp-pay__list li {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 12px;
    padding: 10px 0;
    font-size: 13.5px;
    border-bottom: 1px dashed var(--bb-line-soft);
}
.wsp-pay__list li:first-child { padding-top: 4px; }
.wsp-pay__list li:last-child { border-bottom: 0; padding-bottom: 4px; }
.wsp-pay__list .k { color: var(--bb-muted); font-weight: 600; min-width: 132px; }
.wsp-pay__list .v { color: var(--bb-ink); font-weight: 700; word-break: break-word; unicode-bidi: isolate; }

.wsp-pay__proof { margin-top: 18px; }

/* =============================================================================
   BOUNTY FORM  (.bf__*)   — Livewire component
   ========================================================================== */
/* --- locked view (bounty has a hired member) ------------------------------ */
.bf-locked { display: flex; flex-direction: column; gap: 18px; }
.bf-locked__banner { margin: 0; }
.bf-locked .bf__section {
    padding: 22px 24px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-lg);
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow-sm);
}
.bf-locked .bf__section-title {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--bb-ink);
}
.bf-locked__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px 20px;
    margin: 0 0 16px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--bb-line-soft);
}
.bf-locked__facts dt { margin: 0 0 2px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--bb-faint); }
.bf-locked__facts dd { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--bb-ink); }
.bf-locked__prose { font-size: 14px; line-height: 1.65; color: var(--bb-body); }
.bf-locked__subhead { margin: 20px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bb-muted); }
.bf-locked__addendum {
    margin-top: 14px;
    padding: 12px 14px;
    border-inline-start: 3px solid var(--bb-brand);
    background: var(--bb-brand-wash);
    border-radius: 0 var(--bb-r) var(--bb-r) 0;
}
.bf-locked__addendum-meta {
    display: flex; align-items: center; gap: 6px;
    margin: 0 0 6px;
    font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: var(--bb-brand-strong);
}

/* addendum block , shared shape on the locked view and the public listing */
.bbs-addendum {
    margin-top: 16px;
    padding: 12px 14px;
    border-inline-start: 3px solid var(--bb-brand);
    background: var(--bb-brand-wash);
    border-radius: 0 var(--bb-r) var(--bb-r) 0;
}
.bbs-addendum__meta {
    display: flex; align-items: center; gap: 6px;
    margin: 0 0 6px;
    font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: var(--bb-brand-strong);
}

.bf-amend {
    padding: 14px 0;
    border-top: 1px solid var(--bb-line-soft);
}
.bf-amend:first-of-type { border-top: 0; padding-top: 0; }
.bf-amend__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    margin-bottom: 6px;
}
.bf-amend__head strong { font-size: 13.5px; color: var(--bb-ink); }
.bf-amend__now { font-size: 12px; color: var(--bb-muted); white-space: nowrap; }
.bf-amend__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.bf-amend__row .bf__input { max-width: 180px; }
.bf-amend textarea.bf__input { max-width: none; width: 100%; margin-top: 8px; }
@media (max-width: 480px) {
    .bf-amend__row { flex-direction: column; align-items: stretch; }
    .bf-amend__row .bf__input { max-width: none; }
}

/* --- read-only bounty summary ("the memory" of a closed / expired post) --- */
.bf-summary__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

/* --- lifecycle timeline: dated events on a single rail --------------------- */
.bb-tl { list-style: none; margin: 0; padding: 0; }
.bb-tl__item {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: start;
    gap: 2px 12px;
    padding-bottom: 18px;
}
.bb-tl__item::before {            /* the rail , drawn behind every dot but the last */
    content: "";
    position: absolute;
    inset-inline-start: 13px;
    top: 26px;
    bottom: -2px;
    width: 2px;
    background: var(--bb-line);
}
.bb-tl__item:last-child { padding-bottom: 0; }
.bb-tl__item:last-child::before { display: none; }
.bb-tl__dot {
    grid-row: 1 / span 2;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bb-brand-wash);
    color: var(--bb-brand-strong);
    font-size: 13px;
    flex-shrink: 0;
    z-index: 1;
}
.bb-tl__body { min-width: 0; }
.bb-tl__title { margin: 4px 0 0; font-size: 13.5px; font-weight: 700; color: var(--bb-ink); }
.bb-tl__note { margin: 3px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--bb-muted); overflow-wrap: anywhere; }
.bb-tl__at { margin-top: 5px; font-size: 11px; font-weight: 600; color: var(--bb-faint); white-space: nowrap; }
@media (max-width: 480px) {
    .bb-tl__item { grid-template-columns: 28px minmax(0, 1fr); }
    .bb-tl__at { grid-column: 2; margin-top: 2px; }
}


.bb-fgroup__sub {
    margin: 12px 0 6px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bb-faint);
}


.bb-spin {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bb-spin .7s linear infinite;
}
@keyframes bb-spin { to { transform: rotate(360deg); } }

/* =============================================================================
   APPLY FORM   (workspace/pages/applications/create)
   ========================================================================== */
.bb-apply-form { max-width: 640px; }

/* =============================================================================
   PAYMENT CHECKOUT  (membership / credits)  — form + sticky summary
   ========================================================================== */
.pay-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
    max-width: 900px;
}
.pay-checkout__form { min-width: 0; }
.pay-checkout__actions { margin-top: 20px; }
.pay-checkout__summary { position: sticky; top: 22px; }
.pay-checkout__summary .ws-card { box-shadow: var(--bb-shadow); }

@media (max-width: 820px) {
    .pay-checkout { grid-template-columns: 1fr; }
    .pay-checkout__summary { position: static; order: -1; }
}

/* =============================================================================
   PUBLIC BOUNTY BOARD  —  /bounty-board
   The masthead mirrors the site's dark breadcrumb band (near-black, shapes),
   not a bespoke purple. Mascot stays.
   ========================================================================== */
.bb-masthead, .bbs-masthead {
    position: relative;
    overflow: hidden;
    background: #1c1c26;
    color: #e9e8f2;
}
.bb-masthead::before, .bbs-masthead::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(44rem 22rem at 82% -35%, rgba(66, 66, 214, .34), transparent 68%),
        radial-gradient(34rem 20rem at 2% 128%, rgba(66, 66, 214, .14), transparent 70%);
}
.bb-masthead::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .05) 1px, transparent 0);
    background-size: 22px 22px;
    mask-image: linear-gradient(to bottom, #000, transparent 72%);
}
.bb-masthead .container,
.bbs-masthead .container { position: relative; z-index: 1; padding-block: 46px 42px; }
.bbs-masthead .container { max-width: 1080px; }

.bb-masthead__back, .bbs-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(233, 232, 242, .6);
    text-decoration: none;
}
.bb-masthead__back:hover, .bbs-back:hover { color: #fff; }
.bb-masthead__back i, .bbs-back i { font-size: 14px; }

.bb-masthead__title {
    margin: 0;
    font-size: clamp(27px, 4vw, 37px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
}
.bb-masthead__tagline {
    margin: 12px 0 0;
    max-width: 54ch;
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(233, 232, 242, .78);
}

.bb-masthead__art {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: max(8px, calc((100% - 1240px) / 2));
    block-size: 290px;
    inline-size: auto;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 20px 36px rgba(0, 0, 0, .45));
}
.bb-masthead__art__max {
    block-size: 390px;
}
[dir="rtl"] .bb-masthead__art { transform: scaleX(-1); }
@media (max-width: 1040px) { .bb-masthead__art { block-size: 236px; opacity: .9; } }
@media (max-width: 880px)  { .bb-masthead__art { display: none; } }

.bb-masthead__stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.bb-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px 16px;
    border-radius: var(--bb-r);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
}
.bb-stat__num { font-size: 19px; font-weight: 800; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bb-stat__label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(233, 232, 242, .58);
}
.bb-stat--gig    .bb-stat__num { color: #86e3ad; }
.bb-stat--task   .bb-stat__num { color: var(--bb-coin-face); }
.bb-stat--collab .bb-stat__num { color: #b7b3fb; }

/* The masthead's "who's looking" row , the one piece of an otherwise
   identical masthead that changes with the viewer. A guest is asked to join;
   a signed-in member is handed the way back into their workspace, which is
   otherwise a dead end from here (the back link above only goes Home). */
.bb-masthead__who {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 640px;
    margin-top: 22px;
    padding: 16px 20px;
    border-radius: var(--bb-r-lg);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
}
.bb-masthead__who-title { margin: 0; font-size: 14px; font-weight: 800; color: #fff; }
.bb-masthead__who-body { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(233, 232, 242, .7); }
.bb-masthead__who-cta { flex-shrink: 0; }

/* --- shell / layout --- */
.bb-shell-public { background: var(--bb-canvas); }
.bb-shell-public .container { padding-block: 32px 92px; }
.bbs-shell .container { padding-block: 32px 92px; max-width: 1080px; }
.bb-layout {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

/* --- closer , full-bleed sign-off after the listing, deliberately louder
   and more colourful than the rest of the board (the masthead's blue-only
   glow is the "browsing" mood, this is the "come join in" payoff) --- */
/* A deliberately different hue from --bb-brand-deep (#1c1c6e) , that's
   also the footer's own background (Tailwind bg-neutral-900 → --sec-color),
   so a flat brand-deep closer used to bleed straight into it with no
   visible edge. Violet/magenta instead of blue reads as its own section,
   and the border is a hard seam regardless of how close the colours get. */
.bb-closer {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #3a1266 0%, #23124a 60%, #1d1240 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
}
.bb-closer__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(38rem 26rem at 12% 10%, rgba(219, 39, 158, .38), transparent 65%),
        radial-gradient(34rem 24rem at 92% 12%, rgba(239, 193, 90, .22), transparent 68%);
}
.bb-closer > .container { position: relative; z-index: 1; padding-block: 60px 56px; }
.bb-closer__hero {
    display: flex;
    align-items: center;
    gap: 32px;
}
.bb-closer__face {
    flex-shrink: 0;
    block-size: 180px;
    inline-size: auto;
    filter: drop-shadow(0 20px 34px rgba(0, 0, 0, .55));
    animation: bb-closer-bob 4s ease-in-out infinite;
}
@keyframes bb-closer-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
    .bb-closer__face { animation: none; }
}
.bb-closer__copy { max-width: 560px; }
.bb-closer__kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--3d-face-leaser);
}
.bb-closer__kicker i { font-size: 13px; }
.bb-closer__title {
    margin: 10px 0 0;
    font-size: clamp(24px, 3.4vw, 32px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: #fff;
    text-wrap: balance;
}
.bb-closer__body {
    margin: 12px 0 0;
    max-width: 48ch;
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .8);
}
.bb-closer__cta { margin-top: 26px; }

/* --- closer , real people preview. Reuses .tp-card's exact structure
   (never duplicated), but a flat white card read as harsh, cut-and-pasted
   against this dark section, so every colour here is re-themed for a dark
   surface , same component, different skin, scoped so /talent itself
   (light page) is untouched. --- */
.bb-closer__people-label {
    margin: 48px 0 14px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}
.bb-closer__people {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
    gap: 14px;
}
.bb-closer__people .tp-card {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .14);
    box-shadow: none;
}
.bb-closer__people .tp-card:hover {
    border-color: rgb(90 218 239 / 60%);
    box-shadow: 0 0 0 1px rgb(90 232 239 / 0.28), 0 16px 32px -18px rgba(0, 0, 0, .65);
    transform: translateY(-4px);
}
.bb-closer__people .tp-card__avatar { background: rgba(255, 255, 255, .12); color: #fff; }
.bb-closer__people .tp-card__name { color: #fff; }
.bb-closer__people .tp-card__headline { color: rgba(255, 255, 255, .6); }
.bb-closer__people .tp-card__bio { color: rgba(255, 255, 255, .72); }
.bb-closer__people .tp-card__foot { border-top-color: rgba(255, 255, 255, .14); }
.bb-closer__people .tp-card__rate { color: #86e3ad; }
.bb-closer__people .tp-card__go,
.bb-closer__people .tp-card:hover .tp-card__go { color: var(--3d-face-leaser); }
.bb-closer__people .bb-chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .82); }
.bb-closer__people .bb-chip--more { color: rgba(255, 255, 255, .5); }

/* --- filter rail --- */
.bb-filters {
    position: sticky;
    top: 22px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-lg);
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow-sm);
    overflow: hidden;
}
.bb-filters__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 18px;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: -.01em;
    color: var(--bb-ink);
    cursor: pointer;
    user-select: none;
}
.bb-filters__summary::after {
    content: "\203A";
    color: var(--bb-faint);
    font-size: 18px;
    transition: transform var(--bb-ease);
}
.bb-filters__toggle:checked ~ .bb-filters__summary::after { transform: rotate(90deg); }
.bb-filters__body { display: none; padding: 4px 18px 20px; }
.bb-filters__toggle:checked ~ .bb-filters__body { display: block; }

.bb-fgroup { padding-block: 16px; border-top: 1px solid var(--bb-line-soft); }
.bb-fgroup:first-child { border-top: 0; padding-top: 6px; }
.bb-fgroup__label {
    display: block;
    margin: 0 0 11px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--bb-muted);
}

.bb-fgroup .bb-select, .bb-fgroup input[type="number"] { min-height: 42px; font-size: 13px; }

/* Choices.js multi-select , sits tighter in the narrow rail than the site
   default tuned for the big mentor-application inputs. */
.bb-fgroup .choices { margin-bottom: 0; }
.bb-fgroup .choices__inner,
.ws-board__filter .choices__inner {
    min-height: 42px !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
}
.bb-fgroup .choices__list--dropdown .choices__item,
.ws-board__filter .choices__list--dropdown .choices__item { font-size: 13px; }
.bb-fgroup .choices__input,
.ws-board__filter .choices__input { font-size: 13px !important; }

/* long skills list → clip + show-all (pure CSS) */
.bb-more__clip { position: relative; max-height: 232px; overflow: hidden; }
.bb-more__toggle:checked ~ .bb-more__clip { max-height: none; }
.bb-more__clip::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 46px;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}
.bb-more__toggle:checked ~ .bb-more__clip::after { content: none; }
.bb-more__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--bb-brand);
    cursor: pointer;
}
.bb-more__btn::before { content: "+"; font-size: 14px; line-height: 1; }
.bb-more__toggle:checked ~ .bb-more__btn::before { content: "\2013"; }
.bb-more__btn .bb-more__less { display: none; }
.bb-more__toggle:checked ~ .bb-more__btn .bb-more__all { display: none; }
.bb-more__toggle:checked ~ .bb-more__btn .bb-more__less { display: inline; }

.bb-filters__actions { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--bb-line-soft); margin-top: 4px; }

/* --- results controls row --- */
.bb-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.bb-sortform { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--bb-muted); font-weight: 600; white-space: nowrap; }
.bb-sortform label { flex-shrink: 0; }
.bb-sortform .bb-select { min-height: 40px; width: auto; font-size: 12.5px; padding-block: 8px; }

.bb-list { display: flex; flex-direction: column; gap: 14px; }
.bb-list--compact { gap: 10px; }
.bb-list--compact .bb-row { padding: 16px 18px; box-shadow: none; grid-template-columns: 44px minmax(0, 1fr) minmax(120px, max-content); gap: 16px; }
.bb-list--compact .bb-row:hover { transform: none; }
.bb-list--compact .bb-row__badge { inline-size: 44px; block-size: 44px; font-size: 20px; }
.bb-list--compact .bb-row__title { font-size: 15px; -webkit-line-clamp: 1; }
.bb-list--compact .bb-row__excerpt,
.bb-list--compact .bb-row__tags { display: none; }
.bb-list--compact .bb-row__reward-figure { font-size: 16px; }
.bb-pagination { margin-top: 32px; }

/* --- listing row (card) --- */
.bb-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) minmax(150px, max-content);
    gap: 20px;
    padding: 22px 24px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-lg);
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--bb-ease), box-shadow var(--bb-ease), transform var(--bb-ease);
}
.bb-row:hover { border-color: #cbc7ee; box-shadow: var(--bb-shadow); transform: translateY(-2px); }

.bb-row__badge {
    inline-size: 54px;
    block-size: 54px;
    border-radius: var(--bb-r);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    flex-shrink: 0;
}
.bb-row--gig    .bb-row__badge { background: var(--bb-ok-bg);   color: var(--bb-ok); }
.bb-row--task   .bb-row__badge { background: var(--bb-coin-bg); color: var(--bb-coin-ink); }
.bb-row--collab .bb-row__badge { background: var(--bb-brand-tint); color: var(--bb-brand); }

.bb-row__body { min-inline-size: 0; display: flex; flex-direction: column; gap: 7px; }
.bb-row__kicker { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.bb-row__type { font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.bb-row--gig    .bb-row__type { color: var(--bb-ok); }
.bb-row--task   .bb-row__type { color: var(--bb-coin-ink); }
.bb-row--collab .bb-row__type { color: var(--bb-brand); }
.bb-row__kicker-sep { inline-size: 3px; block-size: 3px; border-radius: 50%; background: var(--bb-faint); }
.bb-row__posted { color: var(--bb-muted); font-weight: 600; }

.bb-row__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--bb-ink);
    letter-spacing: -.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bb-row:hover .bb-row__title { color: var(--bb-brand); }
.bb-row__excerpt {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--bb-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bb-row__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 3px; }
.bb-row__meta span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--bb-muted); }
.bb-row__meta i { font-size: 14px; color: var(--bb-faint); }
.bb-row__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }

.bb-row__reward {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    text-align: end;
    padding-inline-start: 20px;
    border-inline-start: 1px solid var(--bb-line-soft);
}
.bb-row__reward-label { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bb-faint); }
.bb-row__reward-figure { font-size: 18px; font-weight: 800; color: var(--bb-ink); line-height: 1.2; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.bb-row__reward-go {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--bb-brand);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: .55;
    transition: opacity var(--bb-ease), gap var(--bb-ease);
}
.bb-row:hover .bb-row__reward-go { opacity: 1; gap: 7px; }

/* =============================================================================
   PUBLIC BOUNTY DETAIL  (.bbs-*)
   ========================================================================== */
.bbs-shell { background: var(--bb-canvas); }
.bbs-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: start; }
.bbs-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.bbs-kicker--gig    { color: #86e3ad; }
.bbs-kicker--task   { color: var(--bb-coin-face); }
.bbs-kicker--collab { color: #b7b3fb; }
.bbs-title {
    margin: 12px 0 0;
    font-size: clamp(22px, 3.4vw, 30px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: #fff;
}
.bbs-byline { margin: 12px 0 0; font-size: 12.5px; color: rgba(233, 232, 242, .64); }
.bbs-byline strong { color: rgba(233, 232, 242, .92); font-weight: 700; }
.bbs-reward-card {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--bb-r);
    padding: 16px 20px;
    min-inline-size: 170px;
}
.bbs-reward-card__label { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: rgba(233, 232, 242, .56); }
.bbs-reward-card__figure { margin-top: 5px; font-size: 22px; font-weight: 800; color: #fff; line-height: 1.2; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
/* What kind of number that figure is. Deliberately one line and deliberately
   inside the card , an applicant should learn "this is a ceiling" while
   looking at the ceiling, not from a paragraph further down the page. */
.bbs-reward-card__note {
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .72);
    max-width: 30ch;
}

.bbs-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.bbs-notice { border-radius: var(--bb-r); padding: 13px 16px; font-size: 13px; font-weight: 600; margin-bottom: 22px; }
.bbs-notice--closed  { background: var(--bb-surface-2); color: var(--bb-muted); border: 1px solid var(--bb-line); }
.bbs-notice--expired { background: var(--bb-danger-bg); color: var(--bb-danger); }

.bbs-section + .bbs-section { margin-top: 36px; }
.bbs-section > h2 {
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bb-line);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bb-muted);
}

/* .editor-preview(-side) is EasyMDE's own live-preview pane (the bio editor
   in Professional settings, the description/spec editor on the bounty
   form) , sharing every rule here with .bbs-prose means what you see while
   writing is exactly what ships on the real page, never a step removed.
   Without this, both inherited the site-wide Tailwind-reset zero margin on
   <p>, so a blank-line paragraph break was invisible in either place. */
.bbs-prose, .editor-preview, .editor-preview-side { font-size: 15px; line-height: 1.8; color: var(--bb-body); }
.bbs-prose > *:first-child, .editor-preview > *:first-child, .editor-preview-side > *:first-child { margin-top: 0; }
.bbs-prose > *:last-child, .editor-preview > *:last-child, .editor-preview-side > *:last-child { margin-bottom: 0; }
.bbs-prose h1, .bbs-prose h2, .bbs-prose h3,
.editor-preview h1, .editor-preview h2, .editor-preview h3,
.editor-preview-side h1, .editor-preview-side h2, .editor-preview-side h3 { font-weight: 700; color: var(--bb-ink); margin: 1.5em 0 .5em; line-height: 1.3; }
.bbs-prose h1, .editor-preview h1, .editor-preview-side h1 { font-size: 1.3em; }
.bbs-prose h2, .editor-preview h2, .editor-preview-side h2 { font-size: 1.15em; }
.bbs-prose h3, .editor-preview h3, .editor-preview-side h3 { font-size: 1.02em; }
.bbs-prose p, .editor-preview p, .editor-preview-side p { margin: 0 0 1em; }
.bbs-prose ul, .editor-preview ul, .editor-preview-side ul { margin: 0 0 1em; padding-inline-start: 1.4em; list-style: disc; }
.bbs-prose ol, .editor-preview ol, .editor-preview-side ol { margin: 0 0 1em; padding-inline-start: 1.4em; list-style: decimal; }
.bbs-prose li, .editor-preview li, .editor-preview-side li { margin: .35em 0; }
.bbs-prose li::marker, .editor-preview li::marker, .editor-preview-side li::marker { color: var(--bb-muted); }
.bbs-prose a, .editor-preview a, .editor-preview-side a { color: var(--bb-brand); text-decoration: underline; }
.bbs-prose code, .editor-preview code, .editor-preview-side code { background: var(--bb-surface-2); padding: .1em .35em; border-radius: 4px; font-size: .9em; unicode-bidi: isolate; }
.bbs-prose pre, .editor-preview pre, .editor-preview-side pre { background: #1c1c26; color: #e9e8f2; padding: 14px 16px; border-radius: var(--bb-r-sm); overflow-x: auto; direction: ltr; }
.bbs-prose pre code, .editor-preview pre code, .editor-preview-side pre code { background: none; padding: 0; color: inherit; }
.bbs-prose blockquote, .editor-preview blockquote, .editor-preview-side blockquote { margin: 0 0 1em; padding-inline-start: 14px; border-inline-start: 3px solid var(--bb-line); color: var(--bb-muted); }

/* EasyMDE's own stylesheet loads after this file and re-paints `pre` with a
   light grey background , which left our light code text invisible in the
   live preview. Scoping under .EasyMDEContainer (the wrapper EasyMDE always
   builds) wins the cascade regardless of load order. */
.EasyMDEContainer .editor-preview pre,
.EasyMDEContainer .editor-preview-side pre { background: #1c1c26; color: #e9e8f2; }
.EasyMDEContainer .editor-preview pre code,
.EasyMDEContainer .editor-preview-side pre code { background: none; color: #e9e8f2; }
.EasyMDEContainer .editor-preview code,
.EasyMDEContainer .editor-preview-side code { background: var(--bb-surface-2); color: inherit; }

/* Markdown tables , rare (no toolbar button) but a brief may paste one. */
.bbs-prose table, .editor-preview table, .editor-preview-side table { border-collapse: collapse; margin: 0 0 1em; font-size: .95em; max-width: 100%; }
.bbs-prose th, .bbs-prose td,
.editor-preview th, .editor-preview td,
.editor-preview-side th, .editor-preview-side td { border: 1px solid var(--bb-line); padding: 6px 10px; text-align: start; }
.bbs-prose th, .editor-preview th, .editor-preview-side th { background: var(--bb-surface-2); font-weight: 700; }

.bbs-criteria { list-style: none; margin: 0; padding: 0; }
.bbs-criteria li { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--bb-line-soft); }
.bbs-criteria li:last-child { border-bottom: 0; }
.bbs-criteria__mark {
    inline-size: 18px;
    block-size: 18px;
    border: 2px solid #c9c6e8;
    border-radius: 6px;
    flex-shrink: 0;
    margin-block-start: 1px;
}
.bbs-criteria__text { flex: 1; font-size: 14px; line-height: 1.55; color: var(--bb-body); }
.bbs-criteria__tag { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; margin-block-start: 3px; }
.bbs-criteria__tag--req { color: var(--bb-danger); }
.bbs-criteria__tag--opt { color: var(--bb-faint); }
.bbs-criteria-hint { margin: -4px 0 10px; font-size: 12.5px; color: var(--bb-muted); }

.bbs-aside {
    position: sticky;
    top: 22px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-lg);
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow);
    padding: 22px;
}
.bbs-facts { display: flex; flex-direction: column; margin: 0; }
.bbs-facts > div { display: flex; flex-direction: column; gap: 4px; padding: 13px 0; border-bottom: 1px solid var(--bb-line-soft); }
.bbs-facts > div:first-child { padding-top: 0; }
.bbs-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.bbs-facts dt { margin: 0; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bb-faint); }
.bbs-facts dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--bb-body); }
.bbs-skills { display: flex; flex-wrap: wrap; gap: 6px; }

.bbs-apply { margin-top: 20px; }
.bbs-apply__cta {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    border: 0;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 800;
    background: var(--bb-brand);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 20px -10px rgba(66, 66, 214, .6);
}
.bbs-apply__cta:hover { background: var(--bb-brand-strong); color: #fff; }
.bbs-apply__cta:disabled,
.bbs-apply__cta.is-disabled { background: var(--bb-brand-tint); color: #8a86c0; cursor: not-allowed; box-shadow: none; }
.bbs-apply small { display: block; margin-top: 9px; font-size: 11.5px; color: var(--bb-muted); text-align: center; }
.bbs-apply small a { color: var(--bb-brand); }

/* Inline "second step" apply panel , revealed in place on the public bounty
   page itself (Alpine x-show), never a navigation into the workspace shell. */
.bbs-apply-panel {
    margin-top: 28px;
    padding: 24px;
    border-radius: var(--bb-r-lg);
    background: var(--bb-surface);
    border: 1px solid var(--bb-line);
    box-shadow: var(--bb-shadow-sm);
    scroll-margin-top: 24px;
}
.bbs-apply-panel__back {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 0; padding: 0; margin-bottom: 16px;
    font-size: 12.5px; font-weight: 700; color: var(--bb-muted); cursor: pointer;
}
.bbs-apply-panel__back:hover { color: var(--bb-brand); }
.bbs-apply-form__actions { display: flex; gap: 10px; margin-top: 4px; }
.bbs-apply-form__actions .ws-btn { flex: 1 1 auto; }

/* =============================================================================
   SIDEBAR SECTION LABELS
   ========================================================================== */
.ws-nav__group {
    margin: 14px 10px 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bb-faint);
}
.ws-nav__group:first-child { margin-top: 4px; }

/* =============================================================================
   AVAILABILITY DOT  (shared by talent cards + profile)
   ========================================================================== */
.tp-avail {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--bb-faint);
}
.tp-avail--open    { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.tp-avail--limited { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
.tp-avail--closed  { background: var(--bb-faint); }

/* =============================================================================
   TALENT CARDS  (.tp-*)  — public /talent grid + workspace People
   ========================================================================== */
.tp-count {
    margin: 0 0 16px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--bb-muted);
}
.tp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 14px;
}
.tp-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-lg);
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow-sm);
    padding: 18px;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--bb-ease), box-shadow var(--bb-ease), transform var(--bb-ease);
}
.tp-card:hover { border-color: #cbc7ee; box-shadow: var(--bb-shadow); transform: translateY(-2px); }
.tp-card--static { cursor: default; }
.tp-card--static:hover { border-color: var(--bb-line); box-shadow: var(--bb-shadow-sm); transform: none; }
.tp-card--static .tp-card__go { color: var(--bb-faint); }

.tp-card__head { display: flex; align-items: center; gap: 12px; }
.tp-card__avatar,
.tp-hero__avatar {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--bb-brand-tint);
    color: var(--bb-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    overflow: hidden;
}
.tp-card__avatar img,
.tp-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }
.tp-card__ident { flex: 1; min-width: 0; }
.tp-card__name { display: block; font-size: 14.5px; font-weight: 700; color: var(--bb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-card__headline { display: block; font-size: 12.5px; color: var(--bb-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-card__head .tp-avail { align-self: flex-start; margin-top: 4px; }

.tp-card__context {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 12px 0 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--bb-brand);
}
.tp-card__context i { flex-shrink: 0; font-size: 14px; height: 1.4em; display: inline-flex; align-items: center; }

.tp-card__bio {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--bb-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tp-card__skills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.tp-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* auto, not a fixed 14px , pins the footer to the card's bottom edge
       regardless of how short the bio/skills above it are (a card with no
       bio and no skills, like a brand-new profile, used to leave the
       footer floating mid-card instead of aligned with its neighbours). */
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--bb-line-soft);
}
.tp-card__rate { font-size: 12.5px; font-weight: 700; color: var(--bb-ok); unicode-bidi: isolate; }
/* rate + rating share the footer's leading edge; "View profile" keeps the
   trailing one. Column, not row, so a long currency range never squeezes the
   star onto its own confusing line. */
.tp-card__money { display: inline-flex; flex-direction: column; gap: 3px; min-inline-size: 0; }
.tp-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--bb-coin-ink);
    unicode-bidi: isolate;
}
.tp-card__rating i { font-size: 13px; color: var(--bb-coin-face); }
.tp-card__rating small { font-weight: 600; color: var(--bb-faint); font-size: 11px; }
.tp-card__go {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--bb-brand);
    opacity: .55;
    transition: opacity var(--bb-ease), gap var(--bb-ease);
}
.tp-card:hover .tp-card__go { opacity: 1; gap: 7px; }

/* --- public profile hero --- */
.tp-hero { display: flex; align-items: center; gap: 18px; }
.tp-hero__avatar { width: 76px; height: 76px; font-size: 26px; border: 3px solid rgba(255, 255, 255, .18); }
.tp-hero__name { margin: 0; font-size: clamp(22px, 3.2vw, 28px); font-weight: 800; letter-spacing: -.02em; color: #fff; }
.tp-hero__headline { margin: 6px 0 0; font-size: 14px; color: rgba(233, 232, 242, .8); }
.tp-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 12px; font-size: 12.5px; color: rgba(233, 232, 242, .72); }
.tp-hero__avail { display: inline-flex; align-items: center; gap: 7px; }
.tp-hero__rate b { color: #fff; font-weight: 800; }
.tp-hero__meta .bb-rating-summary__num { color: #fff; }
.tp-hero__meta .bb-rating-summary__count { color: rgba(233, 232, 242, .72); }
.tp-hero__meta .bb-stars i.ph.ph-star { color: rgba(233, 232, 242, .35); }
.tp-hero__meta .bb-stars i.ph-fill.ph-star { color: var(--bb-coin-face); }
@media (max-width: 560px) { .tp-hero { flex-direction: column; text-align: center; } .tp-hero__meta { justify-content: center; } }

/* =============================================================================
   CANDIDATES HUB  (.cp-*)  — poster's pipeline across every bounty
   ========================================================================== */
.cp-card {
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-lg);
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow-sm);
    padding: 20px 22px;
}
.cp-card + .cp-card { margin-top: 12px; }
.cp-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cp-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cp-card__type { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bb-muted); }
.cp-card__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--bb-ink); letter-spacing: -.01em; }
.cp-card__waiting {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: var(--bb-r-sm);
    background: var(--bb-surface-2);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bb-muted);
}
.cp-card__body { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bb-line-soft); }
.cp-avatars { display: flex; align-items: center; }
.cp-avatars__a, .cp-avatars__more {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    border: 2px solid var(--bb-surface);
}
.cp-avatars__a { background: var(--bb-brand-tint); color: var(--bb-brand); }
.cp-avatars__a + .cp-avatars__a,
.cp-avatars__more { margin-inline-start: -10px; }
.cp-avatars__more { background: var(--bb-surface-2); color: var(--bb-muted); }

.cp-pipe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-pipe__seg {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
}
.cp-pipe__seg--new   { background: var(--bb-warn-bg); color: var(--bb-warn); }
.cp-pipe__seg--short { background: var(--bb-info-bg); color: var(--bb-info); }
.cp-pipe__seg--hired { background: var(--bb-ok-bg);   color: var(--bb-ok); }
.cp-pipe__total { font-size: 12px; font-weight: 700; color: var(--bb-muted); }

/* candidates pill on the My-bounties rows */
.wsb-row__cand {
    position: relative;
    background: var(--bb-brand-tint);
    color: var(--bb-brand);
    border-color: transparent;
    font-weight: 800;
}
.wsb-row__cand:hover { background: #dedcf8; color: var(--bb-brand-strong); }
.wsb-row__cand.has-new { box-shadow: 0 0 0 1px var(--bb-warn) inset; }
.wsb-row__cand-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--bb-warn);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

/* =============================================================================
   APPLICANT INBOX ADDITIONS  (.wp-*)
   ========================================================================== */
.bb-sec-head.is-spaced { margin-top: 26px; }
.wp-card { transition: opacity var(--bb-ease); }
.wp-card--rejected, .wp-card--withdrawn { opacity: .55; }
.wp-card--shortlisted { border-color: #bcd4f0; box-shadow: 0 0 0 1px #dbe8f7 inset, var(--bb-shadow-sm); }
.wp-card--accepted { border-color: #b6e0c7; box-shadow: 0 0 0 1px #dcefe4 inset, var(--bb-shadow-sm); }
.wp-head__ident { flex: 1; min-width: 0; }
.wp-headline { font-size: 12px; color: var(--bb-muted); }
.wp-headline .wp-when { color: var(--bb-faint); }
.wp-facts { align-items: center; }
.wp-facts__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--bb-brand);
    text-decoration: none;
    margin-inline-start: auto;
}
.wp-facts__link i { font-size: 13px; }

/* =============================================================================
   MY APPLICATIONS ADDITIONS  (.wa-*)
   ========================================================================== */
.wa-row--shortlisted { border-color: #bcd4f0; box-shadow: 0 0 0 1px #dbe8f7 inset, var(--bb-shadow-sm); }
.wa-row--rejected, .wa-row--withdrawn { opacity: .6; }
.wa-row__flag {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--bb-info);
}
.wa-row__flag i { color: #eab308; font-size: 14px; flex-shrink: 0; height: 1.5em; display: inline-flex; align-items: center; }
.wa-row__hint { margin: 6px 0 0; font-size: 11.5px; color: var(--bb-faint); }
.wa-row__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wa-row__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--bb-brand);
    text-decoration: none;
}
.wa-row__link i { font-size: 13px; }

/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .bb-portal { grid-template-columns: 1fr; margin-top: -104px; }

    /* The dark band is a desktop hero: 80px of padding above the title and
       187px below it, neither of which shrinks on a phone. Add the -100px
       pull and the first actionable thing on the page began 460px down a
       844px screen , past the halfway line, below the fold on anything
       smaller. Scoped to .bb-portal-head so the student and mentor
       dashboards, which share .breadcrumb and these same utilities, keep the
       proportions they were designed with.

       !important because the utilities it overrides carry it themselves. */
    .bb-portal-head { padding-block: 48px 140px !important; }

    /* The row is flex-wrap, the title block is flex:0 1 auto and fills the
       line, so the 44px toggle wrapped onto a second row , and landed on the
       LEFT, which is exactly where the nav panel slides in from. The panel
       then covered the button outright: tapping it hit a nav link instead.
       Letting the title shrink keeps the toggle on the title's row and on
       the opposite side from the panel, at every width. */
    .bb-portal-head__row > .breadcrumb__wrapper { flex: 1 1 0; min-width: 0; }
    .bb-portal-head__row { flex-wrap: nowrap; }
    .bb-side {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 1200;
        /* Never the full width: the toggle lives on the opposite edge and
           has to stay clear of the panel even on a 320px phone, where 78vw
           still left the two touching with a 1px gap. */
        width: min(268px, 72vw);
        border-radius: 0;
        box-shadow: 0 0 50px rgba(28, 28, 110, .28);
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform .22s ease;
    }
    /* ONLY the transform flips for RTL.
       `inset-inline-start` is already direction-aware , in RTL it resolves
       to the right edge on its own, which is the side the drawer should
       enter from. The previous rule also set `inset-inline-end: 0`, which
       mirrored it a second time and parked the drawer on the LEFT , the same
       side the toggle sits on in RTL (the header row is space-between, so
       the toggle is the last item and lands at the inline end). The drawer
       opened directly on top of the button that opened it.

       `transform` is the one property here that is NOT logical: translateX
       is always physical, so hiding a right-hand drawer off-screen needs a
       positive offset where a left-hand one needs a negative. */
    [dir="rtl"] .bb-side { transform: translateX(105%); }
    .bb-side.is-open { transform: translateX(0); }
    .ws-nav-scrim.is-open {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1150;
        background: rgba(28, 28, 110, .38);
    }
    .ws-menu-toggle { display: inline-flex; }

    .ws-nav__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* Follows the drawer's own edge: the panel enters from the start
           side, so its close button belongs on the end side, furthest from
           where the thumb that opened it came from. Mirrors automatically. */
        margin-inline-start: auto;
        margin-block-end: 4px;
        inline-size: 40px;
        block-size: 40px;
        border: 1px solid var(--bb-line);
        border-radius: 50%;
        background: var(--bb-surface);
        color: var(--bb-muted);
        font-size: 17px;
        cursor: pointer;
    }
    .ws-nav__close:hover { background: var(--bb-surface-2); color: var(--bb-ink); }
    /* The panel is a flex column so the button can push itself to the end. */
    .bb-side { display: flex; flex-direction: column; align-items: stretch; }

    /* The band is deliberately NOT raised over the scrim.
       It was, briefly, to keep the toggle clickable , and that broke the
       menu: `.bb-portal` is `position: relative; z-index: 2`, so it is its
       own stacking context and the drawer's z-index:1200 only competes
       INSIDE it. Against a lifted band the whole portal was judged at 2 and
       lost, so the hero painted straight over the open drawer. The original
       z-1 ordering (portal 2 > band 1) is the correct one and is left alone.

       The toggle therefore sits under the scrim while the menu is open ,
       the standard mobile-nav arrangement, where tapping anywhere outside
       closes. The drawer carries its own close button (.ws-nav__close) so
       there is always a visible, unobstructed way out. */

    /* Open state , the icon swaps to an X in JS, and the fill confirms the
       button is now "close" rather than "open". */
    .ws-menu-toggle.is-active {
        background: rgba(255, 255, 255, .24);
        border-color: rgba(255, 255, 255, .5);
    }
}

@media (max-width: 640px) {
    /* Tighter again on a phone: the header, the page title, the subtitle and
       the breadcrumbs are all real content , the padding around them is not. */
    .bb-portal-head { padding-block: 28px 104px !important; }
    .bb-portal { margin-top: -88px; }
}

@media (max-width: 480px) {
    /* On a 320px screen the hero title and the breadcrumb trail each wrap to
       a second line, adding ~50px of band above the fold for no extra
       information. Scaled down rather than hidden , the trail is how people
       get back out of a detail page. */
    .bb-portal-head .breadcrumb__title { font-size: 26px !important; line-height: 1.18; }
    .bb-portal-head .breadcrumb__list { gap: 2px 6px; font-size: 12px; }
    .bb-portal-head .breadcrumb__list i { font-size: 11px; }
    .bb-portal-head__sub { font-size: 13px; margin-bottom: 12px; }
}

@media (max-width: 960px) {
    .eng-grid { grid-template-columns: 1fr; }
    .eng-aside { position: static; }
    .bb-layout { grid-template-columns: 1fr; gap: 18px; }
    .bb-filters { position: static; }
    .bbs-grid { grid-template-columns: 1fr; gap: 26px; }
    .bbs-aside { position: static; }
}

@media (min-width: 961px) {
    .bb-filters__summary { display: none; }
    .bb-filters__body { display: block; }
}

@media (max-width: 720px) {
    .bbs-head { grid-template-columns: 1fr; gap: 18px; }
    .bb-closer > .container { padding-block: 44px; }
    .bb-closer__hero { flex-direction: column; text-align: center; }
    .bb-closer__face { block-size: 128px; inline-size: auto; }
    .bb-closer__body { margin-inline: auto; }
    .bb-closer__people-label { text-align: center; }
    .bb-masthead__who { flex-direction: column; align-items: flex-start; }
    .bb-masthead__who-cta { align-self: stretch; justify-content: center; }
}

@media (max-width: 640px) {
    .ws-card, .wp-card, .bf__section, .eng-sec { padding: 18px; }
    .ws-stats { grid-template-columns: 1fr; }
    .wsb-row { grid-template-columns: 1fr; }
    /* The compact variant has to be named explicitly.
       `.bb-list--compact .bb-row` (0,2,0) is declared outside any media
       query and therefore beats a bare `.bb-row` (0,1,0) in here , media
       queries add no specificity. The compact row kept its three-column
       desktop grid at every width, so on a phone the middle column was
       squeezed to a few pixels and every label wrapped one character per
       line: "P o s t e d 1 w e e k a g o". That is the shape this card
       takes inside the workspace overview's "Recommended for you". */
    .bb-row,
    .bb-list--compact .bb-row { grid-template-columns: 1fr; gap: 12px; padding: 18px; }
    .bb-list--compact .bb-row { padding: 16px 18px; }
    .bb-row__badge { inline-size: 42px; block-size: 42px; font-size: 20px; }
    .bb-row__reward {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: start;
        padding-inline-start: 0;
        padding-block-start: 14px;
        border-inline-start: 0;
        border-block-start: 1px solid var(--bb-line-soft);
    }
    .bb-row__reward-go { margin-top: 0; opacity: 1; }
    .bb-controls { flex-direction: column; align-items: stretch; }
    .bb-segmented { justify-content: space-between; }
}

@media (max-width: 560px) {
    .bb-row,
    .bb-list--compact .bb-row { grid-template-columns: 1fr; }
}

/* --- report button (bounty listing / talent profile) --- */
.report-btn { margin-top: 10px; }
.report-btn__trigger {
    display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0;
    font-size: 12.5px; font-weight: 600; color: var(--bb-muted); cursor: pointer;
}
.report-btn__trigger:hover { color: var(--bb-danger); }
.report-btn__trigger i { font-size: 14px; line-height: 1; }
.report-btn__panel {
    margin-top: 12px; padding: 16px; border: 1px solid var(--bb-line); border-radius: var(--bb-r);
    background: var(--bb-canvas); max-width: 360px;
}
.report-btn__error { font-size: 12px; font-weight: 600; color: var(--bb-danger); margin: 0 0 10px; }
.report-btn__done {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--bb-ok);
}
.report-btn__done i { font-size: 15px; }

/* --- per-message report (workspace inbox) --- */
.mt-report {
    display: inline-flex; align-items: center; background: none; border: 0; padding: 0; margin-inline-start: 8px;
    color: var(--bb-faint); cursor: pointer; vertical-align: middle;
}
.mt-report:hover { color: var(--bb-danger); }
.mt-report i { font-size: 12px; line-height: 1; }
.mt-report-form {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 6px;
    padding: 10px 12px; border: 1px solid var(--bb-line); border-radius: var(--bb-r-sm); background: var(--bb-surface-2);
}
.mt-report-form input {
    flex: 1 1 160px; min-width: 0; border: 1px solid var(--bb-line); border-radius: 8px; padding: 7px 10px; font-size: 12.5px;
}
.mt-report-form input:focus { outline: 2px solid var(--bb-brand); outline-offset: 1px; }
.mt-report-thanks { font-size: 12px; font-weight: 600; color: var(--bb-ok); margin: 4px 0 6px; }

/* --- reviews (double-blind, post-completion) --- */
.bb-star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 6px; }
.bb-star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.bb-star-input label {
    color: var(--bb-line); cursor: pointer; font-size: 28px; line-height: 1; transition: color var(--bb-ease);
}
.bb-star-input input:checked ~ label,
.bb-star-input label:hover,
.bb-star-input label:hover ~ label { color: var(--bb-coin-rim); }

.bb-stars i { font-size: 14px; line-height: 1; }
.bb-stars i.ph.ph-star { color: var(--bb-line); }
.bb-stars i.ph-fill.ph-star { color: var(--bb-coin-rim); }

.bb-rating-summary { display: inline-flex; align-items: center; gap: 8px; }
.bb-rating-summary .bb-stars i { font-size: 16px; }
.bb-rating-summary__num { font-size: 14px; font-weight: 700; color: var(--bb-ink); }
.bb-rating-summary__count { font-size: 12.5px; color: var(--bb-muted); }

.bb-review-card { padding: 16px 0; border-top: 1px solid var(--bb-line-soft); }
.bb-review-card:first-child { padding-top: 0; border-top: 0; }
.bb-review-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.bb-review-card__name { font-size: 13.5px; font-weight: 700; color: var(--bb-ink); }
.bb-review-card__body { font-size: 13.5px; color: var(--bb-body); line-height: 1.6; margin: 0 0 6px; }
.bb-review-card__date { font-size: 11.5px; color: var(--bb-faint); }

.eng-review-pending {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--bb-r);
    background: var(--bb-brand-wash); border: 1px solid var(--bb-brand-tint); color: var(--bb-brand-deep);
    font-size: 13px; font-weight: 600;
}
.eng-review-pending i { font-size: 18px; flex-shrink: 0; }
.eng-live-banner { margin-bottom: 16px; }
.eng-live-banner .ws-btn { margin-inline-start: auto; }

.eng-review-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.eng-review-pair__label { margin: 0 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bb-muted); }
@media (max-width: 560px) { .eng-review-pair { grid-template-columns: 1fr; gap: 4px; } }
@media (max-width: 860px) {
    .eng-grid { grid-template-columns: 1fr; }
}

/* --- marketing: bundle-page <x-bundle.related-bounties> widget --- */
.bb-bundle-promo .bb-list { max-width: 900px; margin-inline: auto; }
.bb-bundle-promo .bb-row { background: #fff; }

/* --- marketing: homepage Bounty Board section (full section-heading treatment,
   matches the rest of the homepage , py-120, centered eyebrow/heading/sub) --- */
.bb-home-section__list { max-width: 900px; margin: 0 auto; }
.bb-home-section__list .bb-row { background: #fff; }

.bb-home-section__props {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 980px;
    margin: 0 auto;
}
.bb-home-prop {
    padding: 28px 24px;
    border-radius: var(--bb-r-lg);
    background: #fff;
    border: 1px solid var(--bb-line-soft);
    text-align: center;
}
.bb-home-prop__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--bb-brand-wash); color: var(--bb-brand);
    font-size: 22px; margin-bottom: 16px;
}
.bb-home-prop__icon img { width: 26px; height: 26px; }
.bb-home-prop__title { font-size: 15px; font-weight: 800; color: var(--bb-ink); margin: 0 0 6px; }
.bb-home-prop__body { font-size: 13.5px; line-height: 1.6; color: var(--bb-body); margin: 0; }
@media (max-width: 860px) {
    .bb-home-section__props { grid-template-columns: 1fr; max-width: 480px; }
}

/* =============================================================================
   Finder — the search + sort bar shared by every list
   -----------------------------------------------------------------------------
   Sits directly under the fast-filter tabs, above the first section. One row on
   desktop (box grows, controls hug the trailing edge), stacked on narrow
   screens with the box full-width first, because the box is what people reach
   for. RTL comes free: everything below is logical properties, and the only
   directional value (the search icon's inset) is inset-inline-start.
   ========================================================================== */
.ws-find {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.ws-find__box {
    position: relative;
    flex: 1 1 240px;
    min-inline-size: 0;
    display: flex;
    align-items: center;
}
.ws-find__icon {
    position: absolute;
    inset-inline-start: 13px;
    font-size: 16px;
    color: var(--bb-faint);
    pointer-events: none;
    transition: color var(--bb-ease);
}
.ws-find__input {
    inline-size: 100%;
    min-height: var(--bb-control-h);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-sm);
    padding-block: 10px;
    padding-inline: 38px 38px;
    font-family: inherit;
    font-size: 14px;
    color: var(--bb-ink);
    background: var(--bb-surface);
    box-sizing: border-box;
    transition: border-color var(--bb-ease), box-shadow var(--bb-ease);
}
.ws-find__input::placeholder { color: var(--bb-faint); }
.ws-find__input:focus {
    outline: none;
    border-color: var(--bb-brand);
    box-shadow: var(--bb-focus);
}
.ws-find__box:focus-within .ws-find__icon { color: var(--bb-brand); }
/* the browser's own clear affordance would sit under ours */
.ws-find__input::-webkit-search-cancel-button { display: none; }

.ws-find__clear {
    position: absolute;
    inset-inline-end: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 28px;
    block-size: 28px;
    border-radius: 50%;
    color: var(--bb-muted);
    text-decoration: none;
    transition: background var(--bb-ease), color var(--bb-ease);
}
.ws-find__clear:hover { background: var(--bb-brand-tint); color: var(--bb-brand); }
.ws-find__clear i { font-size: 13px; }

.ws-find__sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bb-muted);
    white-space: nowrap;
}
.ws-find__sort-label { flex-shrink: 0; }
.ws-find__sort .bb-select { inline-size: auto; min-height: var(--bb-control-h); font-size: 13px; padding-block: 9px; }

/* A page-specific filter dropped into the slot , same metrics as the sort. */
.ws-find__filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bb-muted);
    white-space: nowrap;
}
.ws-find__filter .bb-select { inline-size: auto; min-height: var(--bb-control-h); font-size: 13px; padding-block: 9px; }

.ws-find__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: var(--bb-control-h);
    padding: 10px 16px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-sm);
    background: var(--bb-surface);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--bb-ink);
    cursor: pointer;
    transition: background var(--bb-ease), border-color var(--bb-ease), color var(--bb-ease);
}
.ws-find__go:hover { border-color: var(--bb-brand); color: var(--bb-brand); background: var(--bb-brand-wash); }
.ws-find__go i { font-size: 15px; }
/* With a sort control present the button is a no-JS fallback, so it steps back
   to an icon rather than taking width from the box on every screen. */
.ws-find__sort ~ .ws-find__go span { display: none; }
.ws-find__sort ~ .ws-find__go { padding-inline: 13px; }

/* The result line owns the whole second row , it is a sentence, not a chip. */
.ws-find__count {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 2px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bb-muted);
    padding: 8px 14px;
    border-radius: 999px;
    text-decoration: none;
    background: var(--bb-surface);
    border: 1px solid var(--bb-line);
    transition: all var(--bb-ease);
}
.ws-find__narrowed {
    display: flex;
    flex: 1 0 100%;
}

.ws-find__count i { font-size: 15px; color: var(--bb-faint); }
.ws-find__count a { color: var(--bb-brand); font-weight: 700; text-decoration: none; }
.ws-find__count a:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .ws-find__box { flex-basis: 100%; }
    .ws-find__sort, .ws-find__filter { flex: 1 1 auto; justify-content: space-between; }
    .ws-find__sort .bb-select, .ws-find__filter .bb-select { inline-size: 100%; }
    .ws-find__sort ~ .ws-find__go span { display: inline; }
    .ws-find__sort ~ .ws-find__go { flex: 1 1 100%; padding-inline: 16px; }
}

/* Applicant card: the person's own signals, sitting on the name line. */
.wp-name .wp-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-inline-start: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--bb-coin-bg);
    border: 1px solid var(--bb-coin-line);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--bb-coin-ink);
    vertical-align: middle;
    unicode-bidi: isolate;
}
.wp-name .wp-rating i { font-size: 12px; color: var(--bb-coin-rim); }
.wp-name .wp-rating small { font-weight: 600; font-size: 10.5px; color: var(--bb-muted); }

/* Message inbox: live filter over the thread column. Sits between the list
   head and the threads, inside the same panel, so it scrolls with neither. */
.wm-search {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-block-end: 1px solid var(--bb-line-soft);
}
.wm-search > i {
    position: absolute;
    inset-inline-start: 24px;
    font-size: 15px;
    color: var(--bb-faint);
    pointer-events: none;
}
.wm-search__input {
    inline-size: 100%;
    min-height: 38px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-sm);
    padding-block: 8px;
    padding-inline: 34px 34px;
    font-family: inherit;
    font-size: 13px;
    color: var(--bb-ink);
    background: var(--bb-surface);
    box-sizing: border-box;
}
.wm-search__input:focus { outline: none; border-color: var(--bb-brand); box-shadow: var(--bb-focus); }
.wm-search__input::-webkit-search-cancel-button { display: none; }
.wm-search__clear {
    position: absolute;
    inset-inline-end: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 24px;
    block-size: 24px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bb-muted);
    cursor: pointer;
}
.wm-search__clear:hover { background: var(--bb-brand-tint); color: var(--bb-brand); }
.wm-search__clear i { font-size: 12px; }
.wm-threads__none { margin: 0; padding: 22px 16px; font-size: 12.5px; font-weight: 600; color: var(--bb-muted); text-align: center; }

/* =============================================================================
   Payment ledger — the member's own record of every sum that moved
   -----------------------------------------------------------------------------
   Three units run through this page (MonsterCoin, money to the platform, money
   between members) and they are never summed, so the summary is three tiles
   rather than one headline figure. In the list the amount owns the trailing
   edge: it is the thing being scanned for, and it carries its own sign and
   unit because a bare number across three units cannot be read.
   All logical properties, so RTL needs no overrides.
   ========================================================================== */
.wl-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.wl-tile {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px 18px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-lg);
    background: var(--bb-surface);
    box-shadow: var(--bb-shadow-sm);
}
.wl-tile--coin { background: linear-gradient(180deg, var(--bb-coin-bg), var(--bb-surface) 62%); border-color: var(--bb-coin-line); }
.wl-tile__label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bb-muted);
}
.wl-tile__label i { font-size: 15px; }
.wl-tile__big {
    margin: 0;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--bb-ink);
    unicode-bidi: isolate;
}
.wl-tile__pair { display: flex; flex-wrap: wrap; gap: 18px; }
.wl-fig { display: inline-flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.wl-fig__num { font-size: 18px; font-weight: 800; letter-spacing: -.02em; unicode-bidi: isolate; }
.wl-fig--in .wl-fig__num { color: var(--bb-ok); }
.wl-fig--out .wl-fig__num { color: var(--bb-body); }
.wl-fig__cap { font-size: 11px; font-weight: 700; color: var(--bb-muted); }
.wl-tile__note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--bb-muted);
}
.wl-tile__note i { flex-shrink: 0; margin-block-start: 1px; font-size: 13px; color: var(--bb-faint); }
/* A real explanatory sentence, so it gets readable ink rather than the
   faint token used for decorative separators. */
.wl-tile__note small { display: block; margin-block-start: 2px; color: var(--bb-muted); font-size: 11px; }
.wl-tile__note--held { color: var(--bb-coin-ink); }
.wl-tile__note--held i { color: var(--bb-coin-rim); }
.wl-tile__note--pending { color: var(--bb-warn); font-weight: 700; }
.wl-tile__note--pending i { color: var(--bb-warn); }

/* --- one movement --- */
.wl-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) max-content;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r);
    background: var(--bb-surface);
    text-decoration: none;
    transition: border-color var(--bb-ease), box-shadow var(--bb-ease);
}
.wl-row + .wl-row { margin-block-start: 8px; }
a.wl-row:hover { border-color: var(--bb-brand); box-shadow: var(--bb-shadow-sm); }
.wl-row.is-unsettled { border-style: dashed; }
.wl-row.is-rejected { opacity: .68; }

.wl-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 38px;
    block-size: 38px;
    border-radius: 11px;
    background: var(--bb-surface-2);
    color: var(--bb-muted);
    font-size: 17px;
}
.wl-row--in .wl-row__icon { background: var(--bb-ok-bg); color: var(--bb-ok); }

.wl-row__main { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.wl-row__kind { font-size: 13.5px; font-weight: 800; color: var(--bb-ink); letter-spacing: -.01em; }
.wl-row__title {
    font-size: 12.5px;
    color: var(--bb-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wl-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--bb-muted);
}
.wl-row__dot { color: var(--bb-faint); }
.wl-row__ref { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.wl-row__note {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-block-start: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--bb-warn);
}
.wl-row.is-rejected .wl-row__note { color: var(--bb-danger); }
.wl-row__note i { font-size: 13px; }

.wl-row__amount { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: end; }
.wl-amt {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.02em;
    white-space: nowrap;
    unicode-bidi: isolate;
}
.wl-amt--in { color: var(--bb-ok); }
.wl-amt--out { color: var(--bb-ink); }
.wl-amt__sign { font-size: 14px; opacity: .8; }
.wl-amt__cur { margin-inline-start: 4px; font-size: 11px; font-weight: 700; color: var(--bb-muted); }
/* Only the states worth reading are rendered (see _row.blade.php), and each
   colour below clears AA 4.5:1 on the card surface. */
.wl-row__status { font-size: 11px; font-weight: 700; }
.wl-row__status--pending, .wl-row__status--awaiting { color: var(--bb-warn); }
.wl-row__status--rejected { color: var(--bb-danger); }
.wl-row__status--approved, .wl-row__status--confirmed { color: var(--bb-ok); }

/* Narrow: the amount drops under the description rather than squeezing the
   title to nothing, and keeps the trailing edge it is scanned along. */
@media (max-width: 560px) {
    .wl-row { grid-template-columns: 38px minmax(0, 1fr); }
    .wl-row__amount {
        grid-column: 2;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        inline-size: 100%;
        margin-block-start: 4px;
    }
    .wl-row__title { white-space: normal; }
}

/* Client-side upload rejections (files past the real size ceiling). Sits above
   the accepted-file list so the reason a file is missing is next to the list it
   is missing from. */
.bb-upload__errs { list-style: none; margin: 10px 0 0; padding: 0; }
.bb-upload__errs .bb-err { display: block; margin-top: 4px; }

/* --- convert credits (membership) --------------------------------------
   Sits under the balances it changes. Every state PlanGate could refuse is
   shown here instead: the cap line, the bounded amount, and the rounding
   shortfall a ratio below 1 would otherwise swallow silently. */
.wm-conv__cap {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 14px;
    font-size: 12.5px; font-weight: 600;
    color: var(--bb-muted);
}
.wm-conv__cap i { font-size: 15px; color: var(--bb-brand); }
.wm-conv__cap.is-spent { color: var(--bb-warn); }
.wm-conv__cap.is-spent i { color: var(--bb-warn); }

/* Direction , one row: source, swap, destination. Replaces the pair of pill
   toggles. There is no shared icon-button component in this codebase to reuse
   (.bb-upload__remove is the only icon-only button and it is sized and
   coloured for removal), so this is built from the panel's own tokens. */
.wm-conv__swaprow {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; flex-wrap: nowrap;
    padding: 14px 12px; margin-bottom: 18px;
    border: 1px solid var(--bb-line); border-radius: var(--bb-r-sm);
    background: var(--bb-surface-2);
}
/* Both labels share what is left after the swap button and wrap inside
   themselves. Letting the row wrap instead put the destination on its own
   line, which stops reading as one direction. */
.wm-conv__kind {
    flex: 1 1 0; min-inline-size: 0;
    font-size: 13px; font-weight: 700; color: var(--bb-ink);
    text-align: center; line-height: 1.35;
}
.wm-conv__swap {
    flex-shrink: 0; inline-size: 40px; block-size: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--bb-line); border-radius: 50%;
    background: var(--bb-surface); color: var(--bb-brand); cursor: pointer;
    transition: background var(--bb-ease), border-color var(--bb-ease), transform var(--bb-ease);
}
.wm-conv__swap i { font-size: 16px; }
.wm-conv__swap:hover { background: var(--bb-brand-tint); border-color: var(--bb-brand); }
.wm-conv__swap:active { transform: rotate(180deg); }
.wm-conv__swap:focus-visible { outline: 2px solid var(--bb-brand); outline-offset: 2px; }
/* One-way plan , same slot, plainly not a control. */
.wm-conv__swap.is-static { background: transparent; border-color: transparent; color: var(--bb-faint); cursor: default; }

.wm-conv__field { min-inline-size: 0; }
.wm-conv__field label {
    display: block; margin-bottom: 6px;
    font-size: 12px; font-weight: 700; color: var(--bb-ink);
}
/* Availability sits on the label row, right-aligned and muted. */
.wm-conv__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wm-conv__avail { font-size: 11.5px; font-weight: 500; color: var(--bb-muted); white-space: nowrap; }

/* Input + Max, joined so they read as one control. */
.wm-conv__amount { display: flex; align-items: stretch; gap: 8px; }
.wm-conv__amount input { flex: 1 1 auto; min-inline-size: 0; }
.wm-conv__max {
    flex-shrink: 0; min-block-size: var(--bb-control-h); padding-inline: 16px;
    border: 1px solid var(--bb-line); border-radius: var(--bb-r-sm);
    background: var(--bb-surface); color: var(--bb-brand);
    font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
    transition: background var(--bb-ease), border-color var(--bb-ease);
}
.wm-conv__max:hover:not(:disabled) { background: var(--bb-brand-tint); border-color: var(--bb-brand); }
.wm-conv__max:focus-visible { outline: 2px solid var(--bb-brand); outline-offset: 2px; }
.wm-conv__max:disabled { opacity: .5; cursor: not-allowed; }

.wm-conv__err { margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--bb-danger); }
.wm-conv__field input {
    inline-size: 100%; min-block-size: var(--bb-control-h);
    border: 1px solid var(--bb-line); border-radius: var(--bb-r-sm);
    padding: 10px 13px; font-family: inherit; font-size: 14px; color: var(--bb-ink);
    background: var(--bb-surface); box-sizing: border-box;
}
.wm-conv__field input:focus { outline: none; border-color: var(--bb-brand); box-shadow: var(--bb-focus); }
.wm-conv__field input:disabled { background: var(--bb-surface-2); color: var(--bb-faint); cursor: not-allowed; }

/* What you get, in words, immediately above the button that does it. */
.wm-conv__result { margin: 16px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--bb-muted); }
.wm-conv__result strong { color: var(--bb-ink); font-weight: 800; }

.wm-conv__waste, .wm-conv__empty {
    display: flex; align-items: center; gap: 7px;
    margin: 12px 0 0; font-size: 12.5px; font-weight: 600;
}
.wm-conv__waste { color: var(--bb-warn); }
.wm-conv__empty { color: var(--bb-muted); }
.wm-conv__empty i { font-size: 15px; }

.wm-conv__form > .ws-btn { margin-top: 16px; }
.wm-conv__form > .bb-err { margin-top: 12px; }

@media (max-width: 560px) {
    .wm-conv__form > .ws-btn { inline-size: 100%; justify-content: center; }
}

/* --- membership: plan + convert side by side ---------------------------
   The plan card keeps its own max-width, so the column simply caps at the
   same number and the card renders exactly as it did on its own row. The
   convert panel takes the width that was previously empty beside it. */
.wm-top { display: grid; gap: 20px; align-items: start; }
.wm-top--split { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); }
.wm-top > .wm-conv { margin-top: 0; }

/* One column before the convert column gets too narrow for its swap row.
   The plan column is a fixed 480 and the page container caps at 1600, so the
   convert column is roughly (viewport - 296) - 500. Its swap row needs about
   380px to keep source, button and destination on one line, which puts the
   threshold just under 1200. */
@media (max-width: 1200px) {
    .wm-top--split { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
   Bounty share panel  (.bsh-*)  —  components/bounty-share-panel.blade.php
   -----------------------------------------------------------------------------
   Appears on the public listing page, the My Bounties rows and the applicants
   empty state, so it borrows the module's own tokens rather than carrying a
   second palette. Behaviour lives in public/js/bounty-share.js.
   ========================================================================== */

.bsh-trigger { gap: 8px; }
.bsh-trigger--block { inline-size: 100%; justify-content: center; }

/* A <dialog> opened with showModal(), so everything below is also a reset of
   the UA's own dialog box (auto margins, a border, a padded box sized to its
   content, max-width/height of the viewport minus its margins).

   The top layer is what makes this element paint above the page at all , see
   the note in components/bounty-share-panel.blade.php. z-index is kept only
   for the no-showModal fallback path, where it is a plain fixed overlay
   again. */
.bsh-overlay {
    position: fixed; inset: 0; z-index: 1060;
    inline-size: 100%; block-size: 100%;
    max-inline-size: 100%; max-block-size: 100%;
    margin: 0;
    border: 0;
    background: rgba(23, 21, 58, 0.62);
    color: inherit;
    overflow: hidden;
    display: none;
    align-items: center; justify-content: center;
    padding: 24px;
    /* This panel is dropped into centred containers (.bb-empty, the public
       page's aside). text-align inherits straight through every element
       here that doesn't set its own, including into the embedded preview
       card. dir is set on this element, so `start` resolves per locale. */
    text-align: start;
}
/* [open] is set by showModal(); .is-open is the fallback path's equivalent. */
.bsh-overlay[open],
.bsh-overlay.is-open { display: flex; }
.bsh-overlay[hidden] { display: none; }
/* The dialog paints its own full-viewport scrim, so the real backdrop would
   only double the darkening. */
.bsh-overlay::backdrop { background: transparent; }

.bsh-modal {
    inline-size: 620px; max-inline-size: 100%;
    max-block-size: 92vh;
    display: flex; flex-direction: column;
    background: var(--bb-surface);
    border-radius: var(--bb-r-xl);
    box-shadow: 0 32px 64px -28px rgba(23, 21, 58, 0.42);
    overflow: hidden;
}

/* ── head ───────────────────────────────────────────────────────────────── */
.bsh-modal__head {
    flex: none;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 22px 24px 18px;
    border-block-end: 1px solid var(--bb-line);
}
.bsh-modal__title { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--bb-ink); }
.bsh-modal__sub { margin: 5px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--bb-muted); }
.bsh-modal__close {
    flex: none;
    inline-size: 36px; block-size: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--bb-line); border-radius: 50%;
    background: var(--bb-surface); color: var(--bb-muted);
    cursor: pointer; transition: background .15s ease, color .15s ease;
}
.bsh-modal__close:hover { background: var(--bb-surface-2); color: var(--bb-ink); }

/* ── body ───────────────────────────────────────────────────────────────── */
.bsh-modal__body { flex: 1 1 auto; overflow-y: auto; padding: 20px 24px 4px; }

.bsh-block { margin-block-end: 22px; }
.bsh-block__label {
    display: flex; align-items: center; gap: 9px;
    margin: 0 0 10px;
    font-size: 0.8125rem; font-weight: 700; color: var(--bb-ink);
}
.bsh-block__label label { cursor: pointer; }
.bsh-step {
    flex: none;
    inline-size: 20px; block-size: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--bb-brand-tint); color: var(--bb-brand);
    font-size: 0.6875rem; font-weight: 800;
}

.bsh-hint { margin: 8px 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--bb-muted); }
.bsh-hint--flush { margin: 0; }

/* ── the shrunk preview ─────────────────────────────────────────────────── */
.bsh-preview {
    /* Capped, not full width. At the modal's full 572px the preview pushed
       "Post it" , the one action this dialog exists to produce , below the
       scroll fold, so the first thing the user saw was a picture and the
       thing they came to press was hidden. It only has to be recognisable,
       not readable: the card carries four facts in type that survives this
       reduction. */
    inline-size: min(100%, 430px);
    margin-inline: auto;
    aspect-ratio: 1200 / 630;
    overflow: hidden;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r);
    background: #16143a;
    /* The preview width is fluid (the modal caps at 620px but shrinks with
       the viewport) while the card inside is a hard 1200px, so the shrink
       factor has to track the container instead of being a fixed number.
       This declares the container the `cqi` below resolves against , it has
       to sit on the parent, since the scaled element cannot query itself. */
    container-type: inline-size;
}
.bsh-preview__scale {
    inline-size: 1200px; block-size: 630px;
    transform-origin: top left;
    /* Two declarations on purpose. The first is the desktop-accurate fixed
       factor (the modal caps at 620px, less 24px of body padding each side,
       so the preview is 572 of the card's 1200). The second overrides it
       with the real fluid factor and is simply dropped by any engine
       without container queries, leaving the fixed one standing.

       The divisor must carry a unit: length / length resolves to the
       <number> scale() wants, whereas dividing by a bare 1200 yields a
       length and the whole declaration is discarded at parse time , which
       is silent, and shows up only as a card rendering at full 1200px and
       overflowing its viewport. */
    transform: scale(0.3583);
    transform: scale(calc(100cqi / 1200px));
}

/* ── the post box ───────────────────────────────────────────────────────── */
.bsh-caption {
    inline-size: 100%;
    /* Height comes from here, not the rows attribute, so the short-viewport
       media query below can shrink it , `rows` is an attribute and a media
       query cannot touch it. */
    --bsh-rows: 6;
    block-size: calc(var(--bsh-rows) * 1.65em + 28px);
    padding: 13px 15px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r);
    background: var(--bb-surface-2);
    color: var(--bb-body);
    font: inherit; font-size: 0.875rem; line-height: 1.65;
    resize: vertical;
    white-space: pre-wrap;
}
.bsh-caption:focus-visible {
    outline: 2px solid var(--bb-brand);
    outline-offset: 1px;
    background: var(--bb-surface);
}
.bsh-caption__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-block-start: 8px;
}
.bsh-linkbtn {
    flex: none;
    display: inline-flex; align-items: center; gap: 6px;
    border: 0; background: none; padding: 4px 2px;
    color: var(--bb-brand); font-size: 0.75rem; font-weight: 600;
    cursor: pointer;
}
.bsh-linkbtn:hover { text-decoration: underline; }

/* ── publish ────────────────────────────────────────────────────────────── */
.bsh-linkedin {
    inline-size: 100%;
    min-block-size: 46px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    border: 0; border-radius: var(--bb-r);
    background: #0a66c2; color: #fff;
    font-size: 0.9375rem; font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.bsh-linkedin:hover { background: #08538f; }
.bsh-linkedin:active { transform: translateY(1px); }
.bsh-linkedin i { font-size: 1.25rem; }

.bsh-say {
    margin: 9px 0 0;
    font-size: 0.78125rem; font-weight: 600; line-height: 1.5;
    /* Reserves its line so a message appearing doesn't shove the social row
       down under the cursor that is about to click it. */
    min-block-size: 1.2em;
}
.bsh-say--ok { color: var(--bb-ok); }
.bsh-say--warn { color: var(--bb-danger); }

.bsh-socials {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
    margin-block-start: 12px;
}
.bsh-social {
    min-block-size: 44px;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 0 6px;
    border: 1px solid var(--bb-line); border-radius: var(--bb-r-sm);
    background: var(--bb-surface);
    color: var(--bb-body); font-size: 0.8125rem; font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.bsh-social i { font-size: 1.0625rem; }
.bsh-social:hover { background: var(--bb-surface-2); text-decoration: none; }
.bsh-social--x:hover  { border-color: #111; color: #111; }
.bsh-social--wa:hover { border-color: #1da851; color: #1da851; }
.bsh-social--fb:hover { border-color: #1877f2; color: #1877f2; }
.bsh-social--tg:hover { border-color: #229ed9; color: #229ed9; }

/* ── foot ───────────────────────────────────────────────────────────────── */
.bsh-modal__foot {
    flex: none;
    display: flex; align-items: center; gap: 10px;
    padding: 14px 24px;
    border-block-start: 1px solid var(--bb-line);
    background: var(--bb-surface-2);
}
.bsh-linkrow {
    flex: 1 1 auto; min-inline-size: 0;
    display: flex; align-items: center; gap: 8px;
    padding: 5px 5px 5px 13px;
    border: 1px solid var(--bb-line); border-radius: 999px;
    background: var(--bb-surface);
}
.bsh-linkrow__url {
    flex: 1 1 auto; min-inline-size: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.78125rem; color: var(--bb-muted);
}
.bsh-linkrow__btn {
    flex: none;
    min-block-size: 32px; padding: 0 14px;
    border: 0; border-radius: 999px;
    background: var(--bb-brand); color: #fff;
    font-size: 0.78125rem; font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}
.bsh-linkrow__btn:hover { background: var(--bb-brand-strong); }
.bsh-linkrow__btn.is-done { background: var(--bb-ok); }
.bsh-ghostbtn {
    flex: none;
    min-block-size: 40px; padding: 0 15px;
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--bb-line); border-radius: var(--bb-r-sm);
    background: var(--bb-surface); color: var(--bb-body);
    font-size: 0.8125rem; font-weight: 600;
    cursor: pointer;
}
.bsh-ghostbtn:hover:not(:disabled) { background: var(--bb-surface-2); border-color: var(--bb-faint); }
.bsh-ghostbtn:disabled { opacity: .55; cursor: progress; }

/* ── the standing "share it" nudge ──────────────────────────────────────── */
.bsh-nudge {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-block-end: 16px;
    padding: 15px 18px;
    border: 1px solid var(--bb-brand-tint);
    border-inline-start: 3px solid var(--bb-brand);
    border-radius: var(--bb-r);
    background: var(--bb-brand-wash);
}
.bsh-nudge__icon {
    flex: none;
    inline-size: 38px; block-size: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--bb-brand); color: #fff; font-size: 1.125rem;
}
.bsh-nudge__text { flex: 1 1 240px; min-inline-size: 0; }
.bsh-nudge__title { margin: 0; font-size: 0.875rem; font-weight: 700; color: var(--bb-ink); }
.bsh-nudge__body { margin: 3px 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--bb-body); }
.bsh-nudge > .bsh-trigger { flex: none; }

@media (max-width: 620px) {
    .bsh-overlay { padding: 0; align-items: stretch; }
    .bsh-modal { inline-size: 100%; max-block-size: 100vh; border-radius: 0; }
    .bsh-socials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bsh-modal__foot { flex-wrap: wrap; }
    .bsh-linkrow { flex-basis: 100%; }
    .bsh-ghostbtn { inline-size: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .bsh-linkedin, .bsh-social, .bsh-modal__close, .bsh-linkrow__btn { transition: none; }
    .bsh-linkedin:active { transform: none; }
}

/* Two equal ways out of an empty pipeline (share / browse talent) on one
   row. .bb-empty__cta stays as-is for the single-CTA empties. */
.bb-empty__ctas {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    margin-block-start: 18px;
}

/* The share block on the public listing page, under the apply/manage card. */
.bbs-share { margin-block-start: 14px; }
.bbs-share__note {
    margin: 9px 2px 0;
    font-size: 12px; line-height: 1.55; color: var(--bb-muted);
}

/* Short viewports (a 1366x768 or 1440x900 laptop, or any phone in landscape).
   The modal caps at 92vh and its body scrolls, which works , but it put the
   LinkedIn button and the platform row below that fold, so the action the
   dialog exists to produce was the part you had to go looking for. The
   preview is what gives way: it only has to be recognisable, and it is the
   one element here that is purely informational. */
@media (max-height: 900px) {
    .bsh-preview { inline-size: min(100%, 280px); }
    .bsh-preview__scale {
        transform: scale(0.25);
        transform: scale(calc(100cqi / 1200px));
    }
    .bsh-modal__body { padding-block-start: 14px; }
    .bsh-block { margin-block-end: 14px; }
    .bsh-caption { --bsh-rows: 5; }
    .bsh-modal__head { padding-block: 18px 14px; }
}

/* =============================================================================
   Workspace controls  —  mobile organisation
   -----------------------------------------------------------------------------
   Not broken at these widths, but not usable either. Measured on a 390px
   screen before this block:

     .wsb-tabs         80px tall  , six pills wrapped into two ragged rows
     .bb-toolbar      128px tall  , tabs + the post CTA stacked
     .wsb-row__actions 80px tall  , buttons of 118 / 63 / 192 / 44px wrapping
                                    arbitrarily, which put the DESTRUCTIVE
                                    "Close" on the first line, beside the
                                    applicant count, while the primary action
                                    ("Share & get candidates") fell to the
                                    second. Wrap order is layout accident, not
                                    priority, and on a phone it read as one
                                    undifferentiated pile of buttons.

   Desktop is untouched: everything here is inside a mobile media query.
   ========================================================================== */
@media (max-width: 640px) {
    /* One swipeable line instead of two ragged ones. A filter strip is a
       single axis of choice , wrapping it into a block makes it read as a
       grid of unrelated buttons and costs 40px of vertical space above the
       content people came for. */
    .wsb-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        /* Lets the strip bleed to the screen edges so it reads as scrollable
           rather than as a clipped box, while its items keep the gutter. */
        margin-inline: -18px;
        padding-inline: 18px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .wsb-tabs::-webkit-scrollbar { display: none; }
    .wsb-tab { flex: none; scroll-snap-align: start; }

    .bb-toolbar { flex-wrap: wrap; gap: 10px; }
    /* The post CTA is the page's primary action , full width and on its own
       line beats being squeezed beside a scrolling strip. */
    .bb-toolbar > :not(.wsb-tabs) { flex: 1 1 100%; }
    .bb-toolbar > :not(.wsb-tabs) > .ws-btn { inline-size: 100%; justify-content: center; }

    /* Row actions: an explicit order instead of whatever wrapping produces.
       Primary first and full width, secondary actions sharing a row beneath,
       destructive last , so the most dangerous control is never the most
       prominent one, which is exactly what wrap order was doing. */
    .wsb-row__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        inline-size: 100%;
    }
    .wsb-row__actions > * { min-inline-size: 0; }
    .wsb-row__actions > .ws-btn,
    .wsb-row__actions > form > .ws-btn,
    .wsb-row__actions > .bsh-trigger { inline-size: 100%; justify-content: center; }
    /* Priority is set with `order`, not by pinning cells.
       Pinning the destructive button to a column left a hole in the grid and
       still placed it ABOVE the primary action, because auto-placement fills
       around fixed cells. `order` sorts the whole set first and lets
       auto-placement run left-to-right with no gaps, so the sequence is
       always: what the row is for, then how to act on it, then the way to
       end it. */
    .wsb-row__actions > * { order: 5; }

    /* What the row is for , the pipeline, and the primary CTA. Full width. */
    .wsb-row__actions > .wsb-row__cand { order: 1; grid-column: 1 / -1; }
    .wsb-row__actions > .ws-btn--primary,
    .wsb-row__actions > .bsh-trigger.ws-btn--primary,
    .wsb-row__actions > form:has(.ws-btn--primary) { order: 2; grid-column: 1 / -1; }

    /* Destructive last, always , never the first thing a thumb meets, and
       never wider than the actions it sits beside. */
    .wsb-row__actions > form:has(.ws-btn--danger) { order: 9; }

    /* 44px is the iOS touch minimum; these sit at 36-37 otherwise. Applied
       to every real control on a workspace page, not just the ones inside a
       row , a 36px pill is as awkward to hit in a filter strip or an empty
       state as it is in a card. */
    .bb-main .ws-btn,
    .bb-empty__cta,
    .bb-empty__ctas .ws-btn,
    .wsb-tab { min-block-size: 44px; }
    /* The pills centre their own label once they are taller than it. */
    .wsb-tab { display: inline-flex; align-items: center; }

    /* The finder is flex-wrap, and at this width the search box alone claims
       the line , so the sort and the Search button each wrapped onto one of
       their own: three stacked rows of chrome before any content. A grid
       pairs the box with its own submit and gives the sort (and any
       page-specific filter in the slot) a full-width row beneath.

       The Search button stays: it is the no-JS submit path the component was
       deliberately built around, so it gets laid out properly rather than
       hidden. */
    .ws-find {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
    }
    /* `order` again, and for the same reason as the row actions: the Search
       button sits AFTER the sort in the DOM, so auto-placement put the
       full-width sort between them and pushed the button onto a third row
       (leaving column 2 collapsed to 0px). Grid places items in
       order-modified document order, so this pairs the box with its submit
       and drops everything else below. */
    .ws-find__box { order: 1; }
    .ws-find__go { order: 2; }
    .ws-find > *:not(.ws-find__box):not(.ws-find__go) { order: 3; grid-column: 1 / -1; }
    .ws-find__sort,
    .ws-find__sort .bb-select { inline-size: 100%; }
    .ws-find__input,
    .ws-find__go,
    .ws-find .bb-select { min-block-size: 44px; }

    /* The whole actions block spans the row rather than hugging one side. */
    .wsb-row { grid-template-columns: minmax(0, 1fr); }
    .wsb-row__actions { justify-self: stretch; }
}

/* =============================================================================
   Freelancing doorway  (.hd-*)  —  pages/hire.blade.php  (/hire, /get-hired)
   -----------------------------------------------------------------------------
   Visual first. The boldness is spent in two places , the hero stage (mascot,
   floating real cards, the gold 0% sticker) and the deep-indigo 0% band ,
   and everything around them stays quiet. Brand tokens are the board's own
   (--bb-*); the only additions are the coin gold and a few gradients.
   Logical properties throughout, so the Arabic door mirrors on its own.
   ========================================================================== */

.hd-page {
    --hd-gold: #efc15a;
    --hd-gold-deep: #d99a2b;
    --hd-violet: #7070ff;
    --hd-radius: 24px;
    --hd-spring: cubic-bezier(.2, .8, .2, 1);
    background: var(--bb-surface);
    color: var(--bb-body);
    overflow-x: clip;
}

.hd-sr {
    position: absolute; inline-size: 1px; block-size: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Buttons & links ──────────────────────────────────────────────────── */
.hd-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-block-size: 50px; padding-inline: 24px;
    border: 2px solid transparent; border-radius: 999px;
    font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--hd-spring), box-shadow .2s;
}
.hd-btn:focus-visible { outline: 3px solid var(--bb-brand); outline-offset: 3px; }
.hd-btn--primary { background: var(--bb-brand); color: #fff; box-shadow: 0 12px 24px -12px rgba(66, 66, 214, .9); }
.hd-btn--primary:hover { background: var(--bb-brand-strong); color: #fff; transform: translateY(-1px); }
.hd-btn--light { background: #fff; color: var(--bb-brand-deep); }
.hd-btn--light:hover { background: var(--hd-gold); color: var(--bb-brand-deep); transform: translateY(-1px); }
.hd-btn--outline-light { border-color: rgba(255, 255, 255, .55); color: #fff; }
.hd-btn--outline-light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.hd-cta .hd-btn:focus-visible { outline-color: #fff; }

.hd-link {
    display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px;
    font-size: 15px; font-weight: 700; color: var(--bb-brand); text-decoration: none;
}
.hd-link:hover { color: var(--bb-brand-strong); text-decoration: underline; text-underline-offset: 4px; }
.hd-link:focus-visible { outline: 2px solid var(--bb-brand); outline-offset: 2px; border-radius: 6px; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hd-hero {
    position: relative; isolation: isolate; overflow: hidden;
    padding-block: 56px 72px;
    background:
        radial-gradient(55% 70% at 82% 38%, rgba(112, 112, 255, .22), transparent 70%),
        radial-gradient(40% 50% at 4% 96%, rgba(66, 66, 214, .10), transparent 70%),
        linear-gradient(180deg, #f3f2ff 0%, #fbfbff 100%);
}
[dir="rtl"] .hd-hero {
    background:
        radial-gradient(55% 70% at 18% 38%, rgba(112, 112, 255, .22), transparent 70%),
        radial-gradient(40% 50% at 96% 96%, rgba(66, 66, 214, .10), transparent 70%),
        linear-gradient(180deg, #f3f2ff 0%, #fbfbff 100%);
}
.hd-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image: radial-gradient(rgba(28, 28, 110, .09) 1px, transparent 1.3px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%);
    mask-image: linear-gradient(180deg, #000, transparent 80%);
}
.hd-hero__grid {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 40px; align-items: center;
}
.hd-hero__copy { min-inline-size: 0; }

.hd-switch {
    display: inline-flex; gap: 4px; padding: 4px;
    border: 1px solid var(--bb-line); border-radius: 999px;
    background: #fff; box-shadow: var(--bb-shadow);
}
.hd-switch__door {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-block-size: 42px; padding-inline: 18px; border-radius: 999px;
    font-size: 14px; font-weight: 700; color: var(--bb-muted); text-decoration: none;
    transition: background-color .2s, color .2s;
}
.hd-switch__door i { font-size: 17px; }
.hd-switch__door:hover { color: var(--bb-brand); }
.hd-switch__door.is-current { background: var(--bb-brand); color: #fff; box-shadow: 0 8px 18px -10px rgba(66, 66, 214, .9); }
.hd-switch__door:focus-visible { outline: 2px solid var(--bb-brand); outline-offset: 2px; }

.hd-hero__title {
    margin: 24px 0 0;
    font-size: clamp(36px, 5.2vw, 60px); line-height: 1.04; font-weight: 800; letter-spacing: -.03em;
    color: var(--bb-brand-deep); text-wrap: balance;
}
[dir="rtl"] .hd-hero__title { letter-spacing: 0; line-height: 1.25; }
.hd-hero__sub { margin-block-start: 16px; max-inline-size: 44ch; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: var(--bb-body); }
.hd-hero__sub p { margin: 0; }

.hd-search {
    display: flex; align-items: center; gap: 8px;
    max-inline-size: 580px; margin-block-start: 30px;
    padding: 6px; padding-inline-start: 20px;
    border: 1px solid var(--bb-line); border-radius: 999px;
    background: #fff; box-shadow: var(--bb-shadow-lg);
    transition: border-color .2s, box-shadow .2s;
}
.hd-search:focus-within { border-color: var(--bb-brand); box-shadow: var(--bb-shadow-lg), var(--bb-focus); }
.hd-search__icon { flex: none; font-size: 21px; color: var(--bb-muted); }
.hd-search__input {
    flex: 1 1 auto; min-inline-size: 0; min-block-size: 48px;
    padding: 0; border: 0; background: transparent; box-shadow: none; outline: none;
    font-size: 16px; color: var(--bb-ink);
}
.hd-search__input::placeholder { color: var(--bb-faint); }
.hd-search__input::-webkit-search-cancel-button { display: none; }
.hd-search__go { flex: none; min-block-size: 48px; }

.hd-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-inline-size: 620px; margin-block-start: 16px; }
.hd-chips__label { margin-inline-end: 4px; font-size: 13px; font-weight: 600; color: var(--bb-muted); }
.hd-chip {
    display: inline-flex; align-items: center; min-block-size: 36px; padding-inline: 14px;
    border: 1px solid var(--bb-line); border-radius: 999px; background: #fff;
    font-size: 13px; font-weight: 600; color: var(--bb-brand-deep); text-decoration: none;
    transition: border-color .2s, color .2s;
}
.hd-chip:hover { border-color: var(--bb-brand); color: var(--bb-brand); }
.hd-chip:focus-visible { outline: 2px solid var(--bb-brand); outline-offset: 2px; }

.hd-trust { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 28px 0 0; padding: 0; }
.hd-trust li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--bb-body); }
.hd-trust li > i { font-size: 19px; color: var(--bb-brand); }
.hd-trust b { font-weight: 800; color: var(--bb-brand-deep); }
.hd-trust .hd-trust__promise > i { color: var(--bb-ok); }
.hd-faces { display: inline-flex; }
.hd-faces img {
    inline-size: 32px; block-size: 32px; margin-inline-start: -10px;
    border: 2px solid #fff; border-radius: 50%; object-fit: cover;
    background: var(--bb-brand-tint); box-shadow: 0 2px 6px rgba(28, 28, 110, .18);
}
.hd-faces img:first-child { margin-inline-start: 0; }

/* The stage */
.hd-stage { position: relative; display: grid; place-items: end center; min-block-size: 540px; }
.hd-stage__ring,
.hd-stage__disc { position: absolute; left: 50%; aspect-ratio: 1; border-radius: 50%; translate: -50% 0; }
.hd-stage__ring { bottom: 0; inline-size: min(520px, 100%); border: 1.5px dashed rgba(66, 66, 214, .3); }
.hd-stage__disc {
    bottom: 34px; inline-size: min(430px, 84%);
    background: radial-gradient(circle at 32% 28%, var(--hd-violet) 0%, var(--bb-brand) 52%, var(--bb-brand-deep) 100%);
    box-shadow: 0 40px 80px -40px rgba(28, 28, 110, .65);
}
.hd-stage__figure {
    position: relative; z-index: 1;
    block-size: 510px; inline-size: auto; max-inline-size: 100%; object-fit: contain;
    filter: drop-shadow(0 28px 28px rgba(28, 28, 110, .3));
}
[dir="rtl"] .hd-stage__figure--mascot { transform: scaleX(-1); }
.hd-stage--custom .hd-stage__figure { block-size: auto; max-block-size: 510px; align-self: center; border-radius: var(--hd-radius); }

.hd-float {
    position: absolute; z-index: 2;
    display: flex; align-items: center; gap: 12px;
    inline-size: 256px; padding-block: 10px; padding-inline: 10px 14px;
    border: 1px solid rgba(255, 255, 255, .85); border-radius: 18px;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 20px 44px -20px rgba(28, 28, 110, .5);
    animation: hd-bob 7s ease-in-out infinite;
}
.hd-float--1 { inset-block-start: 10%; inset-inline-start: 0; }
.hd-float--2 { inset-block-start: 45%; inset-inline-end: 0; animation-delay: -2.4s; }
.hd-float--3 { inset-block-end: 7%; inset-inline-start: 3%; animation-delay: -4.8s; }
@keyframes hd-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

.hd-float__avatar {
    flex: none; display: grid; place-items: center; overflow: hidden;
    inline-size: 44px; block-size: 44px; border-radius: 50%;
    background: var(--bb-brand-tint); color: var(--bb-brand); font-weight: 800;
}
.hd-float__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hd-float__icon { flex: none; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 14px; font-size: 21px; }
.hd-float__icon img { inline-size: 26px; block-size: 26px; }
.hd-float__icon--gig { background: var(--bb-brand-tint); color: var(--bb-brand); }
.hd-float__icon--task { background: var(--bb-coin-bg); }
.hd-float__icon--collab { background: var(--bb-ok-bg); color: var(--bb-ok); }
.hd-float__text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.hd-float__name { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--bb-brand-deep); }
.hd-float__meta { font-size: 12px; line-height: 1.35; color: var(--bb-muted); }
.hd-float__reward {
    align-self: flex-start; margin-block-start: 4px; padding: 2px 9px; border-radius: 999px;
    background: var(--bb-brand-wash); font-size: 12px; font-weight: 700; color: var(--bb-brand);
}
.hd-float__dot {
    flex: none; align-self: flex-start; margin-inline-start: auto; margin-block-start: 4px;
    inline-size: 10px; block-size: 10px; border-radius: 50%;
    background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .22);
}

.hd-sticker {
    position: absolute; z-index: 3; inset-block-start: 1%; inset-inline-end: 7%;
    display: grid; place-content: center; justify-items: center; gap: 2px;
    inline-size: 108px; block-size: 108px; border-radius: 50%;
    background: var(--hd-gold); color: var(--bb-brand-deep); text-align: center;
    box-shadow: inset 0 0 0 5px var(--hd-gold), inset 0 0 0 7px rgba(28, 28, 110, .22), 0 16px 32px -14px rgba(150, 96, 27, .75);
    rotate: 12deg;
}
.hd-sticker strong { font-size: 32px; font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.hd-sticker span { font-size: 12px; font-weight: 800; line-height: 1.1; letter-spacing: .08em; text-transform: uppercase; }
[dir="rtl"] .hd-sticker { rotate: -12deg; }
[dir="rtl"] .hd-sticker span { letter-spacing: 0; text-transform: none; font-size: 13px; }

/* ── Section scaffolding ──────────────────────────────────────────────── */
.hd-section { padding-block: 88px; }
.hd-section--tint { background: var(--bb-canvas); }
.hd-section--flush { padding-block-start: 0; }
.hd-section--last { padding-block: 16px 96px; }

.hd-head { margin-block-end: 44px; }
.hd-head--center { max-inline-size: 660px; margin-inline: auto; text-align: center; }
.hd-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.hd-head--tight { margin-block-end: 0; }
.hd-eyebrow {
    display: inline-block; font-size: 13px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--bb-brand);
}
[dir="rtl"] .hd-eyebrow { letter-spacing: 0; text-transform: none; font-size: 14px; }
.hd-head h2 {
    margin: 10px 0 0;
    font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; font-weight: 800; letter-spacing: -.025em;
    color: var(--bb-brand-deep); text-wrap: balance;
}
[dir="rtl"] .hd-head h2 { letter-spacing: 0; line-height: 1.35; }
.hd-head__hint { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--bb-muted); }

/* ── Three kinds ──────────────────────────────────────────────────────── */
.hd-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hd-kind {
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--bb-line); border-radius: var(--hd-radius); background: #fff;
    color: inherit; text-decoration: none;
    transition: transform .3s var(--hd-spring), box-shadow .3s;
}
a.hd-kind:hover { transform: translateY(-5px); box-shadow: var(--bb-shadow-lg); color: inherit; }
a.hd-kind:focus-visible { outline: 3px solid var(--bb-brand); outline-offset: 3px; }
.hd-kind__art { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; block-size: 176px; }
.hd-kind__art::before,
.hd-kind__art::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; }
.hd-kind__art::before { inline-size: 230px; block-size: 230px; inset-block-start: -96px; inset-inline-end: -64px; background: rgba(255, 255, 255, .16); }
.hd-kind__art::after { inline-size: 130px; block-size: 130px; inset-block-end: -56px; inset-inline-start: -34px; border: 2px solid rgba(255, 255, 255, .3); }
.hd-kind__art i { font-size: 80px; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .18)); }
.hd-kind--gig .hd-kind__art { background: linear-gradient(135deg, var(--bb-brand) 0%, var(--hd-violet) 100%); color: #fff; }
.hd-kind--task .hd-kind__art { background: linear-gradient(135deg, #f8d98a 0%, var(--hd-gold) 50%, var(--hd-gold-deep) 100%); }
.hd-kind--collab .hd-kind__art { background: linear-gradient(135deg, #22764c 0%, #4fb07d 100%); color: #fff; }
.hd-kind__coin { inline-size: 88px; block-size: 88px; filter: drop-shadow(0 12px 16px rgba(150, 96, 27, .5)); }
.hd-kind__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 24px; }
.hd-kind__name { margin: 0; font-size: 23px; font-weight: 800; line-height: 1.25; color: var(--bb-brand-deep); }
.hd-kind__def { font-size: 15px; line-height: 1.6; color: var(--bb-body); }
.hd-kind__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-block-start: auto; padding-block-start: 12px; }
.hd-kind__count {
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
    background: var(--bb-ok-bg); font-size: 13px; font-weight: 700; color: var(--bb-ok);
    white-space: nowrap; /* short by design; at 320px Arabic it wrapped to three lines */
}
.hd-kind__count::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; }
.hd-kind__go {
    display: grid; place-items: center; inline-size: 38px; block-size: 38px; margin-inline-start: auto;
    border-radius: 50%; background: var(--bb-brand-wash); color: var(--bb-brand);
    transition: background-color .2s, color .2s;
}
a.hd-kind:hover .hd-kind__go { background: var(--bb-brand); color: #fff; }

/* ── Steps ────────────────────────────────────────────────────────────── */
.hd-steps { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px; margin: 0; padding: 0; }
.hd-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.hd-step__icon {
    position: relative; display: grid; place-items: center;
    inline-size: 92px; block-size: 92px; border: 1px solid var(--bb-line); border-radius: 30px;
    background: #fff; color: var(--bb-brand); font-size: 38px; box-shadow: var(--bb-shadow);
}
.hd-step:last-child .hd-step__icon { border-color: transparent; background: var(--bb-brand); color: #fff; box-shadow: 0 18px 34px -16px rgba(66, 66, 214, .9); }
.hd-step__n {
    position: absolute; inset-block-start: -9px; inset-inline-end: -9px;
    display: grid; place-items: center; inline-size: 30px; block-size: 30px;
    border: 3px solid var(--bb-canvas); border-radius: 50%;
    background: var(--hd-gold); color: var(--bb-brand-deep); font-size: 13px; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
/* The dashed path between icons: from 16px past this icon to 16px before the next. */
.hd-step:not(:last-child)::after {
    content: ""; position: absolute; inset-block-start: 46px; inset-inline-start: calc(50% + 62px);
    inline-size: calc(100% - 96px); border-block-start: 2px dashed rgba(66, 66, 214, .32);
}
.hd-step__title { margin: 0; font-size: 19px; font-weight: 800; color: var(--bb-brand-deep); }
.hd-step__body { max-inline-size: 28ch; margin: 6px auto 0; font-size: 15px; line-height: 1.6; color: var(--bb-muted); }
.hd-step__body p { margin: 0; }

/* ── Showcase ─────────────────────────────────────────────────────────── */
.hd-talent { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.hd-early {
    display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px;
    padding: 28px 32px; border: 1px solid var(--bb-line); border-radius: var(--hd-radius);
    background: linear-gradient(120deg, var(--bb-brand-wash) 0%, #fff 70%);
}
.hd-early__icon {
    flex: none; display: grid; place-items: center; inline-size: 76px; block-size: 76px;
    border-radius: 24px; background: var(--bb-brand); color: #fff; font-size: 36px;
    box-shadow: 0 16px 30px -16px rgba(66, 66, 214, .85);
}
.hd-early__text { flex: 1 1 300px; min-inline-size: 0; }
.hd-early__title { margin: 0; font-size: 21px; font-weight: 800; color: var(--bb-brand-deep); }
.hd-early__body { max-inline-size: 60ch; margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--bb-body); }

/* ── The 0% band ──────────────────────────────────────────────────────── */
.hd-zero {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center;
    padding: 60px; border-radius: 32px;
    background: radial-gradient(80% 120% at 0% 0%, #3d3dc7 0%, transparent 62%), var(--bb-brand-deep);
    color: #e9e8f7;
}
[dir="rtl"] .hd-zero { background: radial-gradient(80% 120% at 100% 0%, #3d3dc7 0%, transparent 62%), var(--bb-brand-deep); }
.hd-zero::after {
    content: ""; position: absolute; z-index: -1; inset-block-end: -170px; inset-inline-end: -130px;
    inline-size: 440px; block-size: 440px; border: 64px solid rgba(255, 255, 255, .04); border-radius: 50%;
}
.hd-zero__coin { position: absolute; z-index: -1; pointer-events: none; }
/* Both coins sit in the gutter between the two columns, clear of the list. */
.hd-zero__coin--a { inline-size: 60px; inset-block-start: 26px; inset-inline-start: calc(50% - 88px); rotate: -18deg; opacity: .9; }
.hd-zero__coin--b { inline-size: 38px; inset-block-end: 30px; inset-inline-start: calc(50% - 64px); rotate: 22deg; opacity: .55; }
.hd-zero__figure {
    margin: 0; font-size: clamp(104px, 14vw, 184px); font-weight: 900; line-height: .85; letter-spacing: -.06em;
    background: linear-gradient(180deg, #fff 35%, #b9b6ff 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.hd-zero__figure span { font-size: .52em; letter-spacing: -.02em; color: var(--hd-gold); -webkit-text-fill-color: var(--hd-gold); }
.hd-zero__title { margin: 20px 0 0; font-size: clamp(26px, 3vw, 36px); font-weight: 800; line-height: 1.15; color: #fff; text-wrap: balance; }
.hd-zero__body { max-inline-size: 44ch; margin-block-start: 12px; font-size: 16px; line-height: 1.65; color: rgba(233, 232, 247, .8); }
.hd-zero__body p { margin: 0; }
.hd-zero__list { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
.hd-zero__item {
    display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px;
    border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; background: rgba(255, 255, 255, .06);
}
.hd-zero__icon {
    flex: none; display: grid; place-items: center; inline-size: 46px; block-size: 46px;
    border-radius: 15px; background: rgba(255, 255, 255, .1); color: var(--hd-gold); font-size: 23px;
}
.hd-zero__name { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.4; color: #fff; }
.hd-zero__small { margin-block-start: 4px; font-size: 14px; line-height: 1.55; color: rgba(233, 232, 247, .72); }
.hd-zero__small p { margin: 0; }

/* ── Community + pricing ──────────────────────────────────────────────── */
.hd-free { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.hd-photo { position: relative; isolation: isolate; margin: 0; }
.hd-photo::before {
    content: ""; position: absolute; z-index: -1; inset-block: 26px -20px; inset-inline: 26px -20px;
    border-radius: 30px; background: var(--bb-brand-tint);
}
.hd-photo img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1; object-fit: cover; border-radius: 30px; box-shadow: var(--bb-shadow-lg); }
.hd-photo__cap {
    position: absolute; inset-block-end: 20px; inset-inline-start: 20px;
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
    background: rgba(255, 255, 255, .95); box-shadow: var(--bb-shadow);
    font-size: 13px; font-weight: 700; color: var(--bb-brand-deep);
}
.hd-photo__cap i { font-size: 18px; color: var(--bb-brand); }

/* Pricing: heading, one line, one comparison table, one action. */
.hd-pricing { min-inline-size: 0; }
.hd-pricing__sub { max-inline-size: 48ch; margin-block-start: 12px; font-size: 16px; line-height: 1.6; color: var(--bb-muted); }
.hd-pricing__sub p { margin: 0; }
.hd-pricing__sub:empty { display: none; }

.hd-compare { margin-block-start: 26px; overflow: hidden; border: 1px solid var(--bb-line); border-radius: 22px; background: #fff; box-shadow: var(--bb-shadow); }
.hd-compare__table { inline-size: 100%; margin: 0; border-collapse: collapse; table-layout: fixed; }
.hd-compare__table th,
.hd-compare__table td { padding: 14px 16px; border: 0; text-align: center; vertical-align: middle; }
.hd-compare__corner { inline-size: 40%; }
.hd-compare__table thead th,
.hd-compare__table thead td { padding-block: 20px 16px; border-block-end: 1px solid var(--bb-line); }
.hd-compare__name { display: block; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--bb-muted); }
[dir="rtl"] .hd-compare__name { letter-spacing: 0; text-transform: none; font-size: 13px; }
.hd-compare__plan.is-paid .hd-compare__name { color: var(--bb-brand); }
.hd-compare__price { display: block; margin-block-start: 6px; font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--bb-muted); }
.hd-compare__price b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--bb-brand-deep); font-variant-numeric: tabular-nums; }
.hd-compare__price small { display: block; margin-block-start: 2px; font-size: 12px; font-weight: 500; }
.hd-compare__table tbody th { text-align: start; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--bb-body); }
.hd-compare__table tbody tr + tr > * { border-block-start: 1px solid var(--bb-line-soft); }
.hd-compare__value { font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--bb-brand-deep); font-variant-numeric: tabular-nums; }
/* The paid column is the one lifted: a wash down its length and a brand rule on top. */
.hd-compare .is-paid { background: var(--bb-brand-wash); }
.hd-compare thead .is-paid { box-shadow: inset 0 3px 0 var(--bb-brand); }
.hd-mark { display: inline-grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 50%; font-size: 14px; }
.hd-mark--yes { background: var(--bb-ok-bg); color: var(--bb-ok); }
.hd-mark--no { background: var(--bb-line-soft); color: var(--bb-faint); }
.hd-pricing__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-block-start: 22px; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.hd-faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.hd-faq { display: grid; gap: 12px; }
.hd-faq__item { border: 1px solid var(--bb-line); border-radius: 20px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.hd-faq__item[open] { border-color: rgba(66, 66, 214, .35); box-shadow: var(--bb-shadow); }
.hd-faq__q {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-block-size: 64px; padding-inline: 22px; list-style: none; cursor: pointer;
    font-size: 16px; font-weight: 700; color: var(--bb-brand-deep);
}
.hd-faq__q::-webkit-details-marker { display: none; }
.hd-faq__q::after {
    content: "+"; flex: none; display: grid; place-items: center; inline-size: 34px; block-size: 34px;
    border-radius: 50%; background: var(--bb-brand-wash); color: var(--bb-brand); font-size: 21px; font-weight: 500; line-height: 1;
    transition: background-color .2s, color .2s;
}
.hd-faq__item[open] > .hd-faq__q::after { content: "\2212"; background: var(--bb-brand); color: #fff; }
.hd-faq__q:focus-visible { outline: 2px solid var(--bb-brand); outline-offset: 2px; border-radius: 20px; }
.hd-faq__a { padding: 0 22px 22px; font-size: 15px; line-height: 1.7; color: var(--bb-body); }
.hd-faq__a p { margin: 0 0 8px; }
.hd-faq__a p:last-child { margin-block-end: 0; }

/* ── CTA banner ───────────────────────────────────────────────────────── */
.hd-cta {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px;
    padding-block: 60px 0; padding-inline: 60px 40px; border-radius: 32px;
    background: linear-gradient(115deg, var(--bb-brand) 0%, #5a4fe6 55%, var(--hd-violet) 100%);
    color: #fff;
}
.hd-cta::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, .2) 1px, transparent 1.3px); background-size: 20px 20px;
    -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 90%); mask-image: linear-gradient(90deg, transparent 10%, #000 90%);
}
[dir="rtl"] .hd-cta::before { -webkit-mask-image: linear-gradient(270deg, transparent 10%, #000 90%); mask-image: linear-gradient(270deg, transparent 10%, #000 90%); }
.hd-cta__text { padding-block-end: 60px; }
.hd-cta h2 { max-inline-size: 18ch; margin: 0; font-size: clamp(30px, 3.8vw, 46px); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; color: #fff; text-wrap: balance; }
[dir="rtl"] .hd-cta h2 { letter-spacing: 0; line-height: 1.35; }
.hd-cta p { max-inline-size: 46ch; margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.hd-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 30px; }
.hd-cta__art { display: block; inline-size: 300px; block-size: auto; margin-block-end: -34px; filter: drop-shadow(0 22px 30px rgba(28, 28, 110, .45)); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .hd-hero { padding-block: 32px 48px; }
    .hd-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .hd-stage { inline-size: 100%; max-inline-size: 480px; min-block-size: 420px; margin-inline: auto; }
    .hd-stage__figure { block-size: 400px; }
    .hd-section { padding-block: 64px; }
    .hd-head { margin-block-end: 32px; }
    .hd-steps { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
    .hd-step:not(:last-child)::after { display: none; }
    .hd-talent { grid-template-columns: minmax(0, 1fr); }
    .hd-zero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 44px 36px; }
    /* Stacked, the second coin would land on the money list , keep one, in the corner. */
    .hd-zero__coin--a { inset-block-start: 30px; inset-inline-start: auto; inset-inline-end: 30px; }
    .hd-zero__coin--b { display: none; }
    .hd-free { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .hd-photo { max-inline-size: 440px; }
    .hd-faq-wrap { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .hd-cta { grid-template-columns: minmax(0, 1fr); padding: 44px 36px 0; }
    .hd-cta__text { padding-block-end: 0; }
    .hd-cta__art { justify-self: end; inline-size: 180px; margin-block: -12px -24px; }
}

@media (max-width: 767px) {
    .hd-kinds { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .hd-kind { flex-direction: row; }
    .hd-kind__art { flex: none; inline-size: 108px; block-size: auto; }
    .hd-kind__art i { font-size: 44px; }
    .hd-kind__coin { inline-size: 52px; block-size: 52px; }
    .hd-kind__body { gap: 6px; padding: 18px; }
    .hd-kind__name { font-size: 19px; }
    .hd-kind__def { font-size: 14px; }
}

@media (max-width: 575px) {
    /* The theme container runs ~12px gutters; this page keeps at least 16px. */
    .hd-page .container { padding-inline: 16px; }
    .hd-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); inline-size: 100%; }
    .hd-switch__door { min-block-size: 44px; padding-inline: 8px; font-size: 13px; }
    .hd-search { padding-inline-start: 14px; }
    .hd-search__icon { display: none; }
    .hd-search__go { padding-inline: 18px; }
    .hd-trust { gap: 10px 18px; }
    .hd-stage { min-block-size: 340px; }
    .hd-stage__figure { block-size: 320px; }
    .hd-float { inline-size: 236px; gap: 10px; padding-block: 8px; padding-inline: 8px 12px; }
    .hd-float__meta { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
    /* Four chips are plenty on a phone; more pushes the stage a screen down. */
    .hd-chips a.hd-chip:nth-of-type(n+5) { display: none; }
    .hd-float--1 { inset-block-start: 6%; }
    .hd-float--2 { inset-block-start: auto; inset-block-end: 6%; }
    .hd-float--3 { display: none; }
    .hd-sticker { inline-size: 86px; block-size: 86px; }
    .hd-sticker strong { font-size: 25px; }
    .hd-sticker span { font-size: 10px; }
    .hd-section { padding-block: 52px; }
    .hd-steps { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .hd-step { flex-direction: row; align-items: flex-start; gap: 16px; text-align: start; }
    .hd-step__icon { flex: none; inline-size: 64px; block-size: 64px; border-radius: 20px; font-size: 28px; }
    .hd-step:not(:last-child)::after {
        display: block; inset-block-start: 74px; inset-inline-start: 31px;
        inline-size: 0; block-size: calc(100% - 52px); border-block-start: 0; border-inline-start: 2px dashed rgba(66, 66, 214, .32);
    }
    .hd-step__body { max-inline-size: none; margin-inline: 0; }
    .hd-early { padding: 22px; }
    .hd-early .hd-btn { inline-size: 100%; }
    .hd-zero { padding: 34px 22px; border-radius: 26px; }
    .hd-zero__item { padding: 16px; }
    .hd-photo::before { inset-block: 16px -12px; inset-inline: 16px -12px; }
    .hd-compare__table th,
    .hd-compare__table td { padding: 12px 10px; }
    .hd-compare__corner { inline-size: 38%; }
    .hd-compare__price b { font-size: 20px; }
    .hd-compare__table tbody th,
    .hd-compare__value { font-size: 13px; }
    .hd-pricing__actions .hd-btn { inline-size: 100%; }
    .hd-faq__q { padding-inline: 16px; font-size: 15px; }
    .hd-faq__a { padding: 0 16px 18px; }
    .hd-cta { padding: 34px 22px 0; border-radius: 26px; }
    .hd-cta__actions .hd-btn { flex: 1 1 100%; }
    .hd-cta__art { inline-size: 140px; }
}

/* 44px touch targets wherever the pointer is a finger , tablets included. */
@media (pointer: coarse) {
    .hd-chip { min-block-size: 44px; }
    .hd-switch__door { min-block-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .hd-float { animation: none; }
    .hd-btn, .hd-kind, .hd-kind__go, .hd-chip, .hd-switch__door, .hd-faq__item, .hd-faq__q::after { transition: none; }
    a.hd-kind:hover, .hd-btn:hover { transform: none; }
}