/* ============================================================================
 * WorkOfficially - design system v3 "Editorial Precision"
 *
 * Aesthetic: cream paper meets fintech control panel.
 *   - Warm-paper background (#fbf5e8) + sharp warm-black ink (#11100c)
 *   - WRK orange #ff9900 used like a Penguin Classics spine accent
 *   - Bricolage Grotesque + Instrument Serif italic + JetBrains Mono
 *   - HARD edges (4px corners max), 1px hairlines, no pillow buttons
 *   - Real data shown as data: monospace numerics with tabular figures
 *   - No fake "trusted by" logos, no fake testimonials, no glassmorphism
 *
 * WINDOWS-FONT-20260622: the brand sans stays Bricolage Grotesque everywhere; on
 * Windows ONLY it swaps to Manrope (Bricolage renders poorly under Windows ClearType).
 * Avoid generic feature grids, purple gradients, glassmorphism,
 * decorative emoji, or 12 cards of vague benefits. Be specific.
 * ============================================================================ */

/* SELF-HOSTED-FONTS-20260824: was @import of Google Fonts, blocked by CSP.
   The same families are self-hosted in /assets/fonts/fonts.css, linked from
   the layouts. */

:root {
    /* Palette - restrained, intentional, paper-cream surface */
    --wo-primary:        #ff9900;
    --wo-primary-strong: #d97800;
    --wo-primary-deep:   #8a4d00;
    --wo-primary-soft:   #ffe4bf;

    /* Ink = espresso brown (same family as the footer) so the whole site reads
       as one warm-brown palette. Orange is reserved for accent only. */
    --wo-ink:            #261b10;     /* espresso brown - body text, dark slabs, brand-mark */
    --wo-ink-2:          #4a3b29;     /* one step lighter, for secondary text */
    --wo-text-muted:     #7a6a52;     /* warm muted helper text */

    --wo-line:           #d6cdb7;     /* hairline borders */
    --wo-line-soft:      #ece3cd;
    --wo-paper:          #fbf5e8;     /* cream paper */
    --wo-paper-2:        #f4ecd6;
    --wo-card:           #fffdf6;
    --wo-shell:          #f7f0dd;

    /* DARK-MODE-SPLIT-20260624: --wo-ink doubles as body-text colour AND as the
       dark slab/button background. Those roles must diverge in dark mode, so slab
       backgrounds + their on-slab text are aliased to dedicated vars. In LIGHT
       mode these equal the originals, so the light site is byte-for-byte unchanged. */
    --wo-slab:           var(--wo-ink);    /* dark slab / primary-button / pill background */
    --wo-on-slab:        var(--wo-paper);  /* cream text/icon sitting on a slab */

    --wo-accent-ink:     #0a0907;     /* near-black with warmth */
    --wo-espresso:       #261b10;     /* luxury warm-brown - footers, slabs */
    --wo-espresso-2:     #1d140a;     /* slightly deeper for layered footers */
    --wo-cream-soft:     #ede3c8;     /* warm sand - soft accent on dark */
    --wo-warm:           #d97800;
    --wo-good:           #1f7a3a;     /* live indicator green */
    --wo-bad:            #b13d2d;     /* error red */

    /* Sharp, restrained shadows */
    --wo-shadow-line:    0 0 0 1px var(--wo-line);
    --wo-shadow-sm:      0 1px 0 var(--wo-line);
    --wo-shadow-md:      0 2px 0 var(--wo-line), 0 12px 30px -18px rgba(17,16,12,.18);
    --wo-shadow-pop:     0 2px 0 var(--wo-line), 0 24px 50px -16px rgba(17,16,12,.35);

    /* Type - BRAND DEFAULT for Mac / iPhone / iPad / Android and everything that
       is NOT Windows: Bricolage Grotesque display + Instrument Serif italic
       accents. This is UNCHANGED from what those platforms already render.
       Windows ONLY swaps in the self-hosted Helvetica Neue + Iowan Old Style
       (see html.os-win below), because Bricolage renders rough under Windows
       ClearType. Nothing here affects non-Windows. */
    --font-display: 'Bricolage Grotesque', 'Helvetica Neue', system-ui, sans-serif;
    --font-serif:   'Instrument Serif', 'Iowan Old Style', Georgia, serif;
    --font-body:    'Bricolage Grotesque', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ============================================================================
   WINDOWS-ONLY BRAND FONTS (2026-06-22)
   <html> is tagged .os-win by the seo_head script for Windows user-agents ONLY.
   Mac / iPhone / iPad / Android never receive this class, so they stay exactly
   as the defaults above. On Windows the sans becomes self-hosted Helvetica Neue
   (clean + renders crisply under ClearType) and the italic accent serif becomes
   self-hosted Iowan Old Style Italic. Weights cap at Bold (700) so nothing looks
   over-bold; .wo-wm at 800 falls to the nearest = Bold. Self-hosted = no Google
   dependency and identical on every Windows PC.
   ============================================================================ */
@font-face{font-family:'Helvetica Neue Web';src:url('/assets/fonts/brand/helvetica-neue-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Helvetica Neue Web';src:url('/assets/fonts/brand/helvetica-neue-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Helvetica Neue Web';src:url('/assets/fonts/brand/helvetica-neue-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Iowan Old Style BT';src:url('/assets/fonts/brand/iowan-old-style-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}

html.os-win {
    --font-display: 'Helvetica Neue Web', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-body:    'Helvetica Neue Web', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-serif:   'Iowan Old Style BT', 'Iowan Old Style', 'Instrument Serif', Georgia, serif;
}
html.os-win .wo-wm,
html.os-win .wo-wm__best { font-family: 'Helvetica Neue Web', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
html.os-win .wo-wm__off  { font-family: 'Iowan Old Style BT', 'Iowan Old Style', Georgia, serif; font-style: italic; }

/* -------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--wo-paper); }
body {
    font-family: var(--font-body);
    font-feature-settings: 'ss01', 'ss02', 'cv11';
    color: var(--wo-ink);
    background: var(--wo-paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* SELECTION-FIX-20260622: dark ink on the orange highlight = readable on any
   background (light cards, dark slabs, every browser). Includes the -moz prefix
   so older Firefox applies it instead of falling back to an unreadable default. */
::selection      { background: var(--wo-primary); color: var(--wo-ink); }
::-moz-selection { background: var(--wo-primary); color: var(--wo-ink); }
.bg-body-tertiary { background: var(--wo-shell) !important; }
.text-muted { color: var(--wo-text-muted) !important; }
hr { border: none; border-top: 1px solid var(--wo-line); opacity: 1; margin: 1.5rem 0; }

/* -------- Typography ---------- */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--wo-ink);
}
.display-3, .display-4, .display-5 { letter-spacing: -0.04em; font-weight: 800; }
.h1, h1 { font-size: clamp(2rem, 4vw, 3rem); }
.h2, h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.lead {
    color: var(--wo-text-muted); font-size: 1.13rem; line-height: 1.55; font-weight: 400;
    max-width: 56ch;
}
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.mono, .num {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'zero' 1;
}

/* -------- Eyebrow / spec-tag (signature motif) ---------- */
.eyebrow {
    font-family: var(--font-mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 500;
    color: var(--wo-ink-2);
    display: inline-flex; align-items: center; gap: .55rem;
    margin-bottom: 1rem;
}
.eyebrow::before {
    content: ''; width: 8px; height: 8px;
    background: var(--wo-primary);
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(255,153,0,.18);
    animation: livePulse 2.2s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255,153,0,.18); }
    50%      { box-shadow: 0 0 0 5px rgba(255,153,0,.0); }
}

/* "Spec-tag" - used to label sections like a technical document */
.spec-tag {
    font-family: var(--font-mono); font-size: .68rem;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--wo-text-muted); font-weight: 500;
    border-top: 1px solid var(--wo-line);
    padding-top: .4rem;
    display: inline-block;
}

/* -------- Buttons - squared, hard ---------- */
.btn {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -.005em;
    border-radius: 4px;
    padding: .65rem 1.15rem;
    border: 1px solid transparent;
    transition: transform .12s ease, background .14s ease, color .14s ease, border-color .14s ease;
    box-shadow: none;
}
.btn-lg { padding: .85rem 1.5rem; font-size: 1rem; }
.btn-sm { padding: .35rem .8rem; font-size: .82rem; }

.btn-primary {
    background: var(--wo-slab); border-color: var(--wo-ink); color: var(--wo-on-slab);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--wo-primary); border-color: var(--wo-primary); color: var(--wo-ink);
    transform: translateY(-1px);
}
/* WHITE-TEXT-BTN-20260612: any action button whose text is white/cream must sit
   on the brand brown box so it stays readable (withdraw, pay, etc.). Covers
   stray Bootstrap-colored buttons that otherwise render light text on a light
   fill. */
.btn-warning, .btn-success, .btn-info, .btn.text-white, .btn.text-light {
    background: var(--wo-slab); border-color: var(--wo-ink); color: var(--wo-on-slab) !important;
}
.btn-warning:hover, .btn-success:hover, .btn-info:hover,
.btn.text-white:hover, .btn.text-light:hover {
    background: var(--wo-primary); border-color: var(--wo-primary); color: var(--wo-ink) !important;
}
.btn-outline-primary {
    color: var(--wo-ink); border-color: var(--wo-ink); background: transparent;
}
.btn-outline-primary:hover { background: var(--wo-slab); color: var(--wo-on-slab); }
.btn-outline-secondary {
    color: var(--wo-ink); border-color: var(--wo-line); background: var(--wo-card);
}
.btn-outline-secondary:hover { border-color: var(--wo-ink); background: var(--wo-paper); }
/* WHITE-BTN-ORANGE-20260622: on PUBLIC marketing pages (body.wo-mkt) the white
   secondary button takes the homepage "How it works" orange treatment, so every
   white CTA reacts the same way (orange outline -> fills orange on hover). Scoped
   to .wo-mkt so the admin panel and in-app forms are NOT affected. */
.wo-mkt .btn-outline-secondary { color:var(--wo-accent-text); border: 1.5px solid #b95400; background: var(--wo-card); font-weight: 700; }
.wo-mkt .btn-outline-secondary:hover { background: #b95400; color: #fff; border-color:var(--wo-accent-text); }
.btn-link { color: var(--wo-ink); text-decoration: none; font-weight: 600; }
.btn-link:hover { color: var(--wo-primary-deep); text-decoration: underline; }

.bg-primary { background-color: var(--wo-primary) !important; }
.text-primary { color: var(--wo-primary-deep) !important; }
.border-primary { border-color: var(--wo-primary) !important; }
a { color: var(--wo-ink); text-decoration: underline; text-decoration-color: var(--wo-primary); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--wo-primary-deep); }
a.link-dark, .link-dark { color: var(--wo-ink) !important; text-decoration: none; }
a.link-secondary, .link-secondary { color: var(--wo-text-muted) !important; }

/* -------- Forms ---------- */
.form-control, .form-select {
    border: 1px solid var(--wo-line);
    background: var(--wo-card);
    border-radius: 4px;
    padding: .65rem .85rem;
    font-size: .95rem;
    font-family: var(--font-body);
    color: var(--wo-ink);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--wo-ink); outline: none;
    box-shadow: 0 0 0 1px var(--wo-ink), 0 0 0 4px rgba(255,153,0,.18);
}
.form-label { font-weight: 500; color: var(--wo-ink-2); font-size: .88rem; }
.form-text { color: var(--wo-text-muted); font-family: var(--font-mono); font-size: .76rem; }

/* -------- Cards (sharp) ---------- */
.card {
    border-radius: 6px;
    border: 1px solid var(--wo-line) !important;
    background: var(--wo-card);
    box-shadow: none;
}
.card.shadow-sm { box-shadow: var(--wo-shadow-sm) !important; }

.badge.text-bg-warning { background: var(--wo-primary) !important; color: var(--wo-ink); font-family: var(--font-mono); font-weight: 600; }

/* -------- Header ---------- */
.wrk-header, .wo-header {
    background: var(--wo-paper) !important;
    border-bottom: 1px solid var(--wo-line) !important;
    backdrop-filter: blur(8px);
}
.wo-wordmark {
    font-family: var(--font-display);
    font-weight: 800; font-size: 1.28rem;
    letter-spacing: -.04em;
    color: var(--wo-ink); line-height: 1;
    display: inline-flex; align-items: baseline; gap: 0;
}
.wo-wordmark .wo-accent {
    font-family: var(--font-serif); font-style: italic; font-weight: 400;
    color: var(--wo-primary-deep);
    /* WORDMARK-NUDGE-20260624: italic serif rides high vs "Work" - nudge down 0.5px. */
    position: relative; top: 0.5px;
}
.brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: var(--wo-slab); color: var(--wo-primary);
    font-family: var(--font-serif); font-style: italic; font-weight: 400;
    font-size: 19px; letter-spacing: -.04em;
}
.brand-mark::after { content: 'Wo'; }
.navbar-nav .nav-link {
    color: var(--wo-ink-2); font-weight: 500; font-size: .93rem;
    padding: .45rem .7rem !important;
    transition: color .12s;
}
.navbar-nav .nav-link:hover { color: var(--wo-ink); }
.navbar .btn { font-size: .9rem; padding: .5rem 1rem; }

/* -------- Hero - editorial split ---------- */
.hero {
    position: relative; padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 5vw, 4rem);
    border-bottom: 1px solid var(--wo-line);
    background:
        linear-gradient(180deg, var(--wo-paper) 0%, var(--wo-paper-2) 100%);
}
.hero::before {
    /* faint registration crosshair top-right - editorial print mark */
    content: ''; position: absolute; top: 28px; right: 32px;
    width: 14px; height: 14px;
    background:
        linear-gradient(var(--wo-text-muted), var(--wo-text-muted)) center/1px 100% no-repeat,
        linear-gradient(var(--wo-text-muted), var(--wo-text-muted)) center/100% 1px no-repeat;
    opacity: .35;
}
.hero h1 {
    font-size: clamp(2.4rem, 6vw, 4.4rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: .96;
    animation: fadeUp .85s cubic-bezier(.2,.7,.2,1) both;
}
.hero h1 .accent {
    color: var(--wo-primary-deep);
    font-family: var(--font-serif);
    font-style: italic; font-weight: 400;
    letter-spacing: -.02em;
}
.hero .lead { font-size: 1.18rem; max-width: 540px; animation: fadeUp .85s .1s both; }
.hero .eyebrow { animation: fadeUp .85s 0s both; }
.hero-ctas { animation: fadeUp .85s .18s both; }
.hero-trust {
    display: flex; gap: 1.4rem; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: .8rem; color: var(--wo-text-muted);
    border-top: 1px solid var(--wo-line);
    padding-top: 1.1rem;
    animation: fadeUp .85s .26s both;
}
.hero-trust i { color: var(--wo-primary-deep); margin-right: .35rem; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* -------- Live data panel (the "control panel" companion to the hero) ---------- */
.data-panel {
    background: var(--wo-slab);
    color: var(--wo-on-slab);
    border: 1px solid var(--wo-ink);
    border-radius: 6px;
    padding: 1.6rem;
    font-family: var(--font-mono);
    font-size: .82rem;
    box-shadow: var(--wo-shadow-pop);
    animation: fadeUp .85s .35s both;
    position: relative; overflow: hidden;
}
.data-panel::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(255,153,0,.04) 100%);
    pointer-events: none;
}
.data-panel__head {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.12);
    padding-bottom: .8rem; margin-bottom: 1rem;
}
.data-panel__head-title {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.05rem; letter-spacing: -.01em;
    color: var(--wo-on-slab);
}
.data-panel__head-id { color: var(--wo-primary); font-size: .72rem; }
.data-panel__row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .55rem 0;
    border-bottom: 1px dashed rgba(255,255,255,.08);
}
.data-panel__row:last-child { border-bottom: none; }
.data-panel__label { color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; }
.data-panel__value { font-weight: 600; color: var(--wo-on-slab); font-variant-numeric: tabular-nums; }
.data-panel__value .accent { color: var(--wo-primary); }
.data-panel__live {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .68rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--wo-good); font-weight: 600;
}
.data-panel__live::before {
    content: ''; width: 6px; height: 6px; background: var(--wo-good); border-radius: 50%;
    animation: livePulse 1.8s ease-in-out infinite;
}

/* -------- Stats strip ---------- */
.stats-strip {
    background: var(--wo-card);
    border-top: 1px solid var(--wo-line);
    border-bottom: 1px solid var(--wo-line);
    padding: 1.5rem 0;
}
.stats-strip .stat-num {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 800;
    letter-spacing: -.03em;
    color: var(--wo-ink);
}
.stats-strip .stat-num .accent { color: var(--wo-primary-deep); }
.stats-strip .stat-label {
    font-family: var(--font-mono);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--wo-text-muted); font-weight: 500;
}
.stats-strip .stat { position: relative; padding-left: 1rem; }
.stats-strip .stat::before {
    content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
    width: 2px; background: var(--wo-primary);
}

/* -------- Sections ---------- */
/* HOME-TRIM-20260821: was clamp(3rem, 7vw, 5.5rem). Because the padding sits on
   BOTH edges, adjacent sections stacked up to 11rem of empty space between them
   on a wide screen, which read as a broken layout rather than breathing room.
   Tightened to a 4rem cap (8rem between sections at most). Applies to every
   `.section` so the page keeps one consistent rhythm instead of one odd gap. */
.section { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section-tight { padding: 3rem 0; }
.section-divider { border-top: 1px solid var(--wo-line); }

/* Numbered section header - editorial */
.section-num {
    display: inline-flex; align-items: baseline; gap: .75rem;
    font-family: var(--font-mono); font-size: .72rem;
    color: var(--wo-text-muted);
    margin-bottom: .6rem;
}
.section-num strong { color: var(--wo-primary-deep); font-weight: 600; }

/* -------- Feature cards (refined, hard-edge) ---------- */
.feature-card {
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 6px;
    padding: 1.6rem 1.7rem;
    height: 100%;
    transition: border-color .15s ease, transform .15s ease;
}
.feature-card:hover { border-color: var(--wo-ink); transform: translateY(-2px); }
.feature-card .feat-num {
    font-family: var(--font-mono); font-size: .72rem;
    color: var(--wo-primary-deep); font-weight: 600;
    letter-spacing: .08em;
    border-bottom: 1px solid var(--wo-line);
    padding-bottom: .5rem; margin-bottom: 1rem;
    display: block;
}
.feature-card h4 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem; }
.feature-card p { color: var(--wo-text-muted); font-size: .94rem; margin-bottom: 0; line-height: 1.5; }
.feature-card p strong { color: var(--wo-ink); font-weight: 700; }

/* REP-V8 (2026-05-30): F01 "Reputation Bridge" card gets the gold treatment
   so it stands out as the new headline feature in the grid. */
.feature-card--new {
    position: relative;
    background: linear-gradient(180deg, #fffaf0 0%, #fbf2e0 100%);
    border-color: rgba(255, 153, 0, .35);
    overflow: hidden;
}
.feature-card--new::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255, 200, 80, .20), transparent 55%);
    pointer-events: none;
}
.feature-card--new:hover { border-color: rgba(255, 153, 0, .75); }
.feat-badge-new {
    position: absolute;
    top: 1rem; right: 1rem;
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .14em;
    padding: 3px 9px;
    border-radius: 999px;
    color: #3a2400;
    background: linear-gradient(180deg, #ffd97a 0%, #ffb340 100%);
    border: 1px solid rgba(196, 130, 0, .45);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 2px 8px rgba(255, 153, 0, .35);
    animation: featBadgeGlow 3.6s ease-in-out infinite;
    z-index: 1;
}
@keyframes featBadgeGlow {
    0%, 100% { box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 2px 8px rgba(255, 153, 0, .35); }
    50%      { box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 2px 18px rgba(255, 153, 0, .65); }
}
.feature-card--new .feat-num { color:var(--wo-accent-text); border-bottom-color: rgba(255, 153, 0, .25); position: relative; }
.feature-card--new h4 { color: var(--wo-ink); position: relative; }
.feature-card--new p  { color: rgba(38, 27, 16, .78); position: relative; }
.feature-card--new p strong { color: var(--wo-ink); }
.feat-link {
    display: inline-flex; align-items: center; gap: .25rem;
    margin-top: .85rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color:var(--wo-accent-text);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    position: relative;
    transition: gap .15s ease, color .15s ease;
}
.feat-link:hover { color: #8a3e00; gap: .5rem; }
@media (prefers-reduced-motion: reduce) {
    .feat-badge-new { animation: none; }
}

/* -------- Steps ---------- */
.step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: var(--wo-slab); color: var(--wo-primary);
    font-family: var(--font-mono); font-weight: 600; font-size: .9rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

/* -------- Talent / job cards ---------- */
.tcard, .job-card {
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 6px;
    padding: 1.4rem 1.5rem;
    transition: border-color .15s ease, transform .15s ease;
}
.tcard:hover, .job-card:hover { border-color: var(--wo-ink); transform: translateY(-1px); }
.tcard .tcard-skills { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .65rem; }
.tag {
    background: var(--wo-paper);
    color: var(--wo-ink);
    border: 1px solid var(--wo-line);
    border-radius: 3px;
    padding: .15rem .55rem;
    font-family: var(--font-mono); font-size: .72rem;
    font-weight: 500;
    display: inline-block;
    letter-spacing: -.005em;
}

/* JOB-CARD-BUDGET-20260624: the budget pill was being crushed by the flex split
   into ragged 2-3 line wraps ("Open" / "budget"). Give the price column its
   natural width and let the text column shrink instead, so the budget sits on
   ONE line when the card has room and (via the non-breaking spaces in
   job_budget) wraps to a clean two lines only when it genuinely doesn't.
   Scoped with :has to ONLY the rows whose .text-end holds a .tag (the budget),
   so no other layout is touched. */
.d-flex:has(> .text-end > .tag) > .text-end { flex: 0 0 auto; max-width: 55%; }
.d-flex:has(> .text-end > .tag) > :first-child { flex: 1 1 auto; min-width: 0; }

/* -------- Avatars ---------- */
.avatar-circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 4px;
    background: var(--wo-slab); color: var(--wo-primary);
    font-family: var(--font-display);
    font-weight: 700; font-size: 13px; line-height: 1;
    letter-spacing: -.02em;
}
.avatar-lg { width: 56px; height: 56px; font-size: 18px; }
.avatar-xl { width: 80px; height: 80px; font-size: 26px; border-radius: 6px; }

/* -------- KPI tiles ---------- */
.kpi-tile {
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 6px;
    padding: 1.1rem 1.35rem;
    position: relative;
    transition: border-color .15s ease;
}
.kpi-tile:hover { border-color: var(--wo-ink); }
.kpi-tile::after {
    content: ''; position: absolute; top: 0; left: 0;
    width: 32px; height: 2px; background: var(--wo-primary);
}
.kpi-tile .kpi-num {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 2.4vw, 2rem);
    font-weight: 800; letter-spacing: -.03em;
    line-height: 1; color: var(--wo-ink);
    margin-top: .4rem;
}
.kpi-tile .kpi-num .small-unit { font-family: var(--font-mono); font-size: .7rem; color: var(--wo-text-muted); font-weight: 500; }
.kpi-tile .kpi-label {
    font-family: var(--font-mono);
    font-size: .68rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--wo-text-muted); font-weight: 500;
}

/* -------- Pills ---------- */
.pill-wrk, .pill-ai, .pill-vet {
    font-family: var(--font-mono);
    font-size: .68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em;
    padding: .22rem .55rem;
    border-radius: 3px;
    display: inline-block;
}
.pill-wrk { background: rgba(217,120,0,.12); color: var(--wo-primary-deep); border: 1px solid rgba(217,120,0,.3); }
.pill-ai  { background: rgba(29,93,214,.08); color: #1d5dd6;             border: 1px solid rgba(29,93,214,.25); }
.pill-vet { background: var(--wo-slab); color: var(--wo-primary); border: 1px solid var(--wo-ink); }

/* -------- Status pills ---------- */
.status-pill {
    display: inline-block;
    font-family: var(--font-mono);
    border-radius: 3px;
    padding: .15rem .55rem;
    font-size: .68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em;
}
.status-draft     { background: var(--wo-paper-2); color: var(--wo-ink-2); }
.status-open, .status-active, .status-approved, .status-released, .status-credited
                  { background: rgba(31,122,58,.08); color: var(--wo-good); border: 1px solid rgba(31,122,58,.2); }
.status-funded, .status-pending, .status-submitted, .status-confirmed
                  { background: rgba(217,120,0,.10); color: var(--wo-primary-deep); border: 1px solid rgba(217,120,0,.2); }
.status-dispute, .status-rejected, .status-reorged, .status-failed
                  { background: rgba(177,61,45,.08); color: var(--wo-bad); border: 1px solid rgba(177,61,45,.2); }
.status-closed, .status-paused
                  { background: var(--wo-line-soft); color: var(--wo-ink-2); }

/* -------- AI panel ---------- */
.ai-panel {
    border: 1px solid var(--wo-line);
    border-radius: 6px;
    background: var(--wo-card);
    padding: 1.15rem 1.3rem;
    position: relative;
}
.ai-panel::before {
    content: 'AI'; position: absolute; right: .9rem; top: .65rem;
    font-family: var(--font-mono); font-size: .65rem; letter-spacing: .14em;
    color: var(--wo-primary-deep); font-weight: 600;
    background: var(--wo-paper); padding: .15rem .4rem;
    border: 1px solid var(--wo-primary-deep); border-radius: 2px;
}
.ai-panel .ai-eyebrow {
    color: var(--wo-text-muted); font-family: var(--font-mono);
    font-weight: 500; font-size: .68rem;
    letter-spacing: .14em; text-transform: uppercase;
    margin-bottom: .4rem;
}
/* DASH-ALIGN-20260822: on the dashboards the "AI suggestion" label was
   promoted out of the panel into a real heading, so the column lines up with
   the one opposite. That removed the .ai-eyebrow line the corner "AI" badge
   used to sit beside - without it the badge overlaps the first line of body
   text. The heading above already names the panel, so the badge is redundant
   there: hide it, and only on this modifier. The panels that still carry an
   eyebrow (contract/show, dispute/show, job/show) keep the badge unchanged. */
.ai-panel--headed::before { display: none; }

/* -------- Footer - luxury espresso ---------- */
.wo-footer {
    position: relative;
    background:
        radial-gradient(900px 360px at 12% -10%, rgba(217,120,0,.10) 0%, transparent 60%),
        linear-gradient(180deg, var(--wo-espresso) 0%, var(--wo-espresso-2) 100%);
    color: rgba(253,247,232,.72);
    padding: 4.5rem 0 1.75rem;
}
/* hairline gold rule, not a slab */
.wo-footer::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,153,0,.6) 18%,
        rgba(255,153,0,.6) 82%,
        transparent 100%);
}
/* subtle paper-grain on the dark surface */
.wo-footer::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    opacity: .25; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><filter id='n'><feTurbulence baseFrequency='0.85' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.65  0 0 0 0 0.45  0 0 0 0 0.22  0 0 0 0.5 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
}
.wo-footer .container-xxl { position: relative; z-index: 1; }

.wo-footer h6 {
    color: var(--wo-cream-soft);
    font-family: var(--font-mono);
    font-size: .7rem; text-transform: uppercase; letter-spacing: .18em;
    font-weight: 500; margin-bottom: 1.1rem;
}
.wo-footer a {
    color: rgba(253,247,232,.72);
    text-decoration: none;
    font-size: .94rem; line-height: 1.55;
    border-bottom: 1px solid transparent;
    transition: color .12s, border-color .12s;
}
.wo-footer a:hover {
    color: var(--wo-primary);
    border-bottom-color: rgba(255,153,0,.45);
}
.wo-footer ul { list-style: none; padding: 0; margin: 0; }
.wo-footer ul li { margin-bottom: .55rem; }

.wo-footer-bottom {
    border-top: 1px solid rgba(253,247,232,.10);
    margin-top: 3rem; padding-top: 1.5rem;
    font-family: var(--font-mono);
    font-size: .75rem; letter-spacing: .02em;
    color: rgba(253,247,232,.52);
}
.wo-footer-bottom a { color: rgba(253,247,232,.6); }
/* SOCIAL-2026-06-12: footer social icons */
.wo-social { font-size: 1.15rem; line-height: 1; display: inline-flex; transition: color .15s ease, transform .15s ease; }
.wo-footer-bottom a.wo-social { color: rgba(253,247,232,.65); }
.wo-footer-bottom a.wo-social:hover { color: #ff9900; transform: translateY(-1px); }

/* wordmark on the dark surface - serif italic accent stays in orange */
.wo-footer .wo-wordmark { color: var(--wo-cream-soft); }
.wo-footer .wo-wordmark .wo-accent {
    color: var(--wo-primary);
    font-family: var(--font-serif); font-style: italic; font-weight: 400;
}
.wo-footer .brand-mark {
    background: var(--wo-primary);
    color: var(--wo-espresso);
}
/* a small editorial flourish - pulled from the editorial-mark idea */
.wo-footer-mark {
    font-family: var(--font-serif); font-style: italic;
    color: var(--wo-primary); font-size: 1.1rem; opacity: .9;
}

/* ============================================================================
 * FULL-SCREEN APP SHELL (top bar + main area, no marketing footer)
 * ============================================================================ */
.app-fullscreen {
    background: var(--wo-paper);
    height: 100vh;
    height: 100dvh;          /* respects mobile URL bar */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.app-bar {
    /* Universal pin - sits in the same spot on every page, doesn't move
       when you scroll. Same height, same padding, same background - every
       layout (marketing, main, fullscreen, admin) inherits this. */
    position: sticky;
    top: 0;
    z-index: 100;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: .75rem 1.5rem;
    background: rgba(255, 253, 246, .96);   /* cream-card with slight transparency */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--wo-line);
    height: 60px;
}
.app-bar__brand { display: flex; align-items: center; }
.app-bar__nav {
    display: flex; gap: 1.6rem; align-items: center; justify-content: center;
}
.app-bar__link {
    display: inline-flex; align-items: center; gap: .45rem;
    color: var(--wo-ink-2);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .94rem;
    letter-spacing: -.005em;
    text-decoration: none;
    padding: .35rem .1rem;
    border-bottom: 2px solid transparent;
    transition: color .12s, border-color .12s;
}
.app-bar__link i { color: var(--wo-primary-deep); font-size: 1rem; line-height: 1; }
.app-bar__link.is-active i { color: var(--wo-primary); }
@media (max-width: 1280px) {
    .app-bar__link span { display: none; }
    .app-bar__link i { font-size: 1.1rem; }
}
.app-bar__link:hover { color: var(--wo-ink); }
.app-bar__link.is-active {
    color: var(--wo-ink);
    border-bottom-color: var(--wo-primary);
}
/* NAV-DROPDOWNS (2026-06-16): items with sub-pages render as a Bootstrap
   dropdown. The trigger is a <button> styled to match the <a> links. */
button.app-bar__link { background: none; border-left: 0; border-top: 0; border-right: 0; cursor: pointer; }
.app-bar__navdrop { display: inline-flex; align-items: center; }
.app-bar__caret { font-size: .62rem !important; margin-left: .12rem; opacity: .65; }
.app-bar__navdrop .dropdown-menu { --bs-dropdown-min-width: 12rem; margin-top: .25rem; }
.app-bar__navdrop .dropdown-item.active,
.app-bar__navdrop .dropdown-item:active { background: var(--wo-paper-2, #f3eee5); color: var(--wo-ink); }
.app-bar__navdrop .dropdown-item i { color: var(--wo-primary-deep); }
/* Drawer (mobile) sub-page links sit indented under their parent. */
.app-drawer__link--sub { padding-left: 2.4rem; font-size: .9rem; opacity: .92; }
.app-bar__num {
    font-family: var(--font-mono);
    font-size: .68rem; letter-spacing: .08em;
    color: var(--wo-primary-deep);
    font-weight: 600;
}
.app-bar__actions { display: flex; align-items: center; gap: .4rem; }
.app-bar__me {
    background: transparent; border: none; padding: 2px;
    cursor: pointer; border-radius: 50%;
    transition: box-shadow .12s;
}
.app-bar__me:hover { box-shadow: 0 0 0 2px var(--wo-primary-soft); }
@media (max-width: 1100px) {
    .app-bar__num { display: none; }
    .app-bar__nav { gap: 1rem; }
}
@media (max-width: 900px) {
    .app-bar {
        /* NOTE (WORDMARK-NEVER-CUT-20260902): these two declarations are DEAD.
           A later @media (max-width: 900px) block near the end of this file
           re-declares grid-template-columns with !important and re-declares the
           gap, so nothing here wins. Left in place rather than "fixed", because
           editing a rule that cannot take effect is how you spend an afternoon
           wondering why your change did nothing. The live values are in the
           LOGO-OVERLAP-FIX / WORDMARK-NEVER-CUT block below. */
        grid-template-columns: auto auto 1fr auto;
        gap: .85rem;
    }
    .app-bar__nav { display: none; }
}

/* MOBILE-FIX-02 (2026-05-29): hamburger trigger (mobile only) */
.app-bar__hamburger {
    display: none;
    background: transparent; border: 0;
    width: 38px; height: 38px;
    align-items: center; justify-content: center;
    color: var(--wo-ink);
    cursor: pointer;
    border-radius: 6px;
    transition: background .15s;
}
.app-bar__hamburger i { font-size: 1.4rem; }
.app-bar__hamburger:hover { background: var(--wo-paper-2); }
@media (max-width: 900px) {
    .app-bar__hamburger { display: inline-flex; }
}

/* Slide-in drawer */
.app-drawer {
    position: fixed; inset: 0;
    z-index: 1100;
}
.app-drawer__backdrop {
    position: absolute; inset: 0;
    background: rgba(38, 27, 16, .42);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .22s ease;
}
/* MOBILE-FIX-03 (2026-05-29): drawer slides from the RIGHT side
   (closer to the hamburger's natural reach on mobile/tablet). */
.app-drawer__panel {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: min(320px, 86vw);
    background: var(--wo-card);
    border-left: 1px solid var(--wo-line);
    box-shadow: 0 0 60px rgba(17,16,12,.18);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .22s cubic-bezier(.2,.7,.2,1);
    overflow-y: auto;
}
.app-drawer.is-open .app-drawer__backdrop { opacity: 1; }
.app-drawer.is-open .app-drawer__panel    { transform: translateX(0); }
.app-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--wo-line);
}
.app-drawer__nav, .app-drawer__foot {
    display: flex; flex-direction: column;
    padding: .5rem 0;
}
.app-drawer__foot {
    margin-top: auto;
    border-top: 1px solid var(--wo-line);
    background: var(--wo-paper);
}
.app-drawer__link {
    display: flex; align-items: center; gap: .75rem;
    padding: .85rem 1.1rem;
    color: var(--wo-ink);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 500;
    background: transparent;
    border: 0;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: background .12s;
}
.app-drawer__link:hover { background: var(--wo-paper-2); }
.app-drawer__link.is-active {
    background: var(--wo-primary-soft);
    color: var(--wo-ink);
}
.app-drawer__link i {
    font-size: 1.15rem;
    color: var(--wo-primary-deep);
    width: 22px; text-align: center;
}
@media (prefers-reduced-motion: reduce) {
    .app-drawer__backdrop, .app-drawer__panel { transition: none; }
}

.app-content {
    flex: 1 1 auto;          /* fills whatever's left below the app-bar */
    min-height: 0;           /* lets children scroll instead of pushing parent */
    overflow: hidden;
}

/* ============================================================================
 * INBOX - 3-pane app (list · thread · details)
 * ============================================================================ */
.inbox-app {
    display: grid;
    grid-template-columns: 320px 1fr 360px;
    height: 100%;
    background: var(--wo-paper);
}
.inbox-app.is-details-hidden { grid-template-columns: 320px 1fr 0; }
@media (max-width: 1280px) {
    .inbox-app { grid-template-columns: 300px 1fr 320px; }
}
@media (max-width: 1100px) {
    .inbox-app { grid-template-columns: 280px 1fr; }
    .inbox-details { display: none !important; }
}
@media (max-width: 760px) {
    .inbox-app { grid-template-columns: 1fr; }
    .inbox-list { display: none; }   /* would toggle via JS in a real implementation */
}

/* Legacy .inbox-shell kept off - old wrapping is gone */
.inbox-shell { display: contents; }

/* INBOX-GRACEFUL-20260613: the thread first paints scrolled to the TOP, then
   JS snaps it to the newest message - a visible top-then-jump that reads as
   "broken for a second". Start the message area hidden and reveal it only
   once it's pinned to the bottom, so the load is a clean fade instead of a
   jump. JS adds .is-ready right after the initial pin(); the animation is a
   guaranteed fallback so the panel never stays blank if JS fails to run. */
.inbox-thread__messages {
    opacity: 0;
    animation: woThreadReveal .01s linear .5s forwards;
}
.inbox-thread__messages.is-ready {
    opacity: 1;
    animation: none;
    transition: opacity .18s ease;
}
@keyframes woThreadReveal { to { opacity: 1; } }

.inbox-list {
    border-right: 1px solid var(--wo-line);
    display: flex; flex-direction: column; min-height: 0;
    background: var(--wo-card);
}
.inbox-list__header { padding: 1.1rem 1.2rem .75rem; border-bottom: 1px solid var(--wo-line); background: var(--wo-card); }

/* Filter pill row above the list */
.inbox-filters {
    display: flex; gap: .35rem; margin-top: .9rem;
}
.inbox-filter {
    background: var(--wo-paper);
    color: var(--wo-ink-2);
    border: 1px solid var(--wo-line);
    border-radius: 999px;
    padding: .3rem .85rem;
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .14s;
}
.inbox-filter:hover { border-color: var(--wo-ink); color: var(--wo-ink); }
.inbox-filter.is-active {
    background: var(--wo-slab); color: var(--wo-on-slab);
    border-color: var(--wo-ink);
}
.inbox-search { position: relative; }
.inbox-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--wo-text-muted); }
.inbox-search input {
    width: 100%; background: var(--wo-paper);
    border: 1px solid var(--wo-line);
    border-radius: 4px;
    padding: .5rem .7rem .5rem 2rem;
    font-size: .88rem; font-family: var(--font-mono);
    transition: border-color .12s;
}
.inbox-search input:focus { outline: none; border-color: var(--wo-ink); background: var(--wo-card); }

/* INBOX-FIX-13 (2026-05-29): narrower list (340px) now that A-Z is snug
   next to other filter pills (no auto-margin spacer). When details panel
   is hidden, the grid collapses to 2 columns so the message view fills the
   freed space edge-to-edge. */
.inbox-app                    { grid-template-columns: 340px 1fr 360px !important; }
.inbox-app.is-details-hidden  { grid-template-columns: 340px 1fr        !important; }
@media (max-width: 1280px) {
    .inbox-app                    { grid-template-columns: 320px 1fr 320px !important; }
    .inbox-app.is-details-hidden  { grid-template-columns: 320px 1fr        !important; }
}
@media (max-width: 1100px) {
    .inbox-app                    { grid-template-columns: 280px 1fr !important; }
    .inbox-app.is-details-hidden  { grid-template-columns: 280px 1fr !important; }
}
@media (max-width: 760px) {
    .inbox-app                    { grid-template-columns: 1fr !important; }
    .inbox-app.is-details-hidden  { grid-template-columns: 1fr !important; }
}

/* When the details column is gone, hide the empty .inbox-details element
   completely so it doesn't reserve any space the grid couldn't reclaim. */
.inbox-app.is-details-hidden .inbox-details { display: none !important; }

/* INBOX-FIX-14 (2026-05-29): filter row stays on ONE line, no scroll, no
   vertical bounce. Pills shrink their padding instead of overflowing. */
.inbox-filters {
    flex-wrap: nowrap !important;
    overflow: visible !important;
    gap: .25rem !important;
    margin-top: .7rem !important;
}
.inbox-filters .inbox-filter {
    padding: .28rem .6rem !important;
    font-size: .72rem !important;
    flex: 0 0 auto;
    white-space: nowrap;
}
.inbox-filters .inbox-filter--sort {
    padding: .28rem .55rem !important;   /* even tighter for A-Z */
}

.inbox-search__clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: transparent; border: 0; color: var(--wo-text-muted);
    width: 22px; height: 22px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .15s, background .15s;
}
.inbox-search input:not(:placeholder-shown) ~ .inbox-search__clear {
    opacity: 1; pointer-events: auto;
}
.inbox-search__clear:hover { background: var(--wo-paper-2); color: var(--wo-ink); }

/* A-Z sort toggle - styled to match the filter pills.
   INBOX-FIX-13 (2026-05-29): removed margin-left:auto so A-Z sits snug
   against the Attachment pill (no gap). */
.inbox-filter--sort {
    font-family: var(--font-mono);
    letter-spacing: .04em;
    font-weight: 600;
}
.inbox-filter--sort.is-active {
    background: var(--wo-primary);
    color: var(--wo-ink);
    border-color: var(--wo-primary);
}

/* ============================================================
   INBOX-FIX-09/10 (2026-05-29): Categorized + collapsible files
   ============================================================ */
.files-cat { margin-bottom: .5rem; border-top: 1px solid var(--wo-line-soft); }
.files-cat:first-child { border-top: 0; }
.files-cat[open] { padding-bottom: .35rem; }
.files-cat__head {
    list-style: none;
    cursor: pointer;
    user-select: none;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--wo-text-muted);
    padding: .55rem 0;
    display: flex; align-items: center; gap: .35rem;
    transition: color .15s;
}
.files-cat__head::-webkit-details-marker { display: none; }
.files-cat__head:hover { color: var(--wo-ink); }
.files-cat__head i { color: var(--wo-primary-strong); }
.files-cat__head .num { margin-left: .25rem; }
.files-cat__chev {
    margin-left: auto;
    transition: transform .2s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1));
    color: var(--wo-text-muted) !important;
    font-size: .85rem;
}
.files-cat[open] .files-cat__chev { transform: rotate(180deg); }
.files-cat__body { padding-bottom: .35rem; }
.files-rows { display: flex; flex-direction: column; gap: .25rem; }
.details-file.files-row {
    background: transparent; border: 0; text-align: left; width: 100%;
    cursor: pointer; padding: .4rem .5rem; border-radius: 4px;
    display: flex; align-items: center; gap: .5rem;
    color: var(--wo-ink);
    transition: background .12s;
}
.details-file.files-row:hover { background: var(--wo-paper-2); }
.details-file.files-row em { margin-left: auto; color: var(--wo-text-muted); font-style: normal; font-size: .76rem; font-family: var(--font-mono); }

/* Image thumbnails grid */
.files-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.files-thumb {
    aspect-ratio: 1 / 1;
    background: var(--wo-paper-2);
    border: 1px solid var(--wo-line);
    border-radius: 4px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: transform .14s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1)), border-color .14s;
}
.files-thumb:hover { transform: scale(1.03); border-color: var(--wo-primary); }
.files-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The viewer overlay */
.wo-no-scroll { overflow: hidden !important; }
.file-viewer {
    position: fixed; inset: 0;
    /* MOBILE-Z5 (2026-05-30): bumped above the mobile details overlay
       (which uses 1091) so the viewer always sits on top, even if the
       auto-close JS hasn't fired yet. */
    z-index: 1100;
    display: none;
    animation: fvFadeIn .2s ease both;
}
.file-viewer.is-open { display: block; }
.file-viewer__backdrop {
    position: absolute; inset: 0;
    background: rgba(17, 16, 12, .72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.file-viewer__panel {
    position: relative;
    width: min(1080px, 96vw);
    height: min(86vh, 920px);
    margin: max(2vh, 24px) auto 0;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(0,0,0,.45);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: fvScaleIn .25s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1)) both;
}
.file-viewer__head {
    display: flex; align-items: center; gap: 1rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--wo-line);
    background: var(--wo-paper-2);
}
.file-viewer__title { font-weight: 600; display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; }
.file-viewer__title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-viewer__title i { color: var(--wo-primary-strong); }
.file-viewer__meta {
    font-family: var(--font-mono);
    font-size: .7rem; letter-spacing: .12em;
    color: var(--wo-text-muted);
    text-transform: uppercase;
}
.file-viewer__actions { display: flex; align-items: center; gap: .5rem; }
.file-viewer__body {
    flex: 1; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    background: #11100c;
    overflow: auto;
}
.file-viewer__body img,
.file-viewer__body video {
    max-width: 100%; max-height: 100%; display: block;
}
.file-viewer__body iframe {
    width: 100%; height: 100%; border: 0; background: var(--wo-card);
}
.file-viewer__audio {
    width: min(560px, 90%);
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 6px;
    padding: 1.25rem;
}
.file-viewer__audio audio { width: 100%; }
.file-viewer__nopreview {
    color: rgba(255,255,255,.85);
    text-align: center;
    padding: 2rem;
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.file-viewer__nopreview .btn { color: var(--wo-ink); }
@keyframes fvFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fvScaleIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .file-viewer, .file-viewer__panel { animation: none; }
}

/* Inline message-search bar (slides down from the conv header) */
.inbox-msg-search {
    display: none;
    align-items: center; gap: .5rem;
    padding: .55rem .85rem;
    background: var(--wo-card);
    border-bottom: 1px solid var(--wo-line);
    position: relative;
}
.inbox-msg-search.is-open { display: flex; animation: woSlideDown .25s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1)) both; }
.inbox-msg-search > i { color: var(--wo-text-muted); flex: 0 0 auto; }
.inbox-msg-search input[type="search"] {
    flex: 1 1 auto; border: 0; outline: none; background: transparent;
    font-family: var(--font-body); font-size: .94rem; color: var(--wo-ink);
}
.inbox-msg-search input[type="search"]::placeholder { color: var(--wo-text-muted); }
.inbox-msg-search__count {
    font-family: var(--font-mono); font-size: .75rem; color: var(--wo-text-muted);
    white-space: nowrap;
}
.inbox-msg-search__close {
    background: transparent; border: 0; color: var(--wo-text-muted);
    width: 26px; height: 26px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    transition: background .14s;
}
.inbox-msg-search__close:hover { background: var(--wo-paper-2); color: var(--wo-ink); }
@keyframes woSlideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.inbox-list__items { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex: 1; min-height: 0; }
.inbox-item a {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .8rem 1.05rem;
    text-decoration: none; color: inherit;
    border-bottom: 1px solid var(--wo-line-soft);
    transition: background .12s;
    position: relative;
}
.inbox-item a:hover { background: var(--wo-card); }
.inbox-item.is-active a {
    background: rgba(255,153,0,.18);   /* solid orange tint across the whole row */
}
.inbox-item.is-active a:hover {
    background: rgba(255,153,0,.24);
}
.inbox-item.is-active a::before {
    content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
    width: 4px; background: #ff9900;
    border-radius: 0 2px 2px 0;
}
.inbox-item.is-active .inbox-item__name { color: #8a3a00; }
.inbox-item.is-active .inbox-item__subject,
.inbox-item.is-active .inbox-item__preview { color: var(--wo-ink); opacity: .85; }
.inbox-item__avatar {
    width: 36px; height: 36px;
    background: var(--wo-slab); color: var(--wo-primary);
    font-family: var(--font-display); font-weight: 700;
    font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; border-radius: 4px;
}
.inbox-item__body { min-width: 0; flex: 1; }
.inbox-item__top { display: flex; justify-content: space-between; gap: .5rem; }
.inbox-item__name { font-weight: 700; color: var(--wo-ink); font-size: .92rem; }
.inbox-item__top time { font-family: var(--font-mono); font-size: .68rem; color: var(--wo-text-muted); white-space: nowrap; }
.inbox-item__subject { font-size: .82rem; color: var(--wo-ink-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.inbox-item__preview { font-size: .8rem; color: var(--wo-text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-item__unread {
    background: var(--wo-primary); color: var(--wo-ink);
    font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
    min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: 3px;
    display: inline-flex; align-items: center; justify-content: center;
    align-self: center;
}
.inbox-empty { padding: 3rem 1.5rem; text-align: center; color: var(--wo-text-muted); }
.inbox-empty i { font-size: 2.2rem; color: var(--wo-line); display: block; margin-bottom: .6rem; }

.inbox-thread {
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--wo-paper);
    min-height: 0;
    height: 100%;            /* fill the inbox-app grid cell */
    overflow: hidden;
}
.inbox-thread__header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--wo-line);
    background: var(--wo-card);
    border-right: 1px solid var(--wo-line);
}
.thread-name {
    font-family: var(--font-display);
    font-weight: 700; letter-spacing: -.02em;
    font-size: 1.15rem;
    color: var(--wo-ink);
}
.thread-sub {
    font-family: var(--font-mono);
    font-size: .76rem;
    color: var(--wo-text-muted);
}
.thread-sub i { color: var(--wo-primary-deep); }
.thread-sub a { color: var(--wo-ink-2); text-decoration: none; border-bottom: 1px dotted var(--wo-line); }
.thread-sub a:hover { color: var(--wo-ink); border-bottom-color: var(--wo-primary); }

.icon-btn {
    background: transparent; border: 1px solid transparent;
    width: 34px; height: 34px; border-radius: 4px;
    color: var(--wo-ink-2); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .12s;
    font-size: 1rem;
    position: relative;
}
.icon-btn:hover { background: var(--wo-paper); border-color: var(--wo-line); color: var(--wo-ink); }
.icon-btn.is-open { background: var(--wo-slab); color: var(--wo-primary); border-color: var(--wo-ink); }
.icon-btn.is-active {
    background: rgba(255,153,0,.12);
    border-color: rgba(255,153,0,.40);
    color:var(--wo-accent-text);
}
/* ============================================================
   NATIVE VIDEO CALL SCREEN (full-page, 1:1 + group mesh)
   ============================================================ */
.call-app {
    position: fixed; inset: 0;
    display: grid;
    grid-template-rows: 60px 1fr 84px;
    grid-template-columns: 1fr 0;
    grid-template-areas:
        "head head"
        "stage chat"
        "bar  bar";
    background: #0c0a08;
    color: #fff;
    z-index: 500;
    transition: grid-template-columns .25s ease;
}
.call-app.has-chat-open {
    grid-template-columns: 1fr min(360px, 90vw);
}
.call-head  { grid-area: head; }
.call-stage { grid-area: stage; }
.call-bar   { grid-area: bar; }
.call-chat  { grid-area: chat; }
.call-head {
    display: flex; align-items: center; gap: 14px;
    padding: 0 18px;
    background: rgba(20,15,10,.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.call-head__back {
    color: #fff; text-decoration: none;
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.06);
    transition: background .12s;
}
.call-head__back:hover { background: rgba(255,255,255,.14); color: #fff; }
.call-head__brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; }
.call-head__brand .brand-mark { background: #ff9900; width: 18px; height: 18px; border-radius: 4px; }
.call-head__brand .wo-wordmark { color: #fff; font-size: 1rem; }
.call-head__brand .wo-wordmark .wo-accent { color: #ff9900; }
.call-head__dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.4); margin: 0 2px; }
.call-head__label { font-size: .82rem; color: rgba(255,255,255,.65); letter-spacing: .04em; text-transform: uppercase; }
.call-head__meta {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: .82rem; color: rgba(255,255,255,.75);
    padding: 6px 12px; background: rgba(255,255,255,.06); border-radius: 999px;
}
.call-head__count::after { content: ' in call'; color: rgba(255,255,255,.5); }
.call-head__sep { opacity: .4; }
.call-head__actions { display: flex; gap: 6px; }
.call-head__btn {
    background: rgba(255,255,255,.06); border: 0; color: #fff;
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .12s;
}
.call-head__btn:hover { background: rgba(255,255,255,.14); }

/* ─── Stage / video grid ─── */
.call-stage {
    position: relative;
    overflow: hidden;
    padding: 16px;
}
.call-empty {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 32px;
    color: rgba(255,255,255,.7);
}
.call-empty[hidden] { display: none; }
.call-empty__icon {
    width: 80px; height: 80px; border-radius: 50%;
    background: rgba(255,255,255,.06);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 32px; color: #ff9900;
    margin-bottom: 16px;
    animation: callPulse 2s ease-in-out infinite;
}
@keyframes callPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,153,0,.55); }
    50%     { box-shadow: 0 0 0 16px rgba(255,153,0,0); }
}
.call-empty h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; margin-bottom: 6px; color: #fff; }
.call-empty p { font-size: .94rem; margin-bottom: 12px; }
.call-empty__link {
    font-family: var(--font-mono); font-size: .82rem;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    padding: 10px 16px; border-radius: 8px;
    margin-bottom: 16px;
    color: #ff9900;
    word-break: break-all;
}

.call-remotes {
    display: grid; gap: 12px;
    width: 100%; height: 100%;
    /* grid-template adjusted via JS based on participant count */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    grid-auto-rows: 1fr;
}
.call-stage[data-count="1"] .call-remotes { grid-template-columns: 1fr; }
.call-stage[data-count="2"] .call-remotes { grid-template-columns: 1fr 1fr; }
.call-stage[data-count="3"] .call-remotes,
.call-stage[data-count="4"] .call-remotes { grid-template-columns: 1fr 1fr; }
.call-stage[data-count="5"] .call-remotes,
.call-stage[data-count="6"] .call-remotes { grid-template-columns: repeat(3, 1fr); }
.call-stage[data-count="7"] .call-remotes,
.call-stage[data-count="8"] .call-remotes,
.call-stage[data-count="9"] .call-remotes { grid-template-columns: repeat(3, 1fr); }

.call-tile {
    position: relative;
    background: #1c1612;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.4);
}
/* CALL-FIX-04 (2026-05-29): remote tiles use object-fit:contain so a portrait
   phone camera doesn't get zoomed/cropped when shown in a landscape desktop
   tile. The empty side gets a soft espresso fill so the letterbox looks
   intentional. Self-view (PIP) keeps `cover` because it's small and we
   want it to fill its mini frame. */
.call-tile video {
    width: 100%; height: 100%;
    object-fit: contain;
    background: #0c0a08;
}
.call-tile--self video {
    object-fit: cover;       /* PIP fills its mini-frame, ok to crop */
    transform: scaleX(-1);   /* mirror self-view */
}
.call-tile--self {
    position: absolute;
    bottom: 16px; right: 16px;
    width: min(220px, 22vw);
    aspect-ratio: 16/10;
    z-index: 10;
    border: 2px solid rgba(255,153,0,.6);
    box-shadow: 0 8px 28px rgba(0,0,0,.6);
    transition: transform .12s;
}
.call-tile--self:hover { transform: scale(1.02); }
.call-tile.cam-off video { visibility: hidden; }
.call-tile__placeholder {
    position: absolute; inset: 0;
    display: none;
    align-items: center; justify-content: center;
    background: linear-gradient(135deg, #261b10 0%, #1a1208 100%);
}
.call-tile.cam-off .call-tile__placeholder { display: flex; }
.call-avatar {
    width: 88px; height: 88px; border-radius: 50%;
    background: #ff9900; color: #261b10;
    font-family: var(--font-display); font-weight: 700; font-size: 32px;
    display: inline-flex; align-items: center; justify-content: center;
}
.call-tile__label {
    position: absolute; bottom: 12px; left: 12px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(8px);
    padding: 5px 10px; border-radius: 999px;
    font-size: .82rem; font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px;
}
.call-host-pill {
    background: #ff9900; color: #261b10;
    font-size: .62rem; padding: 1px 6px; border-radius: 3px;
    letter-spacing: .04em; font-weight: 800;
}
.call-tile__bad {
    position: absolute; top: 12px; right: 12px;
    background: rgba(185,28,28,.85);
    color: #fff;
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.call-tile.is-reconnecting::after {
    content: 'Reconnecting...';
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    color: rgba(255,255,255,.85);
    font-family: var(--font-mono); font-size: .9rem;
}
.call-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.call-dot--green { background: #1f7a3a; box-shadow: 0 0 0 2px rgba(31,122,58,.3); }

/* ─── Bottom control bar ─── */
.call-bar {
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(20,15,10,.85);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,.06);
    position: relative;
}
.call-bar__left, .call-bar__center, .call-bar__right {
    display: flex; gap: 10px; align-items: center;
    flex: 1;
}
.call-bar__left { justify-content: flex-end; }
.call-bar__center { justify-content: center; flex: 0; }
.call-bar__right { justify-content: flex-start; }
.call-ctrl {
    background: rgba(255,255,255,.08);
    border: 0;
    color: #fff;
    border-radius: 12px;
    padding: 10px 16px;
    display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
    font-size: .72rem;
    cursor: pointer;
    transition: background .14s, transform .08s;
    font-family: inherit;
    min-width: 76px;
}
.call-ctrl i { font-size: 1.35rem; }
.call-ctrl:hover { background: rgba(255,255,255,.16); }
.call-ctrl:active { transform: scale(.97); }
.call-ctrl[data-on="0"] {
    background: rgba(185,28,28,.85);
}
.call-ctrl[data-on="0"]:hover { background: rgba(220,28,28,.95); }
.call-ctrl.is-on { background: rgba(255,153,0,.9); color: #261b10; }
.call-ctrl.is-on:hover { background: #ff9900; }
.call-ctrl--end {
    background: #b91c1c !important;
    padding: 12px 22px;
    border-radius: 999px;
    min-width: 110px;
}
.call-ctrl--end:hover { background: #d12727 !important; }

/* ============================================================
   CALL-FIX-03 (2026-05-29): Full call-screen theme refresh
   ============================================================
   Goals
     - Match the rest of the site (warm-paper + espresso + WRK orange)
     - Single hangup per device (floating on mobile, bar on desktop)
     - Spotlight layout actually changes visually
     - Portrait tiles on portrait phones (9/16 not 16/9)
     - Subtle "luxury" accents: gold ring on active state, smooth animation
============================================================ */

/* Warm-paper substrate inside the call shell */
.call-app {
    background:
        radial-gradient(circle at 20% 0%, rgba(255,153,0,.10), transparent 55%),
        radial-gradient(circle at 80% 100%, rgba(255,153,0,.07), transparent 50%),
        linear-gradient(180deg, #1a140d 0%, #0e0a06 100%);
}
.call-head, .call-bar {
    /* CALL-FIX-11 (2026-05-30): warmer translucent backdrop so the cream
       control buttons read clearly against it. Subtle gold hairline borders. */
    background:
        linear-gradient(180deg, rgba(38, 27, 16, .94) 0%, rgba(26, 18, 10, .94) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-color: rgba(217, 120, 0, .22) !important;
    box-shadow: 0 1px 0 rgba(255, 200, 80, .08) inset;
}
.call-bar { border-top: 1px solid rgba(217, 120, 0, .22); }
.call-head { border-bottom: 1px solid rgba(217, 120, 0, .22); }

/* CALL-FIX-13 (2026-05-30): single equidistant row. No more left/center/right
   asymmetry - all buttons line up with the same gap, centered in the bar. */
.call-bar--flat { padding: 14px 18px !important; justify-content: center; }
.call-bar--flat .call-bar__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: nowrap;
    max-width: 100%;
}
.call-bar--flat .call-bar__left,
.call-bar--flat .call-bar__center,
.call-bar--flat .call-bar__right { display: none !important; }
@media (max-width: 720px) {
    .call-bar--flat .call-bar__row {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
}

/* CALL-FIX-11 (2026-05-30): Editorial-precision control buttons.
   Cream-paper interior, espresso ink text + icon, 1px gold hairline.
   Active state uses the full orange gradient with espresso text - same
   treatment as the NEW badge on the top nav, so the call view feels
   visually anchored to the rest of the brand. */
.call-ctrl {
    background: linear-gradient(180deg, #fffdf6 0%, #faf2dd 100%) !important;
    color: #261b10 !important;
    border: 1px solid rgba(217, 120, 0, .22) !important;
    border-radius: 14px !important;
    padding: 9px 16px !important;
    min-width: 72px;
    display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
    transition: transform .12s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1)),
                background .15s, border-color .14s,
                box-shadow .22s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1)) !important;
    box-shadow: 0 1px 0 rgba(255, 245, 220, .6) inset,
                0 2px 4px rgba(38, 27, 16, .15);
}
.call-ctrl i {
    color: #d97800 !important;     /* WRK primary-strong */
    font-size: 1.32rem !important;
}
.call-ctrl span {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #4a3b29;
    font-weight: 600;
}
.call-ctrl:hover {
    transform: translateY(-1px);
    border-color: rgba(217, 120, 0, .5) !important;
    box-shadow: 0 1px 0 rgba(255, 245, 220, .6) inset,
                0 6px 18px rgba(38, 27, 16, .25),
                0 0 0 3px rgba(255, 153, 0, .12);
}
.call-ctrl:active { transform: translateY(0) scale(.97); }

/* Active state: full WRK orange gradient + espresso ink + soft halo */
.call-ctrl.is-on {
    background: linear-gradient(135deg, #ffd58a 0%, #ff9900 60%, #e6850a 100%) !important;
    color: #1a0e02 !important;
    border-color: rgba(217, 120, 0, .85) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 6px 22px rgba(255, 153, 0, .55),
                0 0 0 3px rgba(255, 200, 80, .25);
}
.call-ctrl.is-on i,
.call-ctrl.is-on span {
    color: #1a0e02 !important;
}

/* Mute / cam-off "off" state: deep warm brick, not screaming red */
.call-ctrl[data-on="0"] {
    background: linear-gradient(180deg, #c14a3a 0%, #8b2a1f 100%) !important;
    border-color: rgba(177, 61, 45, .5) !important;
    color: #fff5e6 !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset,
                0 4px 14px rgba(139, 42, 31, .45);
}
.call-ctrl[data-on="0"] i,
.call-ctrl[data-on="0"] span { color: #fff5e6 !important; }
.call-ctrl[data-on="0"]:hover {
    background: linear-gradient(180deg, #d9594a 0%, #9a3325 100%) !important;
    border-color: rgba(217, 71, 50, .65) !important;
}

/* CALL-FIX-15 (2026-05-30): Subtle "burnished brick" Leave that matches
   the editorial cream/paper feel of the other buttons - same surface,
   refined red ink, gold flare on hover. Still unmistakably the danger
   action, just not harsh. */
.call-ctrl--end {
    background: linear-gradient(180deg, #fbf5e8 0%, #f4ead1 100%) !important;
    color: #8a261b !important;
    border: 1px solid rgba(138, 38, 27, .40) !important;
    border-radius: 14px !important;
    padding: 9px 22px !important;
    min-width: 90px;
    margin-left: 12px;          /* small extra gap from the previous button */
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 2px 6px rgba(138, 38, 27, .10) !important;
    transition: transform .12s, background .14s, box-shadow .22s, border-color .14s, color .14s !important;
}
.call-ctrl--end i {
    color: #8a261b !important;
    font-size: 1.4rem !important;
    transition: color .14s !important;
}
.call-ctrl--end span {
    color: #8a261b !important;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    transition: color .14s !important;
}
.call-ctrl--end:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #fbf5e8 0%, #efdfb6 100%) !important;
    border-color: rgba(138, 38, 27, .70) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 8px 22px rgba(138, 38, 27, .18),
                0 0 0 3px rgba(255, 153, 0, .22) !important;   /* gold flare */
}
.call-ctrl--end:hover i,
.call-ctrl--end:hover span { color: #6e1a12 !important; }
/* Pressed = the only state that goes fully saturated, so the click reads
   as "yes, that did something". Still warm, not harsh. */
.call-ctrl--end:active {
    transform: translateY(0) scale(.97);
    background: linear-gradient(180deg, #9a2a1d 0%, #7a1f15 100%) !important;
    border-color: rgba(138, 38, 27, .85) !important;
}
.call-ctrl--end:active i,
.call-ctrl--end:active span { color: #fbf5e8 !important; }
@media (prefers-reduced-motion: reduce) {
    .call-ctrl, .call-ctrl--end { transition: none !important; transform: none !important; }
}

/* ─── Layout: Grid vs Spotlight ─── */
.call-stage[data-layout="spotlight"] .call-remotes {
    display: grid;
    grid-template-columns: 1fr 180px;
    grid-template-rows: 1fr;
    gap: 8px;
    grid-auto-flow: column;
}
.call-stage[data-layout="spotlight"] .call-remotes > :first-child {
    grid-row: 1;
    grid-column: 1;
}
.call-stage[data-layout="spotlight"] .call-remotes > :not(:first-child) {
    grid-row: span 1;
    grid-column: 2;
    max-height: 140px;
}

/* ─── Mobile: bar wraps + hangup consolidation ─── */
@media (max-width: 720px) {
    .call-bar {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px;
    }
    .call-bar__left, .call-bar__right {
        flex: 1 1 100%;
        justify-content: center;
        order: 2;
        gap: 6px;
    }
    .call-bar__center { display: none; }     /* mobile uses the floating end button instead */
    /* CALL-FIX-11: keep editorial-cream feel on mobile but more compact. */
    .call-ctrl {
        min-width: 58px !important;
        padding: 7px 10px !important;
        border-radius: 12px !important;
        gap: 3px;
    }
    .call-ctrl i { font-size: 1.18rem !important; }
    .call-ctrl span { font-size: .62rem !important; letter-spacing: .07em; }

    /* CALL-FIX-04 (2026-05-29): use a portrait-friendly tall aspect on phones
       (3:5, less extreme than 9:16 so a landscape remote feed isn't dwarfed),
       and don't force the inner <video> to that aspect - let it render at its
       natural ratio inside the tile with letterbox bars. */
    .call-tile {
        aspect-ratio: 3 / 5 !important;
    }
    .call-tile video {
        aspect-ratio: auto !important;     /* let video render natural */
    }
    .call-stage[data-layout="spotlight"] .call-remotes {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }
    .call-stage[data-layout="spotlight"] .call-remotes > :not(:first-child) {
        grid-column: 1;
        max-height: 88px;
    }
}

/* CALL-FIX-09 (2026-05-30): In-call message bubble notifications.
   When a chat message arrives during a call and the chat sidebar is closed,
   a bubble slides in from the right at the top of the screen, sits for 3.5s,
   then slides out. Multiple bubbles stack vertically. Tap to open chat. */
.call-bubble-stack {
    position: fixed;
    top: 72px;
    right: 16px;
    z-index: 1080;
    display: flex; flex-direction: column; gap: 8px;
    max-width: min(340px, 90vw);
    pointer-events: none;            /* container ignores clicks; individual bubbles enable */
}
.call-bubble {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(38, 27, 16, .96) 0%, rgba(26, 18, 10, .96) 100%);
    border: 1px solid rgba(255, 222, 174, .22);
    border-left: 3px solid var(--wo-primary, #ff9900);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
    color: #fef6e3;
    text-align: left;
    cursor: pointer;
    min-width: 220px;
    opacity: 0;
    transform: translateX(40px);
    transition: opacity .26s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1)),
                transform .26s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1));
}
.call-bubble.is-in  { opacity: 1; transform: translateX(0); }
.call-bubble.is-out { opacity: 0; transform: translateX(40px); }
.call-bubble:hover { border-color: rgba(255, 200, 80, .45); }
.call-bubble__avatar {
    flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, #ffd58a 0%, #ff9900 100%);
    color: #1a0e02;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .8rem;
    font-family: var(--font-display);
}
.call-bubble__body {
    flex: 1; min-width: 0;
}
.call-bubble__who {
    font-weight: 600; font-size: .82rem;
    color: var(--wo-primary, #ff9900);
    margin-bottom: 2px;
}
.call-bubble__text {
    font-size: .85rem; line-height: 1.35;
    color: #fef6e3;
    word-wrap: break-word;
}
/* CALL-FIX-10 (2026-05-30): explicit "Reply" CTA on each bubble */
.call-bubble__reply {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px;
    background: rgba(255, 153, 0, .18);
    border: 1px solid rgba(255, 200, 80, .35);
    color: var(--wo-primary, #ff9900);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}
.call-bubble:hover .call-bubble__reply {
    background: rgba(255, 153, 0, .3);
    color: #fef6e3;
}
.call-bubble__reply i { font-size: .8rem; }

/* CALL-FIX-10: unread badge on the Chat button */
#ctlChat { position: relative; }
.call-chat-unread {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    background: linear-gradient(135deg, #ffd58a 0%, #ff9900 100%);
    color: #1a0e02;
    border: 2px solid rgba(20, 15, 10, .9);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: .65rem;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(255, 153, 0, .45);
}
.call-chat-unread.pop {
    animation: chatUnreadPop .35s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes chatUnreadPop {
    0%   { transform: scale(.6); }
    60%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}
/* Mobile placement: under the brand bar, full width */
@media (max-width: 720px) {
    .call-bubble-stack {
        top: 60px;
        right: 8px; left: 8px;
        max-width: none;
    }
    .call-bubble { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .call-bubble { transition: opacity .15s ease; transform: none !important; }
}

/* CALL-FIX-14 (2026-05-30): WO-themed Leave confirm modal.
   Replaces the browser's confirm() dialog with on-brand UX. */
.call-leave-confirm {
    position: fixed; inset: 0;
    z-index: 1110;        /* above the call view and invite modal */
}
.call-leave-confirm[hidden] { display: none !important; }
.call-leave-confirm__backdrop {
    position: absolute; inset: 0;
    background: rgba(20, 14, 8, .68);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .2s;
}
.call-leave-confirm__panel {
    position: absolute; left: 50%; top: 22vh;
    transform: translateX(-50%) translateY(-12px) scale(.97);
    width: min(440px, 92vw);
    background: linear-gradient(180deg, var(--wo-card, #fffdf6) 0%, var(--wo-paper, #fbf5e8) 100%);
    border: 1px solid var(--wo-line, #d6cdb7);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(38, 27, 16, .45);
    opacity: 0;
    transition: opacity .22s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1)),
                transform .22s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1));
    overflow: hidden;
}
.call-leave-confirm.is-open .call-leave-confirm__backdrop { opacity: 1; }
.call-leave-confirm.is-open .call-leave-confirm__panel    { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.call-leave-confirm__head {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 1.2rem 1.4rem 0.8rem;
}
/* CALL-FIX-15 (2026-05-30): softer brick + warm cream highlight on the
   modal's danger icon - pairs with the new Confirm button below. */
.call-leave-confirm__icon {
    flex-shrink: 0;
    width: 48px; height: 48px;
    background: linear-gradient(180deg, #9a2a1d 0%, #7a1f15 100%);
    color: #fbf5e8;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset,
                0 4px 10px rgba(138, 38, 27, .22);
}
.call-leave-confirm__icon i { font-size: 1.4rem; }
.call-leave-confirm__head h3 {
    margin: 2px 0 4px; font-family: var(--font-display);
    font-size: 1.15rem; color: var(--wo-ink, #261b10);
    font-weight: 700;
}
.call-leave-confirm__sub {
    color: var(--wo-text-muted, #7a6a52);
    font-size: .85rem; margin: 0;
}
.call-leave-confirm__foot {
    display: flex; justify-content: flex-end; gap: .6rem;
    padding: .9rem 1.4rem 1.1rem;
}
/* CALL-FIX-15 (2026-05-30): Confirm button in the Leave modal matches the
   bar Leave - burnished brick on cream, gold flare on hover. */
.call-leave-confirm__foot .btn-danger {
    background: linear-gradient(180deg, #fbf5e8 0%, #f4ead1 100%);
    border: 1px solid rgba(138, 38, 27, .40);
    color: #8a261b;
    font-weight: 700;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 2px 6px rgba(138, 38, 27, .10);
    transition: transform .12s, background .14s, box-shadow .22s, border-color .14s, color .14s;
}
.call-leave-confirm__foot .btn-danger:hover {
    background: linear-gradient(180deg, #fbf5e8 0%, #efdfb6 100%);
    border-color: rgba(138, 38, 27, .70);
    color: #6e1a12;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 8px 22px rgba(138, 38, 27, .18),
                0 0 0 3px rgba(255, 153, 0, .22);  /* gold flare */
}
.call-leave-confirm__foot .btn-danger:active {
    transform: scale(.97);
    background: linear-gradient(180deg, #9a2a1d 0%, #7a1f15 100%);
    color: #fbf5e8;
    border-color: rgba(138, 38, 27, .85);
}

/* CALL-FIX-14 (2026-05-30): Chat header Leave button. Pill with red accent. */
.call-chat__actions {
    display: flex; align-items: center; gap: .5rem;
}
/* CALL-FIX-15 (2026-05-30): match the bar Leave - subtle burnished brick. */
.call-chat__leave {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: 6px 12px;
    background: linear-gradient(180deg, #fbf5e8 0%, #f4ead1 100%);
    color: #8a261b;
    border: 1px solid rgba(138, 38, 27, .40);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: .7rem; font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 2px 6px rgba(138, 38, 27, .10);
    transition: transform .12s, background .14s, box-shadow .22s, border-color .14s, color .14s;
}
.call-chat__leave:hover {
    background: linear-gradient(180deg, #fbf5e8 0%, #efdfb6 100%);
    border-color: rgba(138, 38, 27, .70);
    color: #6e1a12;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 6px 16px rgba(138, 38, 27, .18),
                0 0 0 3px rgba(255, 153, 0, .22);  /* gold flare */
}
.call-chat__leave:active {
    transform: scale(.97);
    background: linear-gradient(180deg, #9a2a1d 0%, #7a1f15 100%);
    color: #fbf5e8;
    border-color: rgba(138, 38, 27, .85);
}
.call-chat__leave i { font-size: .95rem; }

/* CALL-FIX-06 (2026-05-30): Invite modal */
.call-invite {
    position: fixed; inset: 0; z-index: 1100;
}
.call-invite[hidden] { display: none !important; }
.call-invite__backdrop {
    position: absolute; inset: 0;
    background: rgba(20, 14, 8, .6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .2s;
}
.call-invite__panel {
    position: absolute; left: 50%; top: 14vh;
    transform: translateX(-50%) translateY(-12px) scale(.97);
    width: min(520px, 92vw);
    background: linear-gradient(180deg, var(--wo-card, #fffdf6) 0%, var(--wo-paper, #fbf5e8) 100%);
    border: 1px solid var(--wo-line, #d6cdb7);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(38, 27, 16, .35);
    opacity: 0;
    transition: opacity .22s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1)),
                transform .22s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1));
    overflow: hidden;
}
.call-invite.is-open .call-invite__backdrop { opacity: 1; }
.call-invite.is-open .call-invite__panel    { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.call-invite__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--wo-line, #d6cdb7);
    background: var(--wo-paper-2, #f4ecd6);
}
.call-invite__head h3 {
    margin: 0; font-family: var(--font-display);
    font-size: 1.05rem; color: var(--wo-ink, #261b10);
}
.call-invite__head i { color: var(--wo-primary-strong); }
.call-invite__body  { padding: 1rem 1.2rem; }
.call-invite__hint  { color: var(--wo-text-muted); margin-bottom: .5rem; }
.call-invite__hint code { background: var(--wo-paper-2); padding: 1px 5px; border-radius: 3px; color: var(--wo-ink); }
.call-invite__textarea {
    width: 100%;
    background: var(--wo-card, #fff);
    border: 1px solid var(--wo-line, #d6cdb7);
    border-radius: 6px;
    padding: .6rem .75rem;
    font-family: var(--font-mono);
    font-size: .88rem;
    color: var(--wo-ink);
    resize: vertical;
}
.call-invite__textarea:focus {
    outline: none;
    border-color: var(--wo-primary);
    box-shadow: 0 0 0 3px rgba(255, 153, 0, .18);
}
.call-invite__results {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--wo-line-soft);
    max-height: 200px;
    overflow-y: auto;
}
/* CALL-FIX-12 (2026-05-30): Copy-link section inside invite modal */
.call-invite__divider {
    display: flex; align-items: center;
    margin: 1rem 0 .75rem;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--wo-text-muted);
}
.call-invite__divider::before,
.call-invite__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--wo-line);
}
.call-invite__divider span { padding: 0 .75rem; }
.call-invite__copylink {
    display: flex; align-items: center; gap: .5rem;
}
.call-invite__linkfield {
    flex: 1;
    background: var(--wo-paper-2, #f4ecd6);
    border: 1px solid var(--wo-line, #d6cdb7);
    border-radius: 6px;
    padding: .5rem .7rem;
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--wo-ink);
}
.call-invite__linkfield:focus {
    outline: none;
    border-color: var(--wo-primary);
    background: var(--wo-card);
}

/* CALL-FIX-12 (2026-05-30): in fullscreen, auto-hide head + bar after 2s idle.
   Hovering or moving the mouse brings them back. */
body.call-idle .call-head,
body.call-idle .call-bar,
body.call-idle .call-end-floating {
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}
.call-head, .call-bar, .call-end-floating {
    transition: opacity .25s ease;
}
body.call-idle .call-app { cursor: none; }
.call-invite__foot {
    display: flex; justify-content: flex-end; gap: .5rem;
    padding: .75rem 1.2rem;
    border-top: 1px solid var(--wo-line, #d6cdb7);
    background: var(--wo-paper-2, #f4ecd6);
}

/* CALL-FIX-05 (2026-05-29): connection-status banner */
.call-status-banner {
    position: fixed;
    top: 70px; left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    background: linear-gradient(180deg, #2c1d10 0%, #1d130b 100%);
    border: 1px solid rgba(255, 153, 0, .35);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,.5);
    max-width: 92vw;
    animation: csb-pop .25s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1)) both;
}
.call-status-banner__inner {
    display: flex; align-items: center; gap: .85rem;
    padding: .8rem 1rem;
    color: #fef6e3;
}
.call-status-banner__inner > i {
    font-size: 1.5rem;
    color: #ff9900;
    flex-shrink: 0;
}
.call-status-banner__inner strong { color: #fef6e3; }
.call-status-banner__inner .small { color: rgba(254, 246, 227, .72); font-size: .78rem; }
.call-status-banner .btn {
    background: linear-gradient(135deg, #ffd58a 0%, #ff9900 100%);
    color: #1a0e02; border: 0; font-weight: 600;
    box-shadow: 0 2px 8px rgba(255, 153, 0, .35);
}
.call-status-banner .btn:hover { filter: brightness(1.07); }
@keyframes csb-pop {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.95); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* CALL-FIX-05 (2026-05-29): on mobile, when chat is open, the call view
   shrinks to a small floating PIP at top-right while the chat takes the
   full screen. Tap the PIP to return to the call. */
@media (max-width: 720px) {
    .call-app.has-chat-open .call-stage {
        position: fixed;
        top: 56px; right: 8px;
        width: 120px; height: 200px;
        z-index: 1095;
        border-radius: 12px;
        overflow: hidden;
        border: 2px solid rgba(255, 153, 0, .6);
        box-shadow: 0 10px 30px rgba(0,0,0,.5);
        background: #0c0a08;
    }
    .call-app.has-chat-open .call-stage::after {
        content: 'Tap to return';
        position: absolute;
        bottom: 0; left: 0; right: 0;
        background: rgba(20, 15, 10, .8);
        color: #fef6e3;
        font-size: .65rem;
        text-align: center;
        padding: 3px;
        pointer-events: none;
    }
    .call-app.has-chat-open .call-tile--self {
        bottom: 22px; right: 4px;
        width: 36px; height: 50px;
        border-width: 1px;
    }
    .call-app.has-chat-open .call-bar {
        display: none;        /* hide the bar; rely on floating End + chat composer */
    }
    .call-app.has-chat-open .call-chat {
        position: fixed; inset: 0;
        width: 100% !important; height: 100% !important;
        max-width: none !important;
        z-index: 1090;
        border: 0;
        border-radius: 0;
    }
    .call-app.has-chat-open .call-chat__head h3::after {
        content: ' · call ongoing';
        color: var(--wo-primary, #ff9900);
        font-weight: 400;
        font-size: .8rem;
        margin-left: .25rem;
    }
}

/* Always-visible safety hangup, mobile-only.
   Premium pill with subtle gold ring on hover. */
.call-end-floating {
    position: fixed;
    top: 12px; right: 12px;
    z-index: 1090;
    background: linear-gradient(180deg, #c12121 0%, #8b1414 100%);
    color: #fff;
    border: 1px solid rgba(255, 222, 174, .25);
    width: 48px; height: 48px;
    border-radius: 999px;
    display: none;
    align-items: center; justify-content: center;
    box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 0 0 rgba(255, 200, 80, 0);
    cursor: pointer;
    transition: transform .12s, background .14s, box-shadow .22s;
}
.call-end-floating i { font-size: 1.35rem; }
.call-end-floating:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 0 4px rgba(255, 200, 80, .35);
}
.call-end-floating:active { transform: scale(.95); }
/* ONLY shown on mobile / tablet (desktop uses the bar's End button) */
@media (max-width: 720px) {
    .call-app .call-end-floating { display: inline-flex; }
}

/* ─── Toast inside call ─── */
.call-toast {
    position: fixed; bottom: 110px; left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(20,15,10,.92);
    border: 1px solid rgba(255,153,0,.4);
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: .9rem;
    opacity: 0;
    transition: opacity .2s, transform .2s;
    z-index: 1000;
}
.call-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ─── Pre-flight modal ─── */
.call-preflight {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(0,0,0,.88);
    display: flex; align-items: center; justify-content: center;
    transition: opacity .25s;
}
.call-preflight.is-hidden { opacity: 0; pointer-events: none; }
.call-preflight__panel {
    background: #1c1612;
    color: #fff;
    border-radius: 18px;
    padding: 28px;
    width: min(540px, 92vw);
    box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.call-preflight__panel h2 {
    font-family: var(--font-display);
    font-weight: 700; font-size: 1.6rem; margin: 0 0 4px;
}
.call-preflight__sub { color: rgba(255,255,255,.65); margin-bottom: 18px; }
.call-preflight__preview {
    background: #0c0a08;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16/9;
    margin-bottom: 16px;
}
.call-preflight__preview video {
    width: 100%; height: 100%; object-fit: cover;
    transform: scaleX(-1);
}
.call-preflight__row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-bottom: 12px;
}
.call-preflight__row label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: .78rem; color: rgba(255,255,255,.65);
}
.call-preflight__row select {
    background: #0c0a08;
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    padding: 8px 10px;
    border-radius: 8px;
    font-family: inherit; font-size: .9rem;
}
.call-pf-toggle {
    flex-direction: row !important;
    align-items: center;
    gap: 8px !important;
    cursor: pointer;
}
.call-pf-toggle input[type="checkbox"] { accent-color: #ff9900; }
.call-preflight__actions {
    display: flex; justify-content: flex-end; gap: 10px;
    margin-top: 20px;
}
.call-preflight__actions .btn-dark {
    background: #ff9900; border-color: #ff9900; color: #261b10; font-weight: 700;
}
.call-preflight__actions .btn-dark:hover { background: #ffaa1f; border-color: #ffaa1f; color: #261b10; }
.call-preflight__hint { font-size: .82rem; color: #ff6b6b; margin-top: 12px; }

/* ───────── In-call chat sidebar ───────── */
.call-chat {
    background: #14100a;
    border-left: 1px solid rgba(255,255,255,.08);
    display: flex; flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.call-chat[hidden] { display: none; }
.call-chat__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(20,15,10,.85);
}
.call-chat__head h3 {
    margin: 0; font-family: var(--font-display);
    font-weight: 700; font-size: 1.05rem;
}
.call-chat__close {
    /* CALL-FIX-03 (2026-05-29): bigger + clearer on mobile so user can find it. */
    background: rgba(255, 222, 174, .12); border: 1px solid rgba(255, 222, 174, .15); color: #fef6e3;
    width: 38px; height: 38px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .12s, border-color .14s;
}
.call-chat__close i { font-size: 1.05rem; }
.call-chat__close:hover { background: rgba(255, 222, 174, .22); border-color: rgba(255, 200, 80, .35); }
.call-chat__messages {
    flex: 1; overflow-y: auto;
    padding: 14px;
    display: flex; flex-direction: column; gap: 8px;
}
.call-chat__messages::-webkit-scrollbar { width: 6px; }
.call-chat__messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }

/* CALL-FIX-01 (2026-05-29): "Show earlier messages" pill at top of chat */
.call-chat__more {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    margin: 6px auto 12px;
    padding: 6px 14px;
    background: rgba(255,255,255,.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    font-size: .75rem;
    cursor: pointer;
    transition: background .14s;
}
.call-chat__more:hover  { background: rgba(255,255,255,.16); }
.call-chat__more:active { transform: scale(.97); }
.call-chat__more i      { font-size: 1rem; }
.call-chat__msg {
    display: flex; flex-direction: column;
    max-width: 85%;
    align-self: flex-start;
}
.call-chat__msg.is-mine {
    align-self: flex-end;
    align-items: flex-end;
}
.call-chat__who {
    font-size: .68rem;
    color: #ffd58a;
    font-weight: 700;
    margin-bottom: 2px;
    padding: 0 2px;
}
.call-chat__bubble {
    background: rgba(255,255,255,.10);
    padding: 8px 12px;
    border-radius: 14px 14px 14px 4px;
    font-size: .88rem;
    line-height: 1.4;
    color: #fff;
    word-wrap: break-word;
}
.call-chat__msg.is-mine .call-chat__bubble {
    background: #ff9900;
    color: #261b10;
    border-radius: 14px 14px 4px 14px;
    font-weight: 500;
}
.call-chat__time {
    font-size: .65rem;
    color: rgba(255,255,255,.4);
    margin-top: 2px;
    padding: 0 4px;
    font-family: var(--font-mono);
}
.call-chat__composer {
    display: flex; gap: 8px;
    padding: 12px;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(20,15,10,.6);
}
.call-chat__composer input {
    flex: 1;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    color: #fff;
    padding: 9px 12px;
    border-radius: 999px;
    font-family: inherit; font-size: .9rem;
}
.call-chat__composer input::placeholder { color: rgba(255,255,255,.4); }
.call-chat__composer input:focus {
    outline: none;
    border-color: #ff9900;
    background: rgba(255,153,0,.08);
}
.call-chat__composer button {
    background: #ff9900;
    color: #261b10;
    border: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .12s, transform .08s;
}
.call-chat__composer button:hover { background: #ffaa1f; }
.call-chat__composer button:active { transform: scale(.94); }

/* On phones, the chat takes over the whole stage */
@media (max-width: 720px) {
    .call-app.has-chat-open {
        grid-template-columns: 0 1fr;
    }
    .call-app.has-chat-open .call-stage {
        display: none;
    }
}

.call-preflight__err {
    margin-top: 18px;
    background: rgba(185,28,28,.12);
    border: 1px solid rgba(220,38,38,.4);
    border-radius: 12px;
    padding: 16px;
    display: flex; gap: 14px;
    color: #fff;
}
.call-preflight__err[hidden] { display: none; }
.call-preflight__err-icon {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(220,38,38,.25);
    color: #ffb0b0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.call-preflight__err-body { flex: 1; min-width: 0; }
.call-preflight__err-body h4 {
    margin: 0 0 4px; font-family: var(--font-display);
    font-size: 1.05rem; font-weight: 700; color: #fff;
}
.call-preflight__err-body p {
    margin: 0 0 10px; font-size: .9rem; color: rgba(255,255,255,.85);
}
.call-preflight__err-help {
    background: rgba(0,0,0,.25);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: .85rem;
    color: rgba(255,255,255,.88);
}
.call-preflight__err-help ol {
    margin: 0; padding-left: 18px;
    display: flex; flex-direction: column; gap: 4px;
}
.call-preflight__err-help li { line-height: 1.45; }
.call-preflight__err-help code {
    background: rgba(255,255,255,.1);
    padding: 1px 6px; border-radius: 3px;
    color: #ffd58a;
    font-family: var(--font-mono); font-size: .78rem;
}
.call-preflight__err-help strong { color: #ff9900; }
.call-preflight__err-actions {
    display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;
}
.call-preflight__err-actions .btn-outline-light {
    border-color: rgba(255,255,255,.4);
    color: #fff;
}
.call-preflight__err-actions .btn-outline-light:hover {
    background: rgba(255,255,255,.1);
    border-color: #fff;
    color: #fff;
}

/* ============================================================
   TWO-FACTOR AUTHENTICATION SETUP (premium 3-step wizard)
   ============================================================ */
.twofa-setup {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 24px 80px;
}
.twofa-setup__head { margin-bottom: 32px; }
.twofa-setup__crumb {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--wo-ink-2); font-size: .82rem;
    font-family: var(--font-mono);
    letter-spacing: .04em;
    margin-bottom: 14px;
}
.twofa-setup__crumb a {
    color: var(--wo-ink); text-decoration: none;
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    transition: background .12s;
}
.twofa-setup__crumb a:hover { background: var(--wo-paper); border-color: #ff9900; color:var(--wo-accent-text); }
.twofa-setup__head h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.1rem;
    letter-spacing: -.02em;
    margin: 0 0 10px;
    color: var(--wo-ink);
}
.twofa-setup__head p {
    color: var(--wo-ink-2);
    font-size: 1rem;
    margin: 0;
}
.twofa-steps {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: 24px;
    counter-reset: step;
}
.twofa-step {
    display: flex; gap: 18px;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 14px;
    padding: 24px;
}
.twofa-step__num {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--wo-slab);
    color: #ff9900;
    font-family: var(--font-display);
    font-weight: 700; font-size: 1.05rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.twofa-step__body { flex: 1; min-width: 0; }
.twofa-step__body h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    margin: 0 0 6px;
    color: var(--wo-ink);
}
.twofa-step__body > p {
    color: var(--wo-ink-2);
    font-size: .94rem;
    margin: 0 0 14px;
}

/* App grid */
.twofa-apps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 4px;
}
.twofa-app {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px;
    background: var(--wo-paper);
    border: 1px solid var(--wo-line);
    border-radius: 10px;
    text-decoration: none;
    color: var(--wo-ink);
    transition: border-color .14s, transform .08s, background .14s;
}
.twofa-app:hover {
    border-color: #ff9900;
    background: rgba(255,153,0,.04);
    transform: translateY(-1px);
    color: var(--wo-ink);
}
.twofa-app i { font-size: 1.3rem; color: #ff9900; }
.twofa-app span { font-weight: 700; font-size: .94rem; }
.twofa-app em {
    font-style: normal;
    font-size: .72rem;
    color: var(--wo-text-muted);
    font-family: var(--font-mono);
}

/* QR card */
.twofa-qr-card {
    display: grid; grid-template-columns: auto 1fr;
    gap: 24px;
    padding: 20px;
    background: var(--wo-paper);
    border: 1px solid var(--wo-line);
    border-radius: 12px;
}
@media (max-width: 600px) {
    .twofa-qr-card { grid-template-columns: 1fr; }
}
.twofa-qr {
    background: var(--wo-paper);      /* matches the QR's bgcolor so it blends seamlessly */
    border-radius: 10px;
    padding: 14px;
    box-shadow: inset 0 0 0 1px rgba(38,27,16,.08);
}
.twofa-qr img {
    display: block;
    width: 200px; height: 200px;
    background: transparent;
}
.twofa-qr-side { display: flex; flex-direction: column; gap: 10px; }
.twofa-qr-side__label {
    font-size: .82rem; color: var(--wo-ink-2);
    margin: 0;
}
.twofa-secret {
    font-family: var(--font-mono);
    font-size: .92rem; letter-spacing: .04em;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 8px;
    padding: 12px 14px;
    color: var(--wo-ink);
    word-break: break-all;
    user-select: all;
}
.twofa-copy {
    align-self: flex-start;
    background: transparent;
    border: 1px solid var(--wo-line);
    color: var(--wo-ink);
    padding: 7px 14px;
    border-radius: 6px;
    font-size: .85rem; font-weight: 500;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .12s, border-color .12s;
}
.twofa-copy:hover { background: rgba(255,153,0,.08); border-color: #ff9900; color:var(--wo-accent-text); }
.twofa-copy.is-done { background: rgba(31,122,58,.10); border-color: #1f7a3a; color: #1f7a3a; }
.twofa-qr-side__hint {
    font-size: .78rem; color: var(--wo-text-muted);
    margin: 4px 0 0;
}
.twofa-qr-side__hint i { color: var(--wo-primary-deep); }

/* 6-digit OTP input */
.twofa-form { margin-top: 6px; }
.twofa-otp {
    display: flex; gap: 8px;
    margin: 0 0 18px;
}
.twofa-otp input {
    flex: 1; min-width: 0; max-width: 60px;
    height: 60px;
    border: 1.5px solid var(--wo-line);
    background: var(--wo-paper);
    border-radius: 10px;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--wo-ink);
    transition: border-color .14s, box-shadow .14s;
}
.twofa-otp input:focus {
    outline: 0;
    border-color: #ff9900;
    box-shadow: 0 0 0 4px rgba(255,153,0,.14);
}
.twofa-confirm {
    background: var(--wo-slab);
    color: #ff9900;
    border: 0;
    padding: 14px 22px;
    border-radius: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    width: 100%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: background .14s, color .14s, transform .08s;
}
.twofa-confirm:hover:not(:disabled) { background: #ff9900; color: var(--wo-ink); }
.twofa-confirm:disabled { opacity: .45; cursor: not-allowed; }
.twofa-confirm:active:not(:disabled) { transform: translateY(1px); }
.twofa-foot {
    margin-top: 24px;
    padding: 14px 18px;
    background: rgba(255,153,0,.08);
    border: 1px solid rgba(255,153,0,.25);
    border-left: 3px solid #ff9900;
    border-radius: 8px;
    font-size: .88rem;
    color: var(--wo-ink-2);
    display: flex; gap: 10px; align-items: flex-start;
}
.twofa-foot i { color: #ff9900; font-size: 1.1rem; margin-top: 1px; }

/* ============================================================
   2FA BACKUP CODES (shown once after enabling)
   ============================================================ */
.twofa-codes { max-width: 700px; margin: 0 auto; padding: 32px 24px 80px; }
.twofa-codes__head { text-align: center; margin-bottom: 28px; }
.twofa-codes__check {
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(31,122,58,.14);
    color: #1f7a3a;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px;
    margin-bottom: 14px;
}
.twofa-codes__head h1 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.9rem; letter-spacing: -.02em;
    margin: 0 0 10px;
}
.twofa-codes__head p { color: var(--wo-ink-2); margin: 0 auto; max-width: 540px; }
.twofa-codes__grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 18px;
}
.twofa-codes__code {
    font-family: var(--font-mono);
    font-size: 1.05rem; font-weight: 700;
    letter-spacing: .08em;
    color: var(--wo-ink);
    background: var(--wo-paper);
    border: 1px solid var(--wo-line);
    border-radius: 8px;
    padding: 12px 14px;
    text-align: center;
    user-select: all;
}
.twofa-codes__actions {
    display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
    margin-bottom: 22px;
}
.twofa-codes__actions .btn-dark {
    background: var(--wo-slab); color: #ff9900;
    border-color: var(--wo-ink); font-weight: 700;
}
.twofa-codes__actions .btn-dark:hover { background: #ff9900; color: var(--wo-ink); }
.twofa-codes__warning {
    background: rgba(185,28,28,.07);
    border: 1px solid rgba(185,28,28,.25);
    border-left: 3px solid #b91c1c;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: .88rem;
    color: var(--wo-ink);
    display: flex; gap: 10px; align-items: flex-start;
}
/* SEC-AUDIT-20260610 follow-up: keep the warning text as one flowing block
   (the <span> is the single text flex item; min-width:0 lets it wrap). */
.twofa-codes__warning span { min-width: 0; }
.twofa-codes__warning i { color: #b91c1c; font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.twofa-codes__done {
    margin-top: 22px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px;
    padding-top: 22px;
    border-top: 1px solid var(--wo-line);
}
.twofa-codes__done label {
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer;
}
.twofa-codes__done input[type=checkbox] {
    width: 18px; height: 18px; accent-color: #ff9900;
}
.twofa-codes__done .btn-dark {
    background: var(--wo-slab); color: #ff9900;
    border-color: var(--wo-ink); font-weight: 700;
    transition: opacity .14s, background .14s, color .14s;
}
.twofa-codes__done .btn-dark:hover {
    background: #ff9900; color: var(--wo-ink);
}
@media print {
    .twofa-codes__actions, .twofa-codes__done, .wo-header, .wo-footer { display: none !important; }
}

/* ============================================================
   2FA MANAGE (shown when 2FA is already enabled)
   ============================================================ */
.twofa-manage { max-width: 740px; margin: 0 auto; padding: 32px 24px 80px; }
.twofa-manage__head { margin-bottom: 22px; }
.twofa-manage__crumb {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--wo-ink-2); font-family: var(--font-mono);
    font-size: .82rem; letter-spacing: .04em;
    margin-bottom: 14px;
}
.twofa-manage__crumb a {
    color: var(--wo-ink); text-decoration: none;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--wo-card); border: 1px solid var(--wo-line);
    display: inline-flex; align-items: center; justify-content: center;
}
.twofa-manage__crumb a:hover { background: var(--wo-paper); border-color: #ff9900; color:var(--wo-accent-text); }
.twofa-manage__head h1 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 2rem; letter-spacing: -.02em;
    margin: 0 0 8px;
}
.twofa-manage__head p { color: var(--wo-ink-2); margin: 0; }
.twofa-manage__status {
    display: flex; gap: 18px; align-items: flex-start;
    background: rgba(31,122,58,.06);
    border: 1px solid rgba(31,122,58,.3);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 22px;
}
.twofa-manage__check {
    flex-shrink: 0;
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(31,122,58,.18);
    color: #1f7a3a;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.twofa-manage__status h2 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.15rem; margin: 0 0 4px; color: #1f7a3a;
}
.twofa-manage__status p { margin: 0; color: var(--wo-ink); font-size: .92rem; }
.twofa-manage__small {
    color: var(--wo-text-muted) !important;
    font-family: var(--font-mono);
    font-size: .78rem !important;
    margin-top: 6px !important;
}
.twofa-manage__panel {
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}
.twofa-manage__panel summary {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
}
.twofa-manage__panel summary::-webkit-details-marker { display: none; }
.twofa-manage__panel summary:hover { background: var(--wo-paper); }
.twofa-manage__action-icon {
    flex-shrink: 0;
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(255,153,0,.15);
    color: #ff9900;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.twofa-manage__action-icon--danger {
    background: rgba(185,28,28,.10);
    color: #b91c1c;
}
.twofa-manage__panel summary > div {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.twofa-manage__panel summary strong {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--wo-ink);
}
.twofa-manage__panel summary em {
    font-style: normal;
    color: var(--wo-ink-2);
    font-size: .85rem;
}
.twofa-manage__chev {
    color: var(--wo-text-muted);
    transition: transform .14s;
}
.twofa-manage__panel[open] .twofa-manage__chev {
    transform: rotate(180deg);
}
.twofa-manage__form {
    padding: 0 20px 20px;
    border-top: 1px solid var(--wo-line);
    padding-top: 18px;
}
.twofa-manage__label {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 14px;
}
.twofa-manage__label > span {
    font-size: .82rem; font-weight: 600;
    color: var(--wo-ink-2);
}
.twofa-manage__label input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--wo-line);
    background: var(--wo-paper);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 1rem; letter-spacing: .05em;
    color: var(--wo-ink);
    transition: border-color .12s, box-shadow .12s;
}
.twofa-manage__label input:focus {
    outline: 0; border-color: #ff9900;
    box-shadow: 0 0 0 4px rgba(255,153,0,.16);
}
.twofa-manage__form .btn-dark {
    background: var(--wo-slab); color: #ff9900;
    border-color: var(--wo-ink);
    font-family: var(--font-display); font-weight: 700;
}
.twofa-manage__form .btn-dark:hover { background: #ff9900; color: var(--wo-ink); }
.twofa-manage__form .btn-danger {
    background: #b91c1c; border-color: #b91c1c; color: #fff;
    font-family: var(--font-display); font-weight: 700;
}
.twofa-manage__form .btn-danger:hover { background: #a01818; border-color: #a01818; color: #fff; }
.twofa-manage__lost {
    margin-top: 22px;
    background: rgba(255,153,0,.05);
    border: 1px solid rgba(255,153,0,.2);
    border-radius: 10px;
    padding: 16px 18px;
}
.twofa-manage__lost h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 6px;
    color: var(--wo-ink);
    display: inline-flex; align-items: center; gap: 8px;
}
.twofa-manage__lost h3 i { color: #ff9900; }
.twofa-manage__lost p { margin: 0; font-size: .9rem; color: var(--wo-ink-2); }
.twofa-manage__lost a { color:var(--wo-accent-text); font-weight: 600; }
.twofa-manage__lost .btn-dark {
    background: var(--wo-slab); color: #ff9900;
    border-color: var(--wo-ink); font-weight: 700;
    margin-top: 10px;
}
.twofa-manage__lost .btn-dark:hover { background: #ff9900; color: var(--wo-ink); }

/* ============================================================
   SUPPORT - Lost 2FA request form
   ============================================================ */
.support { max-width: 700px; margin: 0 auto; padding: 32px 24px 80px; }
.support__head { margin-bottom: 22px; }
.support__crumb {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--wo-ink-2); font-family: var(--font-mono);
    font-size: .82rem; letter-spacing: .04em;
    margin-bottom: 14px;
}
.support__crumb a {
    color: var(--wo-ink); text-decoration: none;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--wo-card); border: 1px solid var(--wo-line);
    display: inline-flex; align-items: center; justify-content: center;
}
.support__crumb a:hover { background: var(--wo-paper); border-color: #ff9900; color:var(--wo-accent-text); }
.support__head h1 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 2rem; letter-spacing: -.02em;
    margin: 0 0 8px;
}
.support__head p { color: var(--wo-ink-2); margin: 0; }

.support__account {
    display: flex; align-items: center; gap: 14px;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 18px;
}
.support__account-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--wo-slab); color: #ff9900;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 14px;
}
.support__account-name { font-weight: 700; color: var(--wo-ink); }
.support__account-mail {
    font-family: var(--font-mono);
    color: var(--wo-ink-2);
    font-size: .82rem;
}
.support__account-tag {
    margin-left: auto;
    background: rgba(31,122,58,.10);
    color: #1f7a3a;
    border: 1px solid rgba(31,122,58,.3);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.support__form {
    display: flex; flex-direction: column; gap: 16px;
}
.support__field {
    border: 1px solid var(--wo-line);
    background: var(--wo-card);
    border-radius: 12px;
    padding: 16px 18px;
    margin: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.support__field legend {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--wo-ink);
    padding: 0;
    margin-bottom: 4px;
}
.support__field legend small,
.support__field span small {
    font-weight: 400;
    color: var(--wo-text-muted);
    font-family: var(--font-mono);
    font-size: .76rem;
    margin-left: 4px;
}
.support__field label {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s;
    font-size: .92rem;
}
.support__field label:hover { background: var(--wo-paper); }
.support__field input[type=radio] { accent-color: #ff9900; }
.support__field--text > span {
    font-size: .82rem; font-weight: 600;
    color: var(--wo-ink-2);
}
.support__field--text textarea,
.support__field--text input[type=tel],
.support__field--text input[type=text] {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--wo-line);
    background: var(--wo-paper);
    border-radius: 8px;
    font-family: inherit; font-size: .94rem;
    color: var(--wo-ink);
    transition: border-color .12s, box-shadow .12s;
}
.support__field--text textarea:focus,
.support__field--text input:focus {
    outline: 0; border-color: #ff9900;
    box-shadow: 0 0 0 4px rgba(255,153,0,.16);
}
.support__notice {
    display: flex; gap: 12px; align-items: flex-start;
    background: rgba(255,153,0,.06);
    border: 1px solid rgba(255,153,0,.25);
    border-left: 3px solid #ff9900;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: .88rem;
    color: var(--wo-ink);
}
.support__notice i { color: #ff9900; font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.support__notice strong { display: block; margin-bottom: 4px; }
.support__notice ol { margin: 0; padding-left: 18px; color: var(--wo-ink-2); }
.support__notice code { background: var(--wo-card); padding: 1px 6px; border-radius: 3px; font-family: var(--font-mono); font-size: .82rem; color: var(--wo-ink); }
.support__actions {
    display: flex; justify-content: flex-end; gap: 10px;
    padding-top: 6px;
}
.support__actions .btn-dark {
    background: var(--wo-slab); color: #ff9900;
    border-color: var(--wo-ink); font-weight: 700;
    padding: 10px 22px;
}
.support__actions .btn-dark:hover { background: #ff9900; color: var(--wo-ink); }

/* Confirmation */
.support-confirm {
    max-width: 560px; margin: 60px auto;
    padding: 36px 28px;
    text-align: center;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 14px;
}
.support-confirm__check {
    width: 72px; height: 72px; border-radius: 50%;
    background: rgba(31,122,58,.12);
    color: #1f7a3a;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 32px;
    margin-bottom: 14px;
}
.support-confirm h1 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.7rem; letter-spacing: -.02em;
    margin: 0 0 10px;
}
.support-confirm > p { color: var(--wo-ink-2); margin: 0 0 18px; }
.support-confirm__ref {
    display: inline-flex; flex-direction: column; gap: 4px;
    background: var(--wo-paper);
    border: 1px solid var(--wo-line);
    padding: 10px 18px;
    border-radius: 10px;
    margin-bottom: 14px;
}
.support-confirm__ref span {
    font-size: .68rem; font-weight: 600;
    color: var(--wo-text-muted);
    text-transform: uppercase; letter-spacing: .06em;
}
.support-confirm__ref code {
    font-family: var(--font-mono); font-size: 1rem; font-weight: 700;
    color: var(--wo-ink);
    user-select: all;
}
.support-confirm__hint { font-size: .85rem; color: var(--wo-text-muted); margin-bottom: 22px; }
.support-confirm__actions .btn-dark {
    background: var(--wo-slab); color: #ff9900;
    border-color: var(--wo-ink); font-weight: 700;
    padding: 10px 22px;
}
.support-confirm__actions .btn-dark:hover { background: #ff9900; color: var(--wo-ink); }

/* Subtle separator in the auth-alt row */
.auth-alt__sep { color: var(--wo-text-muted); margin: 0 6px; }

/* ============================================================
   KYC WIZARD (multi-step identity verification)
   ============================================================ */
.kyc { max-width: 820px; margin: 0 auto; padding: 32px 24px 80px; }
.kyc__head { margin-bottom: 24px; }
.kyc__crumb {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--wo-ink-2); font-family: var(--font-mono);
    font-size: .82rem; letter-spacing: .04em;
    margin-bottom: 14px;
}
.kyc__crumb a {
    color: var(--wo-ink); text-decoration: none;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--wo-card); border: 1px solid var(--wo-line);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s;
}
.kyc__crumb a:hover { background: var(--wo-paper); border-color: #ff9900; color:var(--wo-accent-text); }
.kyc__head h1 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 2.1rem; letter-spacing: -.02em;
    margin: 0 0 10px;
}
.kyc__head p { color: var(--wo-ink-2); font-size: 1rem; margin: 0; }

/* Status banners (approved / under review / rejected) */
.kyc-status {
    display: flex; gap: 18px; align-items: center;
    padding: 24px;
    border-radius: 14px;
    border: 1px solid var(--wo-line);
}
.kyc-status h2 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.3rem; margin: 0 0 4px;
}
.kyc-status p { margin: 0; color: var(--wo-ink-2); }
.kyc-status__small {
    font-family: var(--font-mono); font-size: .8rem;
    color: var(--wo-text-muted) !important;
    margin-top: 6px !important;
}
.kyc-status__icon {
    flex-shrink: 0;
    width: 56px; height: 56px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
}
.kyc-status--approved { background: rgba(31,122,58,.08); border-color: rgba(31,122,58,.3); }
.kyc-status--approved .kyc-status__icon { background: rgba(31,122,58,.18); color: #1f7a3a; }
.kyc-status--review   { background: rgba(255,153,0,.08); border-color: rgba(255,153,0,.3); }
.kyc-status--review .kyc-status__icon { background: rgba(255,153,0,.18); color:var(--wo-accent-text); }
.kyc-status--rejected { background: rgba(185,28,28,.08); border-color: rgba(185,28,28,.3); }
.kyc-status--rejected .kyc-status__icon { background: rgba(185,28,28,.18); color: #b91c1c; }

/* Stepper */
.kyc-progress {
    display: flex; gap: 0;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 999px;
    padding: 6px;
    margin-bottom: 24px;
    overflow: hidden;
}
.kyc-progress__step {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: .85rem; font-weight: 600;
    color: var(--wo-text-muted);
    transition: background .14s, color .14s;
    text-align: center;
    white-space: nowrap;
}
.kyc-progress__step span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--wo-line);
    color: var(--wo-ink-2);
    font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
}
.kyc-progress__step.is-active {
    background: var(--wo-slab); color: var(--wo-on-slab);
}
.kyc-progress__step.is-active span { background: #ff9900; color: var(--wo-ink); }
.kyc-progress__step.is-done span { background: #1f7a3a; color: #fff; }
.kyc-progress__step.is-done span::before { content: '✓'; }
.kyc-progress__step.is-done span > * { display: none; }
@media (max-width: 700px) {
    .kyc-progress__step { padding: 8px; font-size: 0; }
    .kyc-progress__step span { margin: 0; font-size: .72rem; }
}

/* Panels */
.kyc-panel {
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 14px;
    padding: 26px;
    display: none;
}
.kyc-panel.is-active { display: block; animation: kycFade .24s ease; }
@keyframes kycFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.kyc-panel h2 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.45rem; margin: 0 0 6px;
}
.kyc-panel__sub { color: var(--wo-ink-2); margin: 0 0 22px; font-size: .94rem; }

/* Form grid */
.kyc-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.kyc-field { display: flex; flex-direction: column; gap: 5px; }
.kyc-field--full { grid-column: 1 / -1; }
.kyc-field > span {
    font-size: .74rem; font-weight: 600; color: var(--wo-ink-2);
    text-transform: uppercase; letter-spacing: .04em;
}
.kyc-field input,
.kyc-field select,
.kyc-field textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--wo-line);
    background: var(--wo-paper);
    border-radius: 8px;
    font-family: inherit; font-size: .94rem;
    color: var(--wo-ink);
    transition: border-color .12s, box-shadow .12s;
}
.kyc-field input:focus, .kyc-field select:focus, .kyc-field textarea:focus {
    outline: 0;
    border-color: #ff9900;
    box-shadow: 0 0 0 4px rgba(255,153,0,.16);
}
@media (max-width: 600px) { .kyc-grid { grid-template-columns: 1fr; } }

/* Document choice radio cards */
.kyc-doc-choice {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px;
}
.kyc-doc-option { position: relative; cursor: pointer; }
.kyc-doc-option input {
    position: absolute; opacity: 0; pointer-events: none;
}
.kyc-doc-option__inner {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 22px 18px;
    background: var(--wo-paper);
    border: 1.5px solid var(--wo-line);
    border-radius: 12px;
    transition: border-color .14s, background .14s, transform .08s;
}
.kyc-doc-option:hover .kyc-doc-option__inner {
    border-color: #ff9900;
    transform: translateY(-1px);
}
.kyc-doc-option input:checked + .kyc-doc-option__inner {
    border-color: #ff9900;
    background: rgba(255,153,0,.08);
    box-shadow: 0 0 0 3px rgba(255,153,0,.12);
}
.kyc-doc-option__icon {
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255,153,0,.16);
    color: #ff9900;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; margin-bottom: 10px;
}
.kyc-doc-option__label { font-weight: 700; margin-bottom: 4px; }
.kyc-doc-option__hint { color: var(--wo-text-muted); font-size: .78rem; }

/* Upload tiles (front/back) */
.kyc-uploads {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 600px) { .kyc-uploads { grid-template-columns: 1fr; } }
.kyc-upload {
    position: relative;
    aspect-ratio: 16/10;
    border: 2px dashed var(--wo-line);
    border-radius: 12px;
    background: var(--wo-paper);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .14s, background .14s;
}
.kyc-upload:hover { border-color: #ff9900; background: rgba(255,153,0,.04); }
.kyc-upload.is-done { border-style: solid; border-color: #1f7a3a; }
.kyc-upload.is-uploading::after {
    content: 'Uploading...';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.7);
    font-weight: 700;
    color: var(--wo-ink);
}
.kyc-upload__inner {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 18px;
    color: var(--wo-ink-2);
}
.kyc-upload__inner i { font-size: 2rem; color: #ff9900; margin-bottom: 8px; }
.kyc-upload__inner h4 { font-family: var(--font-display); font-weight: 700; margin: 0 0 2px; color: var(--wo-ink); font-size: .98rem; }
.kyc-upload__inner h4 em { color: var(--wo-text-muted); font-style: normal; font-weight: 500; font-size: .78rem; }
.kyc-upload__inner p { margin: 0; font-size: .85rem; }
.kyc-upload__preview {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}
.kyc-upload__remove {
    position: absolute; top: 8px; right: 8px;
    background: rgba(0,0,0,.65); color: #fff; border: 0;
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 2;
}
.kyc-upload__remove:hover { background: #b91c1c; }

/* Selfie */
.kyc-selfie {
    background: var(--wo-paper);
    border: 1px solid var(--wo-line);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}
.kyc-selfie__preview {
    position: relative;
    aspect-ratio: 4/5;
    max-width: 320px; margin: 0 auto 16px;
    background: #000; border-radius: 14px; overflow: hidden;
}
.kyc-selfie__preview video,
.kyc-selfie__preview img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transform: scaleX(-1); /* mirror video for natural feel */
}
.kyc-selfie__preview img { transform: none; }
.kyc-selfie__overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.kyc-selfie__face {
    width: 60%; aspect-ratio: 3/4;
    border: 2px dashed rgba(255,153,0,.8);
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.25);
}
.kyc-selfie__controls {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.kyc-selfie__hint {
    margin-top: 12px; font-size: .86rem; color: var(--wo-ink-2);
}

/* KYC-SELFIE-WITH-ID-20260917: the code the applicant writes on paper and
   holds in the verification photo, and the checklist above the camera.
   The code is set large, monospaced and widely tracked because it is about to
   be copied out by hand and then read back off a photograph by a reviewer:
   every ambiguity in it becomes an argument about handwriting. The character
   set it draws from already excludes the confusable pairs, see
   App\Support\KycSelfieCode. */
.kyc-code {
    border: 1px solid var(--wo-line);
    border-left: 3px solid var(--wo-primary-strong);
    background: var(--wo-paper);
    border-radius: 8px;
    padding: .85rem 1rem;
    margin: 0 0 1rem;
}
.kyc-code__label {
    font-family: var(--font-mono);
    font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--wo-primary-deep);
}
/* The brand line. Set smaller than the code because it is fixed text the
   reviewer confirms at a glance, while the code is the thing actually compared
   character by character. Same monospace face so the applicant copies the two
   lines in one visual style rather than switching hand mid-note. */
.kyc-code__brand {
    font-family: var(--font-mono);
    font-size: 1.05rem; font-weight: 700;
    letter-spacing: .06em;
    color: var(--wo-ink-2);
    margin-top: .3rem;
    user-select: all;
}
.kyc-code__value {
    font-family: var(--font-mono);
    font-size: 2rem; font-weight: 700;
    letter-spacing: .28em;
    color: var(--wo-ink);
    margin: 0 0 .35rem;
    /* Selectable on purpose: some people will paste it into a notes app to
       copy from. Writing it by hand is what we ask for, not what we can
       enforce, and a code that cannot be selected just gets mistyped. */
    user-select: all;
}
.kyc-code__note {
    font-size: .82rem; color: var(--wo-text-muted); line-height: 1.45;
}
.kyc-check {
    margin: 0 0 1rem; padding-left: 1.15rem;
    font-size: .88rem; color: var(--wo-ink-2);
}
.kyc-check li { margin-bottom: .2rem; }

/* Review */
.kyc-review { margin-bottom: 18px; }
.kyc-review__list {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
    background: var(--wo-paper);
    border: 1px solid var(--wo-line);
    border-radius: 10px;
    padding: 16px 20px;
}
.kyc-review__list > div { display: flex; flex-direction: column; gap: 2px; }
.kyc-review__list dt {
    font-size: .72rem; font-weight: 600;
    color: var(--wo-ink-2);
    text-transform: uppercase; letter-spacing: .04em;
}
.kyc-review__list dd { margin: 0; font-size: .94rem; color: var(--wo-ink); font-weight: 500; }
.kyc-review__list dd em { color: var(--wo-text-muted); font-style: italic; font-weight: 400; }
.kyc-review__imgs {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px; margin-top: 14px;
}
.kyc-review__imgs > div {
    display: flex; flex-direction: column; gap: 6px;
}
.kyc-review__imgs span {
    font-size: .72rem; font-weight: 600;
    color: var(--wo-ink-2);
    text-transform: uppercase; letter-spacing: .04em;
}
.kyc-review__imgs img {
    width: 100%; aspect-ratio: 16/10; object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--wo-line);
}

/* Consent */
.kyc-consent {
    background: rgba(255,153,0,.06);
    border: 1px solid rgba(255,153,0,.2);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.kyc-consent label {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: .88rem; color: var(--wo-ink);
    cursor: pointer;
}
.kyc-consent input[type=checkbox] {
    margin-top: 3px; accent-color: #ff9900; flex-shrink: 0;
    width: 18px; height: 18px;
}

/* Footer actions on every panel */
.kyc-actions {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 24px;
}
.kyc-actions .btn-dark {
    background: var(--wo-slab); color: #ff9900;
    border-color: var(--wo-ink);
    font-family: var(--font-display); font-weight: 700;
    padding: 10px 22px;
}
.kyc-actions .btn-dark:hover:not(:disabled) {
    background: #ff9900; color: var(--wo-ink); border-color: #ff9900;
}
.kyc-actions .btn-dark:disabled { opacity: .45; cursor: not-allowed; }
.kyc-error {
    color: #b91c1c; font-size: .88rem;
    margin-top: 12px;
    background: rgba(185,28,28,.08);
    border: 1px solid rgba(185,28,28,.2);
    border-radius: 8px;
    padding: 10px 14px;
}

/* ============================================================
   DASHBOARD - whole-card clickable cards
   ============================================================ */
/* KPI tiles - now anchors */
a.kpi-tile,
a.kpi-tile:hover,
a.kpi-tile:focus {
    text-decoration: none;
    color: inherit;
}
.kpi-tile--link {
    display: block;
    position: relative;
    cursor: pointer;
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.kpi-tile--link:hover {
    transform: translateY(-2px);
    border-color: #ff9900 !important;
    box-shadow: 0 8px 22px -8px rgba(255,153,0,.35);
}
.kpi-tile__cta,
.kpi-cta {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: .7rem; letter-spacing: .04em;
    color: var(--wo-text-muted);
    text-transform: uppercase;
    font-weight: 600;
    opacity: .7;
    transition: opacity .14s ease, color .14s ease, transform .14s ease;
}
.kpi-tile--link:hover .kpi-cta {
    color:var(--wo-accent-text);
    opacity: 1;
    transform: translateX(2px);
}

/* Job card - stretched-link covers the whole tile */
.job-card--link {
    cursor: pointer;
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.job-card--link:hover {
    transform: translateY(-2px);
    border-color: #ff9900 !important;
    box-shadow: 0 8px 22px -8px rgba(255,153,0,.30);
}
.job-card__title {
    color: var(--wo-ink);
    font-weight: 700;
    transition: color .12s;
}
.job-card--link:hover .job-card__title { color:var(--wo-accent-text); }
.job-card--empty {
    cursor: pointer;
    transition: transform .14s ease, border-color .14s ease;
}
.job-card--empty:hover {
    transform: translateY(-2px);
    border-color: #ff9900 !important;
}
/* The stretched-link itself must be invisible */
.job-card .stretched-link::after {
    background: transparent;
}

/* AI suggestion card - whole block clickable */
a.ai-panel,
a.ai-panel:hover,
a.ai-panel:focus { color: inherit; text-decoration: none; }
.ai-panel--link {
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease;
}
.ai-panel--link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -10px rgba(38,27,16,.20);
}

/* Contract rows + Quick links - hover state */
.dash-contract-row { transition: background .14s, padding-left .14s; }
.dash-contract-row:hover {
    background: rgba(255,153,0,.06);
    padding-left: 8px;
    color: var(--wo-ink) !important;
}
.dash-quick-link {
    border-radius: 6px;
    padding: 7px 10px !important;
    transition: background .14s, color .14s, padding-left .14s;
}
.dash-quick-link:hover {
    background: rgba(255,153,0,.10);
    color:var(--wo-accent-text) !important;
    padding-left: 14px !important;
}
.dash-quick-link i { color: #ff9900; transition: transform .14s; }
.dash-quick-link:hover i { transform: scale(1.1); }

/* ============================================================
   ERROR PAGES (404 / 500 / 403)
   ============================================================ */
.err-page {
    min-height: 60vh;
    display: flex; align-items: center; justify-content: center;
    padding: 60px 24px;
}
.err-page__inner {
    max-width: 540px; text-align: center;
}
.err-page__code {
    font-family: var(--font-display);
    font-size: 9rem; font-weight: 800;
    line-height: 1; letter-spacing: -.05em;
    color: #ff9900;
    margin-bottom: 8px;
    text-shadow: 0 8px 30px rgba(255,153,0,.25);
    background: linear-gradient(135deg, #ff9900 0%, #b95400 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.err-page__code--red {
    background: linear-gradient(135deg, #b91c1c 0%, #7a0d0d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 8px 30px rgba(185,28,28,.25);
}
.err-page__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.9rem;
    letter-spacing: -.02em;
    color: var(--wo-ink);
    margin: 0 0 12px;
}
.err-page__sub {
    color: var(--wo-ink-2);
    font-size: 1rem;
    margin: 0 0 28px;
    line-height: 1.5;
}
.err-page__actions {
    display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.err-page__actions .btn-dark {
    background: var(--wo-slab); color: #ff9900;
    border-color: var(--wo-ink); font-weight: 700;
}
.err-page__actions .btn-dark:hover {
    background: #ff9900; color: var(--wo-ink); border-color: #ff9900;
}
@media (max-width: 600px) {
    .err-page__code { font-size: 6.5rem; }
    .err-page__title { font-size: 1.5rem; }
}

/* ============================================================
   CONTRACTS INDEX  (/contracts)
   ============================================================ */
.contracts-index { max-width: 1080px; margin: 0 auto; padding: 32px 24px 80px; }
.contracts-index__head { margin-bottom: 22px; }
.contracts-index__crumb {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--wo-ink-2); font-family: var(--font-mono);
    font-size: .82rem; letter-spacing: .04em;
    margin-bottom: 14px;
}
.contracts-index__crumb a {
    color: var(--wo-ink); text-decoration: none;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--wo-card); border: 1px solid var(--wo-line);
    display: inline-flex; align-items: center; justify-content: center;
}
.contracts-index__crumb a:hover { background: var(--wo-paper); border-color: #ff9900; color:var(--wo-accent-text); }
.contracts-index__head h1 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 2.1rem; letter-spacing: -.02em;
    margin: 0 0 8px;
}
.contracts-index__head p { color: var(--wo-ink-2); margin: 0; }

.contracts-filters {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 22px;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 999px;
    padding: 6px;
}
.contracts-filter {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    color: var(--wo-ink-2);
    text-decoration: none;
    font-size: .86rem; font-weight: 600;
    transition: background .12s, color .12s;
}
.contracts-filter:hover {
    background: rgba(255,153,0,.10);
    color: var(--wo-ink);
}
.contracts-filter.is-active {
    background: var(--wo-slab);
    color: var(--wo-on-slab);
}
.contracts-filter__n {
    background: rgba(0,0,0,.08);
    padding: 1px 8px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: .68rem;
    color: inherit;
}
.contracts-filter.is-active .contracts-filter__n {
    background: #ff9900;
    color: var(--wo-ink);
}

/* CONTRACTS-FILTER-ZERO-20260826 ------------------------------------------
   A filter with no contracts in it is still worth showing (it tells you the
   state exists) but it should not compete for attention with the ones that
   actually have something in them. Dimmed, not hidden, and never dimmed
   while it is the filter you are currently looking at. Applies at every
   width, desktop included. */
.contracts-filter.is-empty { opacity: .48; }
.contracts-filter.is-empty:hover { opacity: 1; }

/* CONTRACTS-MOBILE-20260826 ----------------------------------------------
   Full mobile pass on /contracts. Everything below 640px only - desktop is
   untouched.

   1. FILTER BLOCK. .contracts-filters is flex-wrap: wrap inside a container
      with border-radius: 999px. The seven filters fit one line on desktop
      so 999px reads as a neat pill; on a phone they wrap onto four lines
      and a 999px radius on a ~200px-tall box is not a pill any more - the
      curve eats the corners and it renders as a blob. Needs a real radius
      plus flex-start so the wrapped rows align left instead of sitting
      ragged. Chips keep their own pills and get a 38px min-height, which
      is a usable touch target; 7px padding gave about 31px.

      Kept as a wrapping panel rather than a horizontal scroll strip on
      purpose: scrolling would push four of the seven states off-screen,
      including "In dispute", which is the one you would most want to see.

   2. GUTTERS AND TITLE. 24px side padding and a 2.1rem display h1 are set
      for a 1080px column; on a 360px phone they eat the width.

   3. ROW TITLES. The desktop rule is white-space: nowrap + ellipsis, which
      on a phone cuts most real contract titles after a few words. Two-line
      clamp instead - the row is a link to the contract, so the title is the
      main thing you are aiming at.

   4. EMPTY STATE. Two side-by-side buttons in an inline-flex do not fit a
      narrow screen. Stacked and full-width. */
@media (max-width: 640px) {
    .contracts-index { padding: 20px 16px 64px; }
    .contracts-index__head { margin-bottom: 18px; }
    .contracts-index__head h1 { font-size: 1.6rem; }
    .contracts-index__head p { font-size: .92rem; }

    .contracts-filters {
        border-radius: 14px;
        padding: 8px;
        gap: 8px;
        justify-content: flex-start;
        margin-bottom: 18px;
    }
    .contracts-filter {
        padding: 8px 12px;
        min-height: 38px;
        font-size: .82rem;
        gap: 6px;
    }

    .contracts-row { padding: 15px 16px; gap: 10px; }
    .contracts-row__title {
        font-size: 1rem;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .contracts-row__meta { gap: 6px 12px; font-size: .8rem; }

    .contracts-empty { padding: 40px 18px; }
    .contracts-empty__icon { width: 60px; height: 60px; font-size: 25px; }
    .contracts-empty h2 { font-size: 1.2rem; }
    .contracts-empty p { font-size: .9rem; }
    .contracts-empty__actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    .contracts-empty__actions .btn { width: 100%; }
}

.contracts-empty {
    text-align: center;
    padding: 60px 24px;
    background: var(--wo-card);
    border: 1px dashed var(--wo-line);
    border-radius: 14px;
}
.contracts-empty__icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: rgba(255,153,0,.10);
    color: #ff9900;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 30px;
    margin-bottom: 16px;
}
.contracts-empty h2 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.4rem; margin: 0 0 6px;
}
.contracts-empty p { color: var(--wo-ink-2); margin: 0 auto 18px; max-width: 460px; }
.contracts-empty__actions { display: inline-flex; gap: 10px; }
.contracts-empty__actions .btn-dark { background: var(--wo-slab); color: #ff9900; border-color: var(--wo-ink); font-weight: 700; }
.contracts-empty__actions .btn-dark:hover { background: #ff9900; color: var(--wo-ink); border-color: #ff9900; }

.contracts-list {
    display: flex; flex-direction: column; gap: 10px;
}
.contracts-row {
    display: flex; align-items: center; gap: 20px;
    padding: 18px 22px;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 12px;
    text-decoration: none;
    color: var(--wo-ink);
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.contracts-row:hover {
    border-color: #ff9900;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px -10px rgba(255,153,0,.30);
    color: var(--wo-ink);
}
.contracts-row__main { flex: 1; min-width: 0; }
.contracts-row__title {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.05rem; margin: 0 0 5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.contracts-row__meta {
    display: flex; flex-wrap: wrap; gap: 14px;
    color: var(--wo-ink-2);
    font-size: .85rem;
}
.contracts-row__meta i { color: #ff9900; margin-right: 4px; }
.contracts-row__meta strong { color: var(--wo-ink); font-weight: 600; }
.contracts-row__side {
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
    flex-shrink: 0;
}
.contracts-row__amount {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.02rem; color: var(--wo-ink);
}
.contracts-row__type {
    font-family: var(--font-mono);
    font-size: .68rem; letter-spacing: .04em;
    color: var(--wo-text-muted);
    text-transform: uppercase;
}
.contracts-row__status {
    border: 1px solid;
    padding: 2px 10px; border-radius: 999px;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .02em;
    margin-top: 2px;
}
.contracts-row__chev {
    color: var(--wo-text-muted);
    font-size: 1.1rem;
    transition: transform .14s, color .14s;
}
.contracts-row:hover .contracts-row__chev {
    color: #ff9900;
    transform: translateX(3px);
}
@media (max-width: 700px) {
    .contracts-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .contracts-row__side { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
    .contracts-row__chev { display: none; }
}

/* ============================================================
   PROFILE EDIT (matches 2FA / KYC visual language)
   ============================================================ */
.prof-edit { max-width: 820px; margin: 0 auto; padding: 32px 24px 80px; }
.prof-edit__head { margin-bottom: 24px; }
.prof-edit__crumb {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--wo-ink-2); font-family: var(--font-mono);
    font-size: .82rem; letter-spacing: .04em;
    margin-bottom: 14px;
}
.prof-edit__crumb a {
    color: var(--wo-ink); text-decoration: none;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--wo-card); border: 1px solid var(--wo-line);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s;
}
.prof-edit__crumb a:hover { background: var(--wo-paper); border-color: #ff9900; color:var(--wo-accent-text); }
.prof-edit__head h1 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 2.1rem; letter-spacing: -.02em;
    margin: 0 0 10px;
}
.prof-edit__head p { color: var(--wo-ink-2); font-size: 1rem; margin: 0; }

.prof-edit__flash {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: .92rem;
    margin-bottom: 18px;
}
.prof-edit__flash i { font-size: 1.15rem; }
.prof-edit__flash--ok  { background: rgba(31,122,58,.10); color: #1f7a3a; border: 1px solid rgba(31,122,58,.3); }
.prof-edit__flash--err { background: rgba(185,28,28,.10); color: #b91c1c; border: 1px solid rgba(185,28,28,.3); }

.prof-edit__form { display: flex; flex-direction: column; gap: 18px; }
.prof-card {
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 14px;
    padding: 22px;
    margin: 0;
}
.prof-card legend {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 14px;
    padding: 0;
    color: var(--wo-ink);
}
.prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.prof-field { display: flex; flex-direction: column; gap: 5px; }
.prof-field--full { grid-column: 1 / -1; }
.prof-field > span {
    font-size: .74rem; font-weight: 600;
    color: var(--wo-ink-2);
    text-transform: uppercase; letter-spacing: .04em;
    display: flex; align-items: center; gap: 8px;
}
.prof-field__lock {
    font-style: normal;
    font-size: .68rem; letter-spacing: .04em;
    color: #8a3a00;
    background: rgba(255,153,0,.12);
    border: 1px solid rgba(255,153,0,.3);
    padding: 2px 8px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 4px;
    text-transform: none;
}
.prof-field__lock i { font-size: .72rem; }
.prof-field input,
.prof-field select,
.prof-field textarea {
    width: 100%; padding: 11px 14px;
    border: 1.5px solid var(--wo-line);
    background: var(--wo-paper);
    border-radius: 8px;
    font-family: inherit; font-size: .94rem;
    color: var(--wo-ink);
    transition: border-color .12s, box-shadow .12s;
}
.prof-field input:focus, .prof-field select:focus, .prof-field textarea:focus {
    outline: 0; border-color: #ff9900;
    box-shadow: 0 0 0 4px rgba(255,153,0,.16);
}
.prof-field input[readonly] {
    background: var(--wo-line-soft);
    color: var(--wo-ink-2);
    cursor: not-allowed;
}
.prof-field__hint {
    font-size: .78rem; color: var(--wo-text-muted);
    line-height: 1.4;
}
.prof-field__hint strong { color: var(--wo-ink); }

.prof-handle {
    display: flex; align-items: stretch;
    border: 1.5px solid var(--wo-line);
    border-radius: 8px;
    background: var(--wo-paper);
    transition: border-color .12s, box-shadow .12s;
    overflow: hidden;
}
.prof-handle:focus-within {
    border-color: #ff9900;
    box-shadow: 0 0 0 4px rgba(255,153,0,.16);
}
.prof-handle__prefix {
    background: var(--wo-line-soft);
    color: var(--wo-ink-2);
    font-family: var(--font-mono);
    font-size: .85rem;
    padding: 11px 12px;
    border-right: 1px solid var(--wo-line);
    display: inline-flex; align-items: center;
    white-space: nowrap;
}
.prof-handle input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    flex: 1;
    padding: 11px 14px;
    font-family: var(--font-mono);
    font-size: .94rem;
}
.prof-handle input[readonly] {
    color: var(--wo-ink) !important;
    font-weight: 600;
}

.prof-edit__actions {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 8px;
}
.prof-edit__actions .btn-dark {
    background: var(--wo-slab); color: #ff9900;
    border-color: var(--wo-ink);
    font-family: var(--font-display); font-weight: 700;
    padding: 10px 22px;
}
.prof-edit__actions .btn-dark:hover { background: #ff9900; color: var(--wo-ink); border-color: #ff9900; }
@media (max-width: 600px) {
    .prof-grid { grid-template-columns: 1fr; }
    .prof-handle { flex-direction: column; }
    .prof-handle__prefix { border-right: 0; border-bottom: 1px solid var(--wo-line); }
}

/* ============================================================
   VIDEO CALL CARD inside chat (live + ended states)
   ============================================================ */
.msg-callcard {
    background: linear-gradient(135deg, #ffffff 0%, #fffaf2 100%);
    border: 1px solid rgba(255,153,0,.25);
    border-radius: 12px;
    padding: 14px 16px;
    min-width: 280px;
    max-width: 440px;
    box-shadow: 0 4px 12px rgba(38,27,16,.06);
    color: var(--wo-ink);
}
.msg-row--mine .msg-callcard {
    background: linear-gradient(135deg, #3b2a17 0%, #2b1d10 100%);
    border-color: rgba(255,213,138,.30);
    color: #fff;
}
.msg-callcard__head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
}
.msg-callcard__icon {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,153,0,.18);
    color: #ff9900;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.msg-callcard__title {
    font-weight: 700;
    font-family: var(--font-display);
    font-size: .98rem;
    flex: 1;
}
.msg-callcard__live-pill {
    display: inline-flex; align-items: center; gap: 4px;
    background: #b91c1c;
    color: #fff;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .06em;
    font-family: var(--font-mono);
    animation: callLivePulse 1.4s ease-in-out infinite;
}
@keyframes callLivePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(185,28,28,.55); }
    50%      { box-shadow: 0 0 0 6px rgba(185,28,28,0); }
}
.msg-callcard__live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--wo-card);
    animation: callDotBlink 1s ease-in-out infinite;
}
@keyframes callDotBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}
.msg-callcard__ended-pill {
    background: rgba(38,27,16,.08);
    color: var(--wo-ink-2);
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    font-family: var(--font-mono);
    text-transform: uppercase;
}
.msg-row--mine .msg-callcard__ended-pill {
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.75);
}
.msg-callcard__body { font-size: .9rem; }
.msg-callcard__started {
    color: var(--wo-ink-2);
    margin-bottom: 10px;
    font-size: .88rem;
}
.msg-row--mine .msg-callcard__started { color: rgba(255,255,255,.75); }
.msg-row--mine .msg-callcard__started strong { color: #ffd58a; }
.msg-callcard__join {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    background: #ff9900;
    color: #261b10;
    text-decoration: none;
    font-weight: 700;
    border-radius: 8px;
    font-size: .92rem;
    transition: background .14s, transform .08s;
}
.msg-callcard__join:hover { background: #ffaa1f; color: #261b10; transform: translateY(-1px); }
.msg-callcard__join:active { transform: translateY(0); }
.msg-callcard__stats {
    display: flex; flex-wrap: wrap; gap: 14px;
    padding: 10px 0;
    border-top: 1px dashed rgba(38,27,16,.10);
    border-bottom: 1px dashed rgba(38,27,16,.10);
    margin-bottom: 10px;
}
.msg-row--mine .msg-callcard__stats {
    border-color: rgba(255,255,255,.12);
}
.msg-callcard__stat {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .82rem;
    color: var(--wo-ink-2);
}
.msg-row--mine .msg-callcard__stat { color: rgba(255,255,255,.75); }
.msg-callcard__stat i { color: #ff9900; font-size: .95rem; }
.msg-callcard__stat strong {
    color: var(--wo-ink);
    font-family: var(--font-display);
    font-weight: 700;
}
.msg-row--mine .msg-callcard__stat strong { color: #fff; }
.msg-callcard__parts {
    display: flex; flex-wrap: wrap; gap: 8px 12px;
    margin-bottom: 10px;
}
.msg-callcard__part {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .82rem;
}
.msg-callcard__part-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    background: #ff9900;
    color: #261b10;
    font-family: var(--font-display);
    font-weight: 700; font-size: 9px;
    display: inline-flex; align-items: center; justify-content: center;
}
.msg-row--mine .msg-callcard__part-avatar { background: #ffd58a; color: #261b10; }
.msg-callcard__part-name { color: var(--wo-ink); }
.msg-callcard__part-name em { color: var(--wo-text-muted); font-style: normal; font-size: .78rem; }
.msg-row--mine .msg-callcard__part-name { color: rgba(255,255,255,.92); }
.msg-row--mine .msg-callcard__part-name em { color: rgba(255,255,255,.55); }
.msg-callcard__actions {
    display: flex; gap: 8px;
}

/* Search hit accent in the message list */
.msg-row.msg-search-hit .msg-bubble,
.msg-row.msg-search-hit .msg-voice,
.msg-row.msg-search-hit .msg-file,
.msg-row.msg-search-hit .msg-offer {
    box-shadow: 0 0 0 2px rgba(255,153,0,.45);
}

/* ============================================================
   Generic Workofficially modal (used by Video call + Scheduler)
   ============================================================ */
.wo-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
}
.wo-modal[hidden] { display: none; }
.wo-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(38,27,16,.55);
    backdrop-filter: blur(4px);
}
.wo-modal__panel {
    position: relative;
    background: var(--wo-card);
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(38,27,16,.45);
    width: min(640px, 92vw);
    max-height: 90vh;
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: woModalIn .22s cubic-bezier(.2,.9,.3,1.05);
}
.wo-modal__panel--call {
    width: min(1100px, 96vw);
    height: min(720px, 90vh);
}
@keyframes woModalIn {
    from { opacity: 0; transform: scale(.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.wo-modal__head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--wo-line);
    gap: 12px;
}
.wo-modal__head > div:first-child { min-width: 0; flex: 1; }
.wo-modal__title {
    font-family: var(--font-display);
    font-size: 1.25rem; font-weight: 700;
    margin: 0; color: var(--wo-ink);
    display: inline-flex; align-items: center; gap: 8px;
}
.wo-modal__title i { color: #ff9900; }
.wo-modal__sub {
    margin: 4px 0 0; font-size: .82rem;
    color: var(--wo-text-muted);
}
.wo-modal__head-actions { display: flex; gap: 6px; align-items: center; }
.wo-modal__close {
    background: transparent; border: 0;
    font-size: 28px; line-height: 1;
    color: var(--wo-ink-2); cursor: pointer;
    width: 36px; height: 36px;
    border-radius: 50%;
    transition: background .12s;
}
.wo-modal__close:hover { background: rgba(38,27,16,.08); color: var(--wo-ink); }
.wo-modal__body { padding: 22px; overflow-y: auto; flex: 1; }
.wo-modal__body--call { padding: 0; }
.wo-modal__foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--wo-line);
    background: var(--wo-paper);
}
/* (Legacy iframe styles removed - WorkOfficially native video call is now a full page at /call/{pid}) */

/* Schedule modal grid */
.sched-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.sched-field { display: flex; flex-direction: column; gap: 6px; }
.sched-field--full { grid-column: 1 / -1; }
.sched-field > span {
    font-size: .76rem; font-weight: 600; color: var(--wo-ink-2);
    text-transform: uppercase; letter-spacing: .04em;
}
.sched-field input[type="text"],
.sched-field input[type="date"],
.sched-field input[type="time"],
.sched-field select,
.sched-field textarea {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--wo-line);
    border-radius: 8px;
    font-family: inherit; font-size: .94rem;
    background: var(--wo-card);
    color: var(--wo-ink);
    transition: border-color .12s, box-shadow .12s;
}
.sched-field input:focus,
.sched-field select:focus,
.sched-field textarea:focus {
    outline: 0;
    border-color: #ff9900;
    box-shadow: 0 0 0 3px rgba(255,153,0,.16);
}
.sched-where { display: flex; flex-direction: column; gap: 6px; }
.sched-where label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .9rem; color: var(--wo-ink);
    cursor: pointer;
}
.sched-where input[type="radio"] { accent-color: #ff9900; }
.sched-where input[type="text"] { margin-top: 8px; }
@media (max-width: 640px) {
    .sched-grid { grid-template-columns: 1fr; }
}

.inbox-thread__messages {
    flex: 1; padding: 1.4rem; overflow-y: auto; min-height: 0;
    display: flex; flex-direction: column; gap: .5rem;
    background: var(--wo-paper);
}
.msg-day-divider {
    display: flex; align-items: center; gap: .8rem;
    margin: 1rem 0 .3rem;
    font-family: var(--font-mono);
    color: var(--wo-text-muted);
    font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 500;
}
.msg-day-divider::before, .msg-day-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--wo-line);
}
.msg-row { display: flex; align-items: flex-end; gap: .5rem; max-width: 70%; }
.msg-row--mine { margin-left: auto; flex-direction: row-reverse; }
.msg-avatar {
    width: 26px; height: 26px;
    background: var(--wo-paper-2); color: var(--wo-ink-2);
    font-family: var(--font-display); font-weight: 700;
    font-size: 10px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.msg-stack { display: flex; flex-direction: column; min-width: 0; }

/* NAME-LINKS-20260902 - a name that opens a profile should look like it does,
   without turning every name on the site into loud blue link text. The name
   keeps its own colour and weight; the affordance is an underline on hover
   plus a small outbound arrow that only appears then. */
.wo-name-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .12s, color .12s;
}
.wo-name-link:hover,
.wo-name-link:focus-visible {
    color: var(--wo-accent-text, var(--wo-primary-deep));
    border-bottom-color: currentColor;
}
.wo-name-link__hint {
    font-size: .7em;
    margin-left: .28em;
    opacity: 0;
    transition: opacity .12s;
    vertical-align: baseline;
}
.wo-name-link:hover .wo-name-link__hint,
.wo-name-link:focus-visible .wo-name-link__hint { opacity: .65; }
/* Touch devices have no hover, so the arrow would never show. Keep it visible
   but quiet there - on a phone it is the only cue that the name is tappable. */
@media (hover: none) {
    .wo-name-link__hint { opacity: .45; }
}

/* A message avatar that is a link must still lay out exactly like the div it
   replaces - .msg-avatar is a fixed-size flex box, and an <a> defaults to
   inline. */
a.msg-avatar { text-decoration: none; }
a.msg-avatar:hover { filter: brightness(.94); }


/* INBOX-AVATARS-20260902 - these three avatar boxes were built to hold two
   letters: fixed size, flex-centred, their own border-radius. An <img> child
   has to fill the box rather than sit inside it as content, or it lands at its
   natural size and blows the row height out.

   border-radius: inherit matters - the three boxes use DIFFERENT radii (4px,
   4px, 3px), so a hard-coded value here would square off one of them.

   And NOT overflow:hidden on the parents, which is the obvious way to clip a
   photo to its box. .presence-dot is positioned at bottom:-1px right:-1px -
   deliberately overhanging the avatar - so clipping the parent would have
   quietly amputated the online indicator. The img's own border-radius rounds
   the photo; nothing needs to clip the box. */

.inbox-item__avatar > img,
.avatar-circle > img,
.msg-avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

/* The header avatar carries an absolutely-positioned presence dot, so it must
   stay a positioning context - and the dot must sit ABOVE the photo. */
.avatar-with-dot { position: relative; }
.avatar-with-dot .presence-dot { z-index: 1; }

.msg-meta { font-family: var(--font-mono); font-size: .68rem; color: var(--wo-text-muted); padding: 0 .35rem; margin-bottom: 2px; letter-spacing: .02em; }
.msg-meta--mine { text-align: right; }
.msg-bubble {
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 6px 6px 6px 1px;
    padding: .6rem .9rem;
    font-size: .94rem; line-height: 1.45;
    color: var(--wo-ink);
}
.msg-row--mine .msg-bubble {
    background: var(--wo-slab); color: var(--wo-on-slab);
    border-color: var(--wo-ink);
    border-radius: 6px 6px 1px 6px;
}
.msg-system {
    text-align: center; color: var(--wo-text-muted);
    font-family: var(--font-mono);
    font-size: .76rem; margin: 1rem auto;
    padding: .3rem .8rem;
    background: var(--wo-card); border: 1px solid var(--wo-line);
    border-radius: 3px; align-self: center;
}
.msg-row--sending .msg-bubble { opacity: .55; }
.msg-row--failed .msg-bubble { border: 1px solid var(--wo-bad); color: var(--wo-bad); }

/* file attachment card inside a message */
.msg-file {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .4rem .6rem;
    background: var(--wo-paper); color: var(--wo-ink);
    border: 1px solid var(--wo-line);
    border-radius: 4px;
    font-family: var(--font-mono); font-size: .82rem;
    text-decoration: none;
}
.msg-file i { color: var(--wo-primary-deep); font-size: 1.1rem; }
.msg-file .file-size { color: var(--wo-text-muted); font-size: .7rem; }
/* INBOX-FILE-FIX (2026-05-30): "mine" file chip sits on the cream thread
   background (not inside the dark bubble), so white text was invisible.
   Repainted as dark espresso text on warm cream-gold so the filename and
   size are legible while keeping the WO gold-accent feel. */
.msg-row--mine .msg-file {
    background: linear-gradient(180deg, #fdf6e3 0%, #faecc5 100%);
    border-color: rgba(255,153,0,.55);
    color: var(--wo-ink);
    font-weight: 500;
}
.msg-row--mine .msg-file i { color:var(--wo-accent-text); }
.msg-row--mine .msg-file .file-size { color: rgba(38,27,16,.6); }
/* Inline file/PDF/video caption inside a mine bubble */
.msg-row--mine .msg-media__caption {
    background: rgba(38,27,16,.85);
    color: #fff;
    border-top-color: rgba(255,255,255,.08);
}
.msg-row--mine .msg-media__caption a { color: #fff; }
.msg-row--mine .msg-media__caption .file-size { color: rgba(255,255,255,.65); }
.msg-row--mine .msg-media__caption i { color: #ffd58a; }

/* -------- Composer ---------- */
.inbox-composer {
    border-top: 1px solid var(--wo-line);
    background: var(--wo-card);
    padding: 1rem 1.5rem max(1.1rem, env(safe-area-inset-bottom));
    position: relative;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;          /* never let the composer be squeezed away */
}
.composer-inner {
    border: 1px solid var(--wo-line);
    border-radius: 6px;
    background: var(--wo-paper);
    transition: border-color .12s, box-shadow .12s;
}
.composer-inner:focus-within {
    border-color: var(--wo-ink);
    background: var(--wo-card);
    box-shadow: 0 0 0 1px var(--wo-ink);
}
.inbox-composer textarea {
    width: 100%; border: 0; outline: 0; background: transparent;
    padding: .8rem 1rem .3rem;
    font-family: var(--font-body); font-size: .96rem; line-height: 1.45;
    resize: none; max-height: 180px; min-height: 42px;
    color: var(--wo-ink);
}
.composer-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .25rem .55rem .55rem;
}
.composer-toolbar { display: flex; gap: .15rem; }
.composer-send {
    background: var(--wo-slab); color: var(--wo-primary);
    font-family: var(--font-display); font-weight: 700;
    border: 1px solid var(--wo-ink); border-radius: 4px;
    padding: .55rem 1rem; font-size: .88rem;
    display: inline-flex; align-items: center; gap: .4rem;
    cursor: pointer;
    transition: all .14s;
    letter-spacing: -.005em;
}
.composer-send:hover:not(:disabled) {
    background: var(--wo-primary); color: var(--wo-ink); border-color: var(--wo-primary);
}
.composer-send:disabled { opacity: .45; cursor: default; }

/* ============================================================================
 * DETAILS PANEL (right side)
 * ============================================================================ */
.inbox-details {
    background: var(--wo-card);
    border-left: 1px solid var(--wo-line);
    overflow-y: auto;
    padding: 1.25rem 1.25rem 2rem;
    position: relative;
    transition: transform .25s ease, opacity .2s ease;
}
.inbox-details.is-hidden { transform: translateX(100%); opacity: 0; }
.details-close {
    position: absolute; top: .9rem; right: 1rem;
    background: transparent; border: 0;
    font-size: 1.4rem; color: var(--wo-text-muted);
    cursor: pointer; line-height: 1;
}
.details-close:hover { color: var(--wo-ink); }
.details-hero {
    display: flex; flex-direction: column; align-items: center;
    padding: 1.5rem 0 1.25rem;
    border-bottom: 1px solid var(--wo-line);
    margin-bottom: .25rem;
}
.details-name {
    font-family: var(--font-display);
    font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em;
    color: var(--wo-ink);
    margin-top: 1rem;
}
.details-tag {
    font-family: var(--font-mono);
    font-size: .76rem; color: var(--wo-text-muted);
    margin-top: .25rem;
    display: inline-flex; align-items: center; gap: .35rem;
}
.details-tag i { color: var(--wo-primary-deep); }
.details-tag .num { color: var(--wo-ink); font-weight: 500; }
.details-cta {
    margin-top: 1rem;
    color: var(--wo-primary-deep);
    font-family: var(--font-display);
    font-weight: 600; font-size: .9rem;
    text-decoration: none;
    border-bottom: 1px solid var(--wo-primary);
    padding-bottom: 1px;
}
.details-cta:hover { color: var(--wo-primary); }

/* REPORT-20260902: deliberately quieter than .details-cta above it. Reporting
   should be findable, not inviting - it sits under "View profile" as a muted
   text button and only picks up its warning colour on hover. */
.details-report {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-top: .55rem;
    padding: 0;
    background: transparent; border: 0;
    font-size: .78rem; color: var(--wo-muted, #78716c);
    cursor: pointer;
}
.details-report:hover { color: #b91c1c; }

.details-section {
    border-bottom: 1px solid var(--wo-line-soft);
    padding: .25rem 0;
}
.details-section > summary {
    list-style: none; cursor: pointer;
    padding: .9rem .25rem;
    display: flex; align-items: center; gap: .55rem;
    font-family: var(--font-display);
    font-weight: 600; font-size: .94rem;
    color: var(--wo-ink-2);
    transition: color .12s;
}
.details-section > summary::-webkit-details-marker { display: none; }
.details-section > summary i:first-child { color: var(--wo-primary-deep); width: 16px; text-align: center; }
.details-section > summary .chev {
    margin-left: auto; transition: transform .25s;
    font-family: var(--font-mono); font-size: .9rem;
    color: var(--wo-text-muted);
    display: inline-block;
}
.details-section[open] > summary .chev { transform: rotate(180deg); }
.details-section:hover > summary { color: var(--wo-ink); }
.details-body { padding: 0 .25rem 1rem; }
.details-empty {
    font-family: var(--font-mono); font-size: .8rem;
    color: var(--wo-text-muted); margin: 0 0 .7rem;
}
.details-help {
    font-family: var(--font-mono); font-size: .72rem;
    color: var(--wo-text-muted); margin: 0 0 .5rem; letter-spacing: .02em;
}
.details-recap {
    background: var(--wo-paper);
    border: 1px solid var(--wo-line);
    border-radius: 4px;
    padding: .75rem .85rem;
    margin-top: .75rem;
    font-size: .9rem; line-height: 1.45;
    color: var(--wo-ink-2);
}
.details-recap strong { color: var(--wo-ink); }

.details-person {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem 0;
    border-bottom: 1px dashed var(--wo-line-soft);
}
.details-person:last-child { border-bottom: none; }

.details-file {
    display: flex; align-items: center; gap: .55rem;
    padding: .55rem .7rem;
    border: 1px solid var(--wo-line);
    border-radius: 4px;
    text-decoration: none;
    color: var(--wo-ink);
    font-family: var(--font-mono);
    font-size: .82rem;
    margin-bottom: .4rem;
    transition: border-color .12s;
}
.details-file:hover { border-color: var(--wo-ink); }
.details-file i { color: var(--wo-primary-deep); }
.details-file__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.details-file__size { color: var(--wo-text-muted); }

/* ============================================================================
 * NOTIFICATION BELL + POPUP (top-bar)
 * ============================================================================ */
.notif-wrap { position: relative; }
.notif-bell { position: relative; }
.notif-dot {
    position: absolute; top: 6px; right: 6px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--wo-primary);
    box-shadow: 0 0 0 2px var(--wo-card);
    display: none;
}
.notif-dot.is-on { display: block; }
/* Notification popup - Upwork-style: clean rounded card, icon glyph per item,
   plain dividers, no chips. */
.notif-pop {
    position: absolute; right: -8px; top: calc(100% + 10px);
    width: 420px; max-width: calc(100vw - 24px);
    background: var(--wo-card);
    border: 1px solid rgba(38, 27, 16, 0.08);
    border-radius: 14px;
    box-shadow: 0 18px 48px -12px rgba(17, 16, 12, 0.22);
    display: none;
    z-index: 200;
    overflow: hidden;
    transform-origin: top right;
    animation: notif-in .18s ease;
}
@keyframes notif-in {
    from { opacity: 0; transform: translateY(-4px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.notif-pop.is-open { display: block; }
.notif-pop__head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px 10px;
}
.notif-pop__head strong {
    font-family: var(--font-display);
    font-size: 16px; font-weight: 600; letter-spacing: -.005em;
    color: var(--wo-ink);
}
.btn-link-mono {
    background: transparent; border: 0; padding: 0;
    font-family: inherit;
    font-size: 13px; font-weight: 500;
    color: var(--wo-primary-deep);
    cursor: pointer;
    text-decoration: none;
}
.btn-link-mono:hover { text-decoration: underline; }
/* NOTIF-FIX-01 (2026-05-30): pair Mark all read + Clear all in the popup head. */
.notif-pop__actions {
    display: inline-flex; align-items: center; gap: 12px;
}
.notif-pop__actions .btn-link-mono { white-space: nowrap; }
.notif-pop__danger {
    color: #b3261e;
}
.notif-pop__danger:hover { color: #8b1d18; }
.notif-pop__list {
    list-style: none; padding: 0; margin: 0;
    max-height: 440px; overflow-y: auto;
}
.notif-pop__item {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 18px;
    border-top: 1px solid rgba(38, 27, 16, 0.06);
    transition: background .12s;
    cursor: pointer;
}
.notif-pop__item:hover { background: rgba(255, 153, 0, 0.04); }
.notif-pop__icon {
    width: 32px; height: 32px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--wo-ink);
    font-size: 18px;
}
.notif-pop__icon i { line-height: 1; }
.notif-pop__item.is-unread { background: rgba(255, 153, 0, 0.03); }
.notif-pop__item.is-unread .notif-pop__title { color: var(--wo-ink); font-weight: 600; }
.notif-pop__body { flex: 1; min-width: 0; }
/* NOTIF-LINK-20260613: notifications are now clickable links to their target. */
.notif-pop__item { display: block; padding: 0; cursor: default; }
.notif-pop__link {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 18px; color: inherit; text-decoration: none; cursor: pointer;
}
.notif-pop__link:hover, .notif-pop__link:focus { color: inherit; text-decoration: none; }
.notif-pop__title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    color: var(--wo-ink);
    line-height: 1.45;
    word-break: break-word;
}
.notif-pop__text { display: none; }   /* Upwork-style: single-line title only */
.notif-pop__time {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--wo-text-muted);
    margin-top: 4px;
}
.notif-pop__empty, .notif-pop__loading {
    padding: 36px 18px; text-align: center;
    color: var(--wo-text-muted); font-size: 14px;
}
.notif-pop__foot {
    padding: 12px 18px;
    border-top: 1px solid rgba(38, 27, 16, 0.06);
    text-align: center;
}
.notif-pop__foot a {
    color: var(--wo-primary-deep);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
}
.notif-pop__foot a:hover { text-decoration: underline; }

/* "New" tag on luxury features */
.lux-tag {
    font-family: var(--font-mono);
    font-size: .6rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--wo-primary);
    border: 1px solid var(--wo-primary);
    padding: 1px 5px;
    border-radius: 2px;
    margin-right: .3rem;
}

.inbox-empty-state {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 3rem; text-align: center;
}
.inbox-empty-glyph {
    font-family: var(--font-serif); font-style: italic;
    font-size: 5rem; color: var(--wo-primary); opacity: .55;
    margin-bottom: 1rem; line-height: 1;
}

/* Emoji popover */
.emoji-popover {
    position: absolute; bottom: 70px; left: 1rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line); border-radius: 6px;
    padding: .5rem;
    display: none;
    grid-template-columns: repeat(8, 32px); gap: 2px;
    box-shadow: var(--wo-shadow-pop);
    z-index: 50;
}
.emoji-popover.is-open { display: grid; }
.emoji-popover button {
    background: transparent; border: none; cursor: pointer;
    width: 32px; height: 32px; font-size: 1.2rem;
    border-radius: 3px; transition: background .1s;
}
.emoji-popover button:hover { background: var(--wo-paper); }

/* AI rewrite popover */
.ai-popover {
    position: absolute; bottom: 70px; left: 1rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line); border-radius: 6px;
    padding: .65rem;
    display: none; flex-direction: column; gap: .25rem;
    box-shadow: var(--wo-shadow-pop);
    min-width: 220px;
    z-index: 50;
}
.ai-popover.is-open { display: flex; }
.ai-popover button {
    background: transparent; border: 1px solid transparent;
    text-align: left; padding: .45rem .65rem;
    font-family: var(--font-body); font-size: .87rem;
    color: var(--wo-ink);
    border-radius: 3px; cursor: pointer;
    transition: all .12s;
    display: flex; align-items: center; gap: .55rem;
}
.ai-popover button:hover { background: var(--wo-paper); border-color: var(--wo-line); }
.ai-popover button .ai-key {
    color: var(--wo-primary-deep);
    font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
    margin-right: .25rem;
}

/* file upload chip during upload - INBOX-FIX-04 (2026-05-27): animated
   progress bar + percentage + success snap + error state. Previous build
   showed only static "Uploading…" text. */
.composer-upload-chip {
    position: absolute; bottom: 70px; left: 1rem; right: 1rem; max-width: 420px;
    background: var(--wo-card); border: 1px solid var(--wo-line); border-radius: 10px;
    padding: .55rem .8rem;
    font-family: var(--font-mono); font-size: .8rem;
    color: var(--wo-ink); display: none; gap: .55rem; align-items: center;
    box-shadow: 0 8px 24px rgba(38, 27, 16, 0.10);
}
.composer-upload-chip.is-open { display: inline-flex; }
.composer-upload-chip > i { font-size: 1.05rem; color: var(--wo-accent, #d97706); }
.composer-upload-chip.is-uploading > i { animation: wo-upload-pulse 1.2s ease-in-out infinite; }
@keyframes wo-upload-pulse {
    0%, 100% { transform: translateY(0);    opacity: .85; }
    50%      { transform: translateY(-3px); opacity: 1; }
}
.composer-upload-chip__label   { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-upload-chip__label strong { font-weight: 600; }
.composer-upload-chip__pct     { font-variant-numeric: tabular-nums; opacity: .75; font-size: .75rem; min-width: 2.6em; text-align: right; }
.composer-upload-chip__bar     { flex: 0 0 110px; height: 4px; background: rgba(38, 27, 16, .08); border-radius: 999px; overflow: hidden; position: relative; }
.composer-upload-chip__fill    {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--wo-accent, #d97706), #f59e0b);
    width: 0%; transition: width .2s ease;
    border-radius: 999px; position: relative;
}
.composer-upload-chip__fill::after {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%);
    background-size: 200% 100%;
    animation: wo-upload-shimmer 1.4s linear infinite;
}
@keyframes wo-upload-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.composer-upload-chip.is-complete .composer-upload-chip__fill { background: #16a34a; }
.composer-upload-chip.is-complete .composer-upload-chip__fill::after { animation: none; opacity: 0; }
.composer-upload-chip.is-complete > i { color: #16a34a; animation: none; }
.composer-upload-chip.is-error { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.composer-upload-chip.is-error > i { color: #dc2626; animation: none; }
.composer-upload-chip.is-error .composer-upload-chip__pct,
.composer-upload-chip.is-error .composer-upload-chip__bar { display: none; }

/* INBOX-FIX-03 - Office file cards in message bubbles (Word / Excel / PowerPoint). */
.msg-media--office {
    display: flex; gap: .75rem; align-items: center;
    padding: .75rem .85rem; background: var(--wo-card); border: 1px solid var(--wo-line);
    border-radius: 12px; max-width: 360px;
}
.msg-media__office-icon {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px;
    display: grid; place-items: center; font-size: 1.5rem; color: #fff;
}
.msg-media--doc .msg-media__office-icon { background: #2b579a; }
.msg-media--xls .msg-media__office-icon { background: #217346; }
.msg-media--ppt .msg-media__office-icon { background: #b7472a; }
.msg-media__office-body { flex: 1 1 auto; min-width: 0; }
.msg-media__office-name { font-weight: 600; font-size: .92rem; color: var(--wo-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-media__office-meta { font-size: .75rem; color: var(--wo-muted, #6b7280); margin-top: .15rem; }
.msg-media__office-actions { display: flex; gap: .4rem; margin-top: .45rem; flex-wrap: wrap; }
.msg-media__office-btn {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .75rem; padding: .25rem .55rem; border-radius: 999px;
    background: rgba(38, 27, 16, .05); color: var(--wo-ink); text-decoration: none;
    transition: background .15s ease;
}
.msg-media__office-btn:hover { background: rgba(38, 27, 16, .12); color: var(--wo-ink); }
.msg-media__office-btn i { font-size: .9rem; }
.msg-row--mine .msg-media--office { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); }
.msg-row--mine .msg-media__office-name { color: #fff; }
.msg-row--mine .msg-media__office-meta { color: rgba(255,255,255,.7); }
.msg-row--mine .msg-media__office-btn  { background: rgba(255,255,255,.15); color: #fff; }
.msg-row--mine .msg-media__office-btn:hover { background: rgba(255,255,255,.25); color: #fff; }

/* -------- Workroom chips ---------- */
.task-chip {
    background: var(--wo-card); border: 1px solid var(--wo-line);
    border-radius: 4px; padding: .55rem .85rem; margin-bottom: .5rem;
    font-size: .9rem;
}

/* ============================================================================
 * AUTH SHELL - animated split layout
 *   - Left: editorial cream panel with wordmark + headline + quote
 *   - Right: refined form with sweep-underline inputs, animated button
 * ============================================================================ */
.auth-page {
    background: var(--wo-paper);
    overflow: hidden;
}
.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100vh;
}
/* MOBILE-NO-SIDEWAYS-20261014: minmax(0, 1fr), not 1fr. A plain 1fr column
   cannot shrink below its widest line, so on a phone the sign-in page was
   17px wider than the screen and slid sideways. */
@media (max-width: 900px) { .auth-shell { grid-template-columns: minmax(0, 1fr); } }

/* ----- LEFT panel - quiet, atmospheric ----- */
.auth-side {
    position: relative;
    background:
        radial-gradient(1100px 800px at 5% -5%, rgba(255,153,0,.16) 0%, transparent 55%),
        radial-gradient(700px 500px at 85% 110%, rgba(217,120,0,.10) 0%, transparent 60%),
        linear-gradient(180deg, var(--wo-paper) 0%, var(--wo-paper-2) 100%);
    overflow: hidden;
    border-right: 1px solid var(--wo-line);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 3rem clamp(2rem, 5vw, 4.5rem);
}
@media (max-width: 900px) { .auth-side { display: none; } }

/* AUTH MOBILE SCROLL FIX (2026-06-22): the auth shell is a 100vh split-screen
   with body { overflow:hidden } and a vertically-centered form (margin:auto 0).
   On phones the brand panel is hidden and a tall form (e.g. register, with the
   role cards) was CLIPPED with no way to scroll. Fix: let the page scroll and
   flow the form from the top. Desktop split-screen is unchanged. */
@media (max-width: 900px) {
    body.auth-page { overflow: visible; }            /* allow the page to scroll */
    .auth-shell    { min-height: 0; }                /* don't force the grid to 100vh */
    .auth-main     { min-height: 100dvh; padding-top: 1.75rem; padding-bottom: 1.75rem; }
    .auth-form-wrap { margin: 0 auto; }              /* top-aligned, not vertically clipped */
}
/* warm paper grain - replaces the geometric marks */
.auth-side::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    opacity: .55; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><filter id='n'><feTurbulence baseFrequency='0.82' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.12  0 0 0 0 0.06  0 0 0 0.42 0'/></filter><rect width='320' height='320' filter='url(%23n)'/></svg>");
    background-size: 320px 320px;
}
/* warm halo - static, atmospheric, not animated */
.auth-side::after {
    content: ''; position: absolute; inset: -20% -20% auto -20%;
    height: 70%; pointer-events: none;
    background: radial-gradient(circle at 30% 30%, rgba(255,184,77,.20), transparent 55%);
}
.auth-side__inner { position: relative; z-index: 1; max-width: 460px; }
/* No entrance animations - render statically, one place, stuck. */

.auth-brand {
    display: inline-flex; align-items: center; gap: .65rem;
    text-decoration: none; margin-bottom: 3rem;
}
.auth-eyebrow {
    font-family: var(--font-mono);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--wo-ink-2);
    display: inline-flex; align-items: center; gap: .55rem;
    margin-bottom: 1.2rem;
}
.auth-eyebrow__dot {
    width: 8px; height: 8px; background: var(--wo-primary);
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(255,153,0,.18);
    animation: livePulse 2.2s ease-in-out infinite;
}

.auth-headline {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.4rem, 4.5vw, 3.4rem);
    line-height: 1.02;
    letter-spacing: -.04em;
    color: var(--wo-ink);
    margin-bottom: 2.4rem;
}
.auth-headline .serif {
    font-family: var(--font-serif); font-style: italic; font-weight: 400;
    color: var(--wo-primary-deep);
    letter-spacing: -.02em;
}
/* Words render statically - no animation, no movement, one place. */
.auth-headline .word {
    display: inline-block;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
}
/* Static quote - shows the first one only, no rotation. */
.auth-quotes {
    position: relative;
    padding: .25rem 0 .25rem 1.4rem;
    margin: 0 0 2.4rem;
    max-width: 400px;
    border-left: 1px solid var(--wo-primary);
}
.auth-quote {
    /* Hide all quotes by default … */
    display: none;
}
.auth-quote.is-active {
    /* … then show only the first (server gives it .is-active). */
    display: block;
    opacity: 1;
}
.auth-quote p {
    font-family: var(--font-serif); font-style: italic; font-weight: 400;
    font-size: 1.1rem; line-height: 1.45;
    color: var(--wo-ink-2);
    margin: 0 0 .7rem;
}
.auth-quote cite {
    font-style: normal; font-family: var(--font-mono);
    font-size: .76rem; color: var(--wo-text-muted);
    letter-spacing: .04em;
}
.auth-quote-nav { display: none; }
/* Numbered footer stats - animated count-up on page load */
.auth-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    border-top: 1px solid var(--wo-line);
    padding-top: 1.6rem;
    margin-top: 2rem;
}
.auth-stat__num {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.035em;
    color: var(--wo-ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.auth-stat__num .accent { color: var(--wo-primary-deep); }
.auth-stat__num .unit { font-family: var(--font-mono); font-size: .9rem; color: var(--wo-text-muted); font-weight: 500; margin-left: 4px; }
.auth-stat__label {
    font-family: var(--font-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--wo-text-muted);
    margin-top: .4rem;
    line-height: 1.3;
}

/* AUTH-REPUTATION v2 (2026-05-30): creative Reputation Bridge preview on
   login/signup. Replaces the small pill with a mock profile card showing
   reviews flowing in from Upwork + Fiverr. Editorial cream-gold palette. */
.auth-rep {
    position: relative;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--wo-line);
}
.auth-rep__stamp {
    position: absolute;
    top: -22px; right: 0;
    width: 76px; height: 76px;
    border-radius: 50%;
    background: linear-gradient(140deg, #ffd97a 0%, #ffb340 60%, #ff9900 100%);
    box-shadow: 0 6px 18px rgba(255, 153, 0, .35),
                0 1px 0 rgba(255, 255, 255, .6) inset;
    color: #3a2400;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    transform: rotate(8deg);
    font-family: var(--font-mono);
}
.auth-rep__stamp-num {
    font-size: 1.4rem;
    font-weight: 900;
    font-family: var(--font-display);
    line-height: 1;
}
.auth-rep__stamp-label {
    font-size: .52rem;
    letter-spacing: .12em;
    font-weight: 700;
    margin-top: 2px;
    opacity: .85;
    line-height: 1.15;
}
.auth-rep__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--font-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color:var(--wo-accent-text);
    font-weight: 700;
    margin-bottom: .35rem;
}
.auth-rep__pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: #ff9900;
    box-shadow: 0 0 0 0 rgba(255, 153, 0, .65);
    animation: authRepPulse 1.8s ease-out infinite;
}
@keyframes authRepPulse {
    0%   { box-shadow: 0 0 0 0   rgba(255, 153, 0, .65); }
    70%  { box-shadow: 0 0 0 10px rgba(255, 153, 0, 0); }
    100% { box-shadow: 0 0 0 0   rgba(255, 153, 0, 0); }
}
.auth-rep__title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--wo-ink);
    margin: 0 0 .35rem;
    letter-spacing: -.015em;
}
.auth-rep__title .serif {
    font-family: var(--font-serif, "Instrument Serif", serif);
    font-style: italic;
    font-weight: 500;
    color:var(--wo-accent-text);
}
.auth-rep__sub {
    font-size: .92rem;
    line-height: 1.5;
    color: var(--wo-text-muted);
    margin: 0 0 1rem;
}

/* The mock profile card */
.auth-rep__card {
    background: linear-gradient(180deg, #fff 0%, #fffaf0 100%);
    border: 1px solid rgba(255, 153, 0, .25);
    border-radius: 12px;
    padding: .95rem 1rem 1rem;
    box-shadow: 0 8px 24px rgba(38, 27, 16, .08),
                0 1px 0 rgba(255, 255, 255, .9) inset;
    position: relative;
}
.auth-rep__card::after {
    /* subtle corner tape so the card feels printed/pinned */
    content: "VERIFIED";
    position: absolute;
    top: -8px; right: 12px;
    font-family: var(--font-mono);
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: #5b3d00;
    background: linear-gradient(180deg, #ffd97a, #ffb340);
    padding: 3px 8px;
    border-radius: 3px;
    border: 1px solid rgba(196, 130, 0, .45);
    box-shadow: 0 2px 6px rgba(255, 153, 0, .35);
}
.auth-rep__card-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .7rem;
}
.auth-rep__avatar {
    width: 40px; height: 40px;
    background: #261b10;
    color: #ff9900;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .04em;
}
.auth-rep__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--wo-ink);
    display: inline-flex; align-items: center; gap: .35rem;
}
.auth-rep__name i { color: #1d8a4e; font-size: .9rem; }
.auth-rep__meta {
    font-family: var(--font-mono);
    font-size: .68rem;
    color: var(--wo-text-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: 1px;
}
.auth-rep__stars {
    display: flex; align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem .65rem;
    background: rgba(255, 153, 0, .07);
    border-radius: 8px;
    margin-bottom: .65rem;
}
.auth-rep__star-row {
    display: inline-flex; align-items: center; gap: .15rem;
}
.auth-rep__star-row i { color: #ff9900; font-size: .82rem; }
.auth-rep__score {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--wo-ink);
    margin-left: .5rem;
    font-variant-numeric: tabular-nums;
}
.auth-rep__count {
    font-family: var(--font-mono);
    font-size: .68rem;
    color: var(--wo-text-muted);
    letter-spacing: .04em;
}
.auth-rep__sources {
    display: flex; gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: .65rem;
}
.auth-rep__chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .55rem .3rem .35rem;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--wo-ink);
    background: var(--wo-paper);
    border: 1px solid var(--wo-line);
}
.auth-rep__chip strong { color:var(--wo-accent-text); font-weight: 700; }
.auth-rep__chip-glyph {
    width: 18px; height: 18px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 800;
    color: #fff;
}
.auth-rep__chip--upwork .auth-rep__chip-glyph { background: #14a800; }
.auth-rep__chip--fiverr .auth-rep__chip-glyph { background: #1dbf73; }
.auth-rep__transfer {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-mono);
    font-size: .7rem;
    color: #1d8a4e;
    font-weight: 600;
    letter-spacing: .02em;
}
.auth-rep__transfer i { font-size: .9rem; }
.auth-rep__cta {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-top: 1rem;
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--wo-ink);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: color .15s ease, gap .15s ease;
}
.auth-rep__cta:hover { color:var(--wo-accent-text); gap: .6rem; }
@media (prefers-reduced-motion: reduce) {
    .auth-rep__pulse { animation: none; }
}

/* ----- RIGHT panel ----- */
.auth-main {
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 3rem clamp(1.5rem, 5vw, 4rem);
    background: var(--wo-card);
    position: relative;
}
.auth-form-wrap {
    width: 100%; max-width: 440px;
    margin: auto 0;
    /* No fade-in - render in place immediately. */
}
.auth-step {
    font-family: var(--font-mono);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--wo-text-muted);
    margin-bottom: 1rem;
    position: relative; padding-left: 1.2rem;
}
.auth-step::before {
    content: ''; position: absolute; left: 0; top: .55em;
    width: .8rem; height: 1px; background: var(--wo-primary);
}
.auth-title {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(1.8rem, 3vw, 2.3rem);
    letter-spacing: -.035em; line-height: 1.05;
    color: var(--wo-ink); margin-bottom: .5rem;
}
.auth-sub { color: var(--wo-text-muted); margin-bottom: 2rem; font-size: 1.02rem; }

/* Inputs - floating-label feel with sweep underline on focus */
.auth-form { display: flex; flex-direction: column; gap: 1.4rem; }
.auth-field {
    position: relative;
    display: block;
    border-bottom: 1px solid var(--wo-line);
    padding: 1.15rem 0 .35rem;
    cursor: text;
}
.auth-field__label {
    position: absolute;
    top: 1.25rem; left: 0;
    font-family: var(--font-mono);
    font-size: .92rem;
    color: var(--wo-text-muted);
    letter-spacing: -.005em;
    pointer-events: none;
    transition: transform .25s cubic-bezier(.2,.7,.2,1), font-size .25s, color .25s;
    transform-origin: left top;
}
/* NAV-FIX (2026-05-29): pure-CSS floating label - was JS-driven via
   .is-focused / .has-value classes that nobody set, so the label sat on
   top of the typed text. Now driven by :focus-within (label floats up
   while typing) and :has(input:not(:placeholder-shown)) (label stays up
   once a value is present). Requires placeholder=" " on every input so
   :placeholder-shown can flip on/off - added in the auth view files. */
.auth-field:focus-within .auth-field__label,
.auth-field:has(input:not(:placeholder-shown)) .auth-field__label,
.auth-field.is-focused .auth-field__label,
.auth-field.has-value  .auth-field__label {
    transform: translateY(-1.1rem) scale(.78);
    color: var(--wo-primary-deep);
    text-transform: uppercase;
    letter-spacing: .14em;
}
.auth-field input {
    width: 100%;
    border: 0; outline: 0;
    background: transparent;
    font-family: var(--font-body); font-size: 1rem;
    color: var(--wo-ink);
    padding: .35rem 0 .25rem;
    line-height: 1.4;
}
/* Placeholders are whitespace ( placeholder=" " ) - keep them invisible. */
.auth-field input::placeholder { color: transparent; }
/* Sweep-in underline on focus */
.auth-field__line {
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--wo-primary);
    transform: scaleX(0); transform-origin: left center;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.auth-field:focus-within .auth-field__line,
.auth-field.is-focused .auth-field__line { transform: scaleX(1); }
.auth-field__action {
    position: absolute; right: 0; top: 1.25rem;
    font-family: var(--font-mono);
    font-size: .78rem; color: var(--wo-text-muted);
    text-decoration: none;
    transition: color .15s;
}
.auth-field__action:hover { color: var(--wo-primary-deep); }
.auth-hint {
    font-family: var(--font-mono);
    font-size: .72rem; color: var(--wo-text-muted);
    margin: .55rem 0 0; letter-spacing: .04em;
    display: flex; align-items: center; gap: .4rem;
}
.auth-hint::before {
    content: ''; width: 4px; height: 4px;
    background: var(--wo-primary); border-radius: 50%;
}

/* Role picker */
.auth-roles { display: flex; flex-direction: column; gap: .65rem; }
.auth-roles__label {
    font-family: var(--font-mono);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--wo-text-muted);
}
.auth-roles__group { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.auth-role { cursor: pointer; }
.auth-role input { position: absolute; opacity: 0; pointer-events: none; }
.auth-role__card {
    display: flex; flex-direction: column; gap: .25rem;
    border: 1px solid var(--wo-line);
    border-radius: 6px;
    padding: 1rem 1.1rem;
    transition: all .18s ease;
    background: var(--wo-card);
}
.auth-role__card i { color: var(--wo-primary-deep); font-size: 1.1rem; margin-bottom: .35rem; }
.auth-role__card strong { font-family: var(--font-display); font-weight: 700; color: var(--wo-ink); }
.auth-role__card span { font-family: var(--font-mono); font-size: .76rem; color: var(--wo-text-muted); }
.auth-role input:checked + .auth-role__card {
    border-color: var(--wo-ink);
    background: var(--wo-paper);
    box-shadow: 0 0 0 1px var(--wo-ink);
}
.auth-role input:checked + .auth-role__card i { color: var(--wo-primary); }

.auth-agree {
    display: flex; align-items: flex-start; gap: .6rem;
    font-size: .88rem; color: var(--wo-text-muted);
    cursor: pointer;
}
.auth-agree input {
    width: 18px; height: 18px;
    appearance: none;
    border: 1px solid var(--wo-line);
    border-radius: 3px;
    margin-top: 2px;
    cursor: pointer; flex-shrink: 0;
    position: relative;
    transition: all .15s;
    background: var(--wo-card);
}
.auth-agree input:checked {
    background: var(--wo-slab); border-color: var(--wo-ink);
}
.auth-agree input:checked::after {
    content: '✓'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--wo-primary); font-size: 12px; font-weight: 700;
}
.auth-agree a { color: var(--wo-ink); border-bottom: 1px solid var(--wo-primary); text-decoration: none; }
.auth-agree a:hover { color: var(--wo-primary-deep); }

/* Submit button - magnetic + slide-arrow + loading state */
.auth-submit {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    gap: .7rem;
    padding: 1.05rem 1.5rem;
    background: var(--wo-slab); color: var(--wo-on-slab);
    border: 1px solid var(--wo-ink);
    border-radius: 4px;
    font-family: var(--font-display); font-weight: 700;
    font-size: 1rem; letter-spacing: -.005em;
    cursor: pointer;
    overflow: hidden;
    will-change: transform;
    transition:
        background .18s ease, color .18s, border-color .18s,
        transform .35s cubic-bezier(.18,.7,.18,1),
        box-shadow .25s ease;
    box-shadow: 0 2px 0 var(--wo-line);
}
.auth-submit:hover {
    box-shadow: 0 8px 28px -8px rgba(38,27,16,.45), 0 2px 0 var(--wo-line);
}
.auth-submit::before {
    content: ''; position: absolute; inset: 0;
    background: var(--wo-primary);
    transform: translateX(-101%);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
    z-index: 0;
}
.auth-submit:hover { color: var(--wo-ink); }
.auth-submit:hover::before { transform: translateX(0); }
.auth-submit:active { transform: translateY(1px); }
.auth-submit__label,
.auth-submit__arrow,
.auth-submit__spin { position: relative; z-index: 1; transition: opacity .18s, transform .25s; }
.auth-submit__arrow { transform: translateX(-2px); }
.auth-submit:hover .auth-submit__arrow { transform: translateX(2px); }
.auth-submit__spin { display: none; }
.auth-submit.is-loading .auth-submit__label,
.auth-submit.is-loading .auth-submit__arrow { opacity: 0; }
.auth-submit.is-loading .auth-submit__spin {
    display: inline-flex;
    position: absolute; inset: 0; align-items: center; justify-content: center;
    animation: spin 1s linear infinite;
}
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Continue-with-Google button - refined, not Material-template */
.auth-social {
    display: flex; align-items: center; justify-content: center;
    gap: .7rem;
    padding: .85rem 1.1rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 4px;
    text-decoration: none;
    color: var(--wo-ink);
    font-family: var(--font-display); font-weight: 600;
    font-size: .95rem; letter-spacing: -.005em;
    transition: border-color .15s ease, background .15s ease, transform .12s;
    margin-bottom: 1.5rem;
}
.auth-social:hover {
    border-color: var(--wo-ink);
    background: var(--wo-paper);
    color: var(--wo-ink);
    transform: translateY(-1px);
}
.auth-social:active { transform: translateY(0); }
.auth-social__g { display: inline-block; flex-shrink: 0; }

.auth-divider {
    display: flex; align-items: center; gap: 1rem;
    margin: 0 0 1.5rem;
    color: var(--wo-text-muted);
    font-family: var(--font-mono);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
}
.auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--wo-line);
}

/* OTP / 2FA - big, tracked, monospace input */
.auth-otp {
    margin-bottom: 1.8rem;
    border: 1px solid var(--wo-line);
    border-radius: 6px;
    background: var(--wo-card);
    transition: border-color .15s, box-shadow .15s;
}
.auth-otp:focus-within {
    border-color: var(--wo-ink);
    box-shadow: 0 0 0 1px var(--wo-ink), 0 0 0 4px rgba(255,153,0,.15);
}
.auth-otp input {
    width: 100%;
    border: 0; outline: 0; background: transparent;
    font-family: var(--font-mono); font-weight: 600;
    font-size: 1.6rem; letter-spacing: .35em;
    text-align: center;
    color: var(--wo-ink);
    padding: 1rem 1rem;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.auth-otp input::placeholder {
    color: var(--wo-line);
    letter-spacing: .15em;
    font-weight: 400;
}

.auth-alt {
    margin-top: 2rem;
    font-family: var(--font-mono); font-size: .85rem;
    color: var(--wo-text-muted);
    display: flex; gap: .4rem;
}
.auth-alt a {
    color: var(--wo-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--wo-primary);
}
.auth-alt a:hover { color: var(--wo-primary-deep); }

.auth-foot {
    display: flex; gap: 1.5rem;
    font-family: var(--font-mono); font-size: .72rem; color: var(--wo-text-muted);
    margin-top: 2rem;
    border-top: 1px solid var(--wo-line);
    padding-top: 1rem;
}
.auth-foot a { color: var(--wo-text-muted); text-decoration: none; }
.auth-foot a:hover { color: var(--wo-ink); }

/* Flash alerts on auth pages - minimal, no Bootstrap chrome */
.auth-form-wrap .alert {
    border: 1px solid var(--wo-line);
    border-left: 3px solid var(--wo-primary);
    border-radius: 4px;
    background: var(--wo-paper);
    color: var(--wo-ink);
    font-size: .92rem;
    padding: .75rem 1rem;
    margin-bottom: 1.2rem;
}
.auth-form-wrap .alert-danger,
.auth-form-wrap .alert-warning { border-left-color: var(--wo-bad); }

/* -------- Admin sidebar ---------- */
.admin-sidebar { background: var(--wo-paper); border-right: 1px solid var(--wo-line); }
.admin-sidebar .nav-link {
    color: var(--wo-ink-2); border-radius: 4px;
    padding: .5rem .75rem; font-weight: 500; font-size: .9rem;
}
.admin-sidebar .nav-link:hover { background: var(--wo-card); color: var(--wo-ink); }
.admin-sidebar .nav-link.active {
    background: var(--wo-slab); color: var(--wo-primary);
    font-weight: 600;
}

/* ============================================================================
 * LEGAL PROSE - Terms + Privacy editorial layout
 * ============================================================================ */
.legal-toc {
    position: sticky; top: 5rem;
    padding-right: 1rem;
}
.legal-toc .spec-tag { color: var(--wo-primary-deep); }
.legal-toc ol {
    list-style: none; counter-reset: toc;
    padding: 0; margin: 1rem 0 0;
    font-family: var(--font-mono); font-size: .82rem;
}
.legal-toc ol li {
    counter-increment: toc;
    padding: .4rem 0;
    border-bottom: 1px dashed var(--wo-line-soft);
}
.legal-toc ol li::before {
    content: counter(toc, decimal-leading-zero);
    color: var(--wo-primary-deep);
    font-weight: 600; margin-right: .55rem;
}
.legal-toc a {
    color: var(--wo-ink-2); text-decoration: none;
    border: none; transition: color .12s;
}
.legal-toc a:hover { color: var(--wo-primary-deep); }

.legal-prose {
    max-width: 720px;
    font-size: 1.02rem; line-height: 1.7;
    color: var(--wo-ink-2);
}
.legal-prose section { margin-bottom: 2.8rem; scroll-margin-top: 5rem; }
.legal-prose h2 {
    font-family: var(--font-display);
    font-size: 1.55rem; font-weight: 700; letter-spacing: -.025em;
    color: var(--wo-ink);
    margin: 0 0 .9rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--wo-line);
}
.legal-prose section:first-of-type h2 { border-top: none; padding-top: 0; }
.legal-prose p { margin: 0 0 1rem; }
.legal-prose ul { margin: 0 0 1rem; padding-left: 1.4rem; }
.legal-prose ul li { margin-bottom: .5rem; padding-left: .15rem; }
.legal-prose ul li::marker { color: var(--wo-primary-deep); }
.legal-prose code {
    font-family: var(--font-mono); font-size: .88em;
    background: var(--wo-paper-2);
    border: 1px solid var(--wo-line);
    padding: 1px 6px; border-radius: 3px;
    color: var(--wo-ink);
    word-break: break-all;
}
.legal-prose a {
    color: var(--wo-ink);
    border-bottom: 1px solid var(--wo-primary);
    text-decoration: none;
}
.legal-prose a:hover { color: var(--wo-primary-deep); }

/* ============================================================================
 * FREELANCER PROFILE - rich, future-ready
 * ============================================================================ */
.profile-hero { position: relative; padding-bottom: 1.5rem; }
.profile-hero__cover {
    height: 200px;
    background:
        radial-gradient(900px 400px at 5% 0%, rgba(255,153,0,.22) 0%, transparent 65%),
        radial-gradient(700px 300px at 95% 0%, rgba(217,120,0,.16) 0%, transparent 60%),
        linear-gradient(180deg, var(--wo-paper-2) 0%, var(--wo-paper) 100%);
    border-bottom: 1px solid var(--wo-line);
}
.profile-hero__card {
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin-top: -80px;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr 280px;
    gap: 1.75rem;
    align-items: flex-start;
    box-shadow: var(--wo-shadow-md);
}
@media (max-width: 900px) {
    .profile-hero__card { grid-template-columns: 1fr; gap: 1.25rem; }
}
.profile-hero__left {
    display: flex; flex-direction: column; align-items: center; gap: .75rem;
}
.profile-hero__avatar {
    width: 110px; height: 110px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--wo-primary), var(--wo-primary-strong));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 800; font-size: 38px; letter-spacing: -.03em;
    box-shadow: 0 6px 18px rgba(255,153,0,.35);
}
/* AVATAR-FIX-20260821: when there is a real head-shot, the photo must FILL the
   tile. The container is a rounded square with an orange gradient behind it
   (built for initials), so a circular image left the gradient showing at all
   four corners. Drop the gradient, clip to the tile, and let the photo cover. */
.profile-hero__avatar--photo {
    background: none;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    overflow: hidden;
    padding: 0;
}
.profile-hero__avatar--photo > img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    /* AVATAR-CROP-20260821: cover crops from the CENTRE by default, which clipped
       the top of the head on portrait head-shots.
       Two things are needed, because object-position alone is not enough:
         1. anchor the crop to the TOP of the source, so every pixel of headroom
            the photo actually has is used rather than split between top and bottom;
         2. nudge down with a transform, which works even when the source is close
            to square and there is little or no overflow for object-position to move.
       The small scale stops the translate from leaving a gap at the top edge. */
    /* AVATAR-CROP-20260821: photos are now framed by the user at upload time and
       stored as a square, so the tile needs no offset or zoom - it just shows
       what they chose. The previous global nudge was an attempt to guess one
       crop that suited every photo, which it never could. Older avatars uploaded
       before the cropper simply centre-crop; re-uploading gives full control. */
    object-position: 50% 50%;
    display: block;
}
/* Same story in the header: .avatar-circle is a 38px rounded SQUARE, so a 32px
   circle sat inside it with the slab background visible around the edge. */
img.avatar-circle--img {
    background: none;
    padding: 0;
    object-fit: cover;
    /* Same headroom treatment, scaled to this much smaller 38px tile. */
    object-position: 50% 50%;
    display: block;
}
.profile-hero__main { min-width: 0; }
.profile-hero__name-row {
    display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
    margin-bottom: .35rem;
}
.profile-hero__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--wo-ink);
    margin: 0;
}
.profile-verified {
    background: var(--wo-primary-soft);
    color: var(--wo-primary-deep);
    font-family: var(--font-mono);
    font-size: .68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em;
    padding: .2rem .55rem;
    border-radius: 3px;
    display: inline-flex; align-items: center; gap: .3rem;
}

/* ──────────────────────────────────────────────────────────
   PROFILE-TIER-V2 (2026-06-01) - Creative tier medal
   A minted "medal" badge: circular icon stamp on the left,
   tier wordmark on the right. Each tier has its own
   stamp colour, wordmark colour, and subtle texture so the
   badge feels earned, not just a coloured pill.
   ────────────────────────────────────────────────────────── */
.tier-medal {
    --stamp-bg: #ddc28a;
    --stamp-ring: #fffaee;
    --stamp-fg: #4a3015;
    --plate-bg: #fffaee;
    --plate-border: rgba(180, 140, 70, .35);
    --plate-fg: #3a2412;

    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 3px 12px 3px 3px;
    border-radius: 999px;
    background: var(--plate-bg);
    border: 1px solid var(--plate-border);
    color: var(--plate-fg);
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .7) inset,
        0 -1px 0 rgba(58, 36, 18, .04) inset,
        0 2px 6px rgba(58, 36, 18, .08);
    transition: transform .16s ease, box-shadow .16s ease;
    cursor: default;
    user-select: none;
    white-space: nowrap;
    vertical-align: middle;
}
.tier-medal:hover {
    transform: translateY(-1px) rotate(-.6deg);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .7) inset,
        0 -1px 0 rgba(58, 36, 18, .04) inset,
        0 6px 14px rgba(58, 36, 18, .14);
}

/* The minted "stamp" - a small coloured disc with the tier icon */
.tier-medal__stamp {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--stamp-bg);
    color: var(--stamp-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow:
        0 0 0 2px var(--stamp-ring),
        0 0 0 3px var(--plate-border),
        inset 0 1px 0 rgba(255, 255, 255, .35),
        inset 0 -1px 0 rgba(58, 36, 18, .14);
    flex: 0 0 auto;
}
.tier-medal__stamp i {
    font-size: 11px;
    line-height: 1;
}
.tier-medal__name {
    padding-right: 1px;
}

/* ── Start Star - cream / Newcomer ──
   Light, friendly, "fresh enrolment" feel. */
.tier-medal--start_star {
    --plate-bg: linear-gradient(180deg, #fffaee 0%, #f7eed5 100%);
    /* TIER-OUTLINE-20261012 (owner): every tier wears a clear outline in its
       own colour, as Prime Pro and Expert Elite do. Was a faint .32 tan. */
    --plate-border: #d4b47a;
    --plate-fg: #5a3a1c;
    --stamp-bg: radial-gradient(circle at 30% 30%, #fff3cf 0%, #d9b87b 100%);
    --stamp-ring: #fffaee;
    --stamp-fg: #6b4c20;
}

/* ── Gold Genius - gold / Top 50% ──
   Warm gilt, brighter stamp, espresso wordmark for contrast. */
.tier-medal--gold_genius {
    --plate-bg: linear-gradient(160deg, #ffe9a8 0%, #e8b945 100%);
    --plate-border: #c08a1e;   /* TIER-OUTLINE-20261012: solid gold outline */
    --plate-fg: #3a2412;
    --stamp-bg: radial-gradient(circle at 30% 30%, #fff2c0 0%, #b07700 100%);
    --stamp-ring: #ffe9a8;
    --stamp-fg: #fff8e1;
}

/* ── Prime Pro - sapphire / Top 10% ──
   SAPPHIRE-PRIME-20261012 (owner): was espresso, the same brown as the
   site's own ink and footer, so on a profile the badge blended into the page
   instead of reading as an achievement. A gem sapphire: royal blue lit from
   the top left into deep navy, gold trim and the same gold stamp as Expert
   Elite, so it reads as one step below the top. (The first navy cut was
   judged flat by the owner the same day; this is the brighter one.) */
.tier-medal--prime_pro {
    --plate-bg: radial-gradient(circle at 28% 22%, rgba(150, 200, 255, .38), transparent 62%),
                linear-gradient(155deg, #3170d8 0%, #1d4fa8 48%, #0f2f72 100%);
    --plate-border: rgba(240, 200, 122, .85);
    --plate-fg: #ffffff;
    --stamp-bg: radial-gradient(circle at 30% 30%, #fff2c0 0%, #f0c87a 55%, #b8851d 100%);
    --stamp-ring: #1d4fa8;
    --stamp-fg: #0f2f72;
    box-shadow:
        0 1px 0 rgba(150, 200, 255, .3) inset,
        0 2px 8px rgba(15, 47, 114, .35);
}

/* ── Expert Elite - burgundy / Top 1% ──
   Burgundy plate with a gold trim glow, plus a soft shimmer
   that sweeps across the medal every few seconds so it reads
   as the apex tier. Reduced motion users get the static look. */
.tier-medal--expert_elite {
    --plate-bg: radial-gradient(circle at 28% 28%, rgba(255, 213, 138, .25), transparent 65%),
                linear-gradient(160deg, #7a1a2e 0%, #4a0e1c 100%);
    --plate-border: rgba(255, 213, 138, .65);
    --plate-fg: #fff5d8;
    --stamp-bg: radial-gradient(circle at 30% 30%, #fff2c0 0%, #f0c87a 55%, #b8851d 100%);
    --stamp-ring: #4a0e1c;
    --stamp-fg: #4a0e1c;

    position: relative;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 213, 138, .25) inset,
        0 -1px 0 rgba(0, 0, 0, .25) inset,
        0 2px 8px rgba(74, 14, 28, .35),
        0 0 0 1px rgba(255, 213, 138, .15);
}
/* gold shimmer sweep on the elite medal */
.tier-medal--expert_elite::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        transparent 30%,
        rgba(255, 234, 178, .42) 50%,
        transparent 70%);
    transform: translateX(-120%);
    animation: tier-medal-shine 5.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes tier-medal-shine {
    0%, 75%   { transform: translateX(-120%); }
    100%      { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
    .tier-medal--expert_elite::after { animation: none; display: none; }
    .tier-medal:hover { transform: none; }
}

@media (max-width: 640px) {
    .tier-medal { font-size: .66rem; padding: 2px 10px 2px 2px; gap: .35rem; }
    .tier-medal__stamp { width: 20px; height: 20px; }
    .tier-medal__stamp i { font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════════════════
   CLIENT-PROFILE-V2 (2026-06-01) - Modern editorial /client/{handle}
   Cover band, company crest, identity, stats strip, dual-column body with
   trust panel, hiring facts sidebar, Reputation Bridge soft-CTA.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Hero band ──────────────────────────────────────────────────────── */
.client-hero {
    position: relative;
    padding-bottom: 24px;
    background: var(--wo-paper, #fdf7e8);
}
.client-hero__cover {
    position: absolute;
    inset: 0 0 auto 0;
    height: 180px;
    background:
        radial-gradient(circle at 12% 25%, rgba(214, 90, 19, .14), transparent 55%),
        radial-gradient(circle at 88% 10%, rgba(122, 26, 46, .12), transparent 60%),
        linear-gradient(135deg, #3a2412 0%, #5a3a1c 55%, #7a4a2a 100%);
    z-index: 0;
}
.client-hero__cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: .35;
    pointer-events: none;
}

.client-hero__card {
    position: relative;
    z-index: 1;
    margin-top: 100px;
    display: grid;
    grid-template-columns: 132px 1fr 240px;
    gap: 28px;
    align-items: start;
    background: var(--wo-card);
    border: 1px solid rgba(58, 36, 18, .14);
    border-radius: 16px;
    padding: 22px 26px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .8) inset,
        0 12px 28px rgba(58, 36, 18, .14),
        0 2px 6px rgba(58, 36, 18, .08);
}

/* ── Crest (company logo / initials) ────────────────────────────────── */
.client-hero__crest {
    position: relative;
    width: 132px;
    height: 132px;
    margin-top: -56px;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff 0%, #fdf3e0 100%);
    border: 1px solid rgba(58, 36, 18, .18);
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .8) inset,
        0 10px 22px rgba(58, 36, 18, .18);
}
.client-hero__crest img {
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    object-fit: cover;
    border-radius: 12px;
}
.client-hero__crest-letters {
    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--wo-ink-1, #3a2412);
    line-height: 1;
}
.client-hero__crest-tick {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(160deg, #d65a13 0%, #a8430b 100%);
    color: #fff5d8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border: 3px solid #fffaee;
    box-shadow: 0 4px 10px rgba(214, 90, 19, .35);
}

/* ── Identity column ─────────────────────────────────────────────────── */
.client-hero__main {
    min-width: 0;
    padding-top: 6px;
}
.client-hero__eyebrow {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--wo-orange, #d65a13);
    margin-bottom: 6px;
}
.client-hero__name {
    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
    font-size: clamp(1.7rem, 2.4vw, 2.4rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 8px;
    color: var(--wo-ink-1, #3a2412);
    letter-spacing: -.01em;
}
.client-hero__sub {
    color: var(--wo-ink-2, #6b4c2b);
    font-size: .92rem;
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.client-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 12px;
}
.client-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--wo-paper-2);
    border: 1px solid rgba(58, 36, 18, .14);
    color: var(--wo-ink-2, #6b4c2b);
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .02em;
    line-height: 1.1;
}
.client-chip i { font-size: .85em; }
.client-chip--verified {
    background: linear-gradient(180deg, #f6e6c4 0%, #e6cc8c 100%);
    border-color: rgba(155, 100, 20, .42);
    color: #4a3015;
    font-weight: 700;
}
.client-chip--payment {
    background: var(--wo-card);
    border-color: rgba(214, 90, 19, .35);
    color: var(--wo-orange, #d65a13);
}
.client-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--wo-text-muted, #8a6d4c);
}
.client-hero__meta i { margin-right: 3px; }
.client-hero__handle { color: var(--wo-ink-2, #6b4c2b); font-weight: 600; }
.client-hero__website {
    color: var(--wo-orange, #d65a13);
    text-decoration: none;
    border-bottom: 1px dashed rgba(214, 90, 19, .45);
}
.client-hero__website:hover { color: #8a3e00; border-bottom-style: solid; }

/* ── CTA column ──────────────────────────────────────────────────────── */
.client-hero__cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: stretch;
    padding-top: 6px;
}
.client-hero__cta .btn-wo,
.client-hero__cta form { width: 100%; }
.btn-wo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.btn-wo--primary {
    background: linear-gradient(160deg, #d65a13 0%, #a8430b 100%);
    color: #fff5d8;
    box-shadow: 0 4px 10px rgba(214, 90, 19, .28);
}
.btn-wo--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(214, 90, 19, .35);
    color: #fff5d8;
}
.btn-wo--ghost {
    background: var(--wo-card);
    color: var(--wo-ink-1, #3a2412);
    border-color: rgba(58, 36, 18, .25);
}
.btn-wo--ghost:hover { background: var(--wo-paper-2); color: var(--wo-ink-1, #3a2412); }
.btn-wo__count {
    background: rgba(255, 245, 216, .25);
    border: 1px solid rgba(255, 245, 216, .35);
    padding: 0 7px;
    border-radius: 999px;
    font-size: .72rem;
    line-height: 1.4;
    margin-left: 2px;
}
.client-share {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--wo-text-muted, #8a6d4c);
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    padding: 6px 0;
    cursor: pointer;
}
.client-share:hover { color: var(--wo-orange, #d65a13); }
.client-share.is-copied { color: #1f7a3a; }
.client-hero__vis {
    text-align: center;
    color: var(--wo-text-muted, #8a6d4c);
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ── Stats strip ─────────────────────────────────────────────────────── */
.client-stats {
    margin: 18px 0 4px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: rgba(58, 36, 18, .12);
    border: 1px solid rgba(58, 36, 18, .12);
    border-radius: 14px;
    overflow: hidden;
}
.client-stat {
    background: var(--wo-card);
    padding: 16px 18px;
    text-align: center;
}
.client-stat__num {
    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--wo-ink-1, #3a2412);
    margin-bottom: 4px;
}
.client-stat__label {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--wo-text-muted, #8a6d4c);
}

/* ── Tabs ────────────────────────────────────────────────────────────── */
.client-tabs {
    margin: 22px 0 0;
    display: flex;
    gap: 4px;
    border-bottom: 1px solid rgba(58, 36, 18, .14);
}
.client-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--wo-text-muted, #8a6d4c);
    font-family: var(--font-mono);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-decoration: none;
    transition: color .14s ease, border-color .14s ease;
}
.client-tab:hover { color: var(--wo-ink-1, #3a2412); }
.client-tab.is-active {
    color: var(--wo-ink-1, #3a2412);
    border-bottom-color: var(--wo-orange, #d65a13);
}

/* ── Body grid ───────────────────────────────────────────────────────── */
.client-body { padding: 24px 0 56px; }
.client-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
}
.client-col-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.client-col-side { display: flex; flex-direction: column; gap: 18px; }

/* ── Main cards ──────────────────────────────────────────────────────── */
.client-card {
    background: var(--wo-card);
    border: 1px solid rgba(58, 36, 18, .12);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 1px 2px rgba(58, 36, 18, .04);
}
.client-card__head { margin-bottom: 14px; }
.client-card__kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--wo-orange, #d65a13);
    margin-bottom: 4px;
}
.client-card h2 {
    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--wo-ink-1, #3a2412);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.client-card__count {
    background: var(--wo-orange, #d65a13);
    color: #fff5d8;
    padding: 1px 9px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.5;
}
.client-prose {
    color: var(--wo-ink-2, #5a3a1c);
    font-size: 1rem;
    line-height: 1.65;
    white-space: pre-wrap;
}
.client-empty {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    background: var(--wo-paper-2);
    border: 1px dashed rgba(58, 36, 18, .2);
    border-radius: 10px;
    color: var(--wo-ink-2, #6b4c2b);
    font-size: .92rem;
}
.client-empty i { color: var(--wo-orange, #d65a13); font-size: 1.1rem; margin-top: 1px; }
.client-empty a { color: var(--wo-orange, #d65a13); font-weight: 700; text-decoration: none; }
.client-empty a:hover { color: #8a3e00; }

/* ── Open jobs ──────────────────────────────────────────────────────── */
.client-jobs { list-style: none; margin: 0; padding: 0; }
.client-job {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 14px 16px;
    border: 1px solid rgba(58, 36, 18, .1);
    border-radius: 10px;
    background: var(--wo-card);
    margin-bottom: 8px;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.client-job:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(58, 36, 18, .08);
    border-color: rgba(214, 90, 19, .35);
}
.client-job__link {
    flex: 1;
    display: block;
    text-decoration: none;
    color: var(--wo-ink-1, #3a2412);
}
.client-job__title { display: block; font-weight: 700; font-size: 1rem; line-height: 1.3; }
.client-job__meta {
    display: block;
    margin-top: 2px;
    color: var(--wo-text-muted, #8a6d4c);
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .04em;
}
.client-job__arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--wo-paper-2);
    color: var(--wo-orange, #d65a13);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.client-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: var(--wo-orange, #d65a13);
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
}
.client-more:hover { color: #8a3e00; }

/* ── Trust panel ─────────────────────────────────────────────────────── */
.client-card--trust {
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 213, 138, .18), transparent 50%),
        #fffaee;
    border-color: rgba(155, 100, 20, .28);
}
.client-trust {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.client-trust li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.client-trust__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(160deg, #fde6a8 0%, #e8b945 100%);
    color: #4a3015;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(155, 100, 20, .2);
}
.client-trust strong {
    display: block;
    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
    font-size: 1rem;
    color: var(--wo-ink-1, #3a2412);
    margin-bottom: 2px;
}
.client-trust p {
    margin: 0;
    color: var(--wo-ink-2, #6b4c2b);
    font-size: .9rem;
    line-height: 1.45;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.client-side {
    background: var(--wo-card);
    border: 1px solid rgba(58, 36, 18, .12);
    border-radius: 14px;
    padding: 18px 20px;
}
.client-side__head {
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--wo-orange, #d65a13);
    margin-bottom: 12px;
}
.client-facts { margin: 0; display: grid; grid-template-columns: 1fr; gap: 4px; }
.client-facts dt {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--wo-text-muted, #8a6d4c);
    margin-top: 8px;
}
.client-facts dd {
    margin: 0;
    color: var(--wo-ink-1, #3a2412);
    font-weight: 600;
    font-size: .96rem;
}

.client-side--cta {
    background: linear-gradient(180deg, #fffaee 0%, #fdf3e0 100%);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.client-side__pitch {
    color: var(--wo-ink-2, #6b4c2b);
    font-size: .88rem;
    line-height: 1.5;
    margin: 0 0 4px;
}

.client-side--bridge {
    background:
        radial-gradient(circle at 80% 20%, rgba(255, 213, 138, .25), transparent 55%),
        linear-gradient(160deg, #3a2412 0%, #5a3a1c 100%);
    border-color: rgba(255, 213, 138, .35);
    color: #fdf6e3;
}
.client-side--bridge strong {
    display: block;
    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
    font-size: 1.05rem;
    margin: 4px 0;
    color: #fff5d8;
}
.client-side--bridge p {
    margin: 0 0 10px;
    color: rgba(253, 246, 227, .82);
    font-size: .88rem;
    line-height: 1.5;
}
.client-side__bridge-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #ffd58a;
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
}
.client-side__bridge-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #ffd58a;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 213, 138, .4);
    padding-bottom: 2px;
}
.client-side__bridge-link:hover { color: #fff5d8; border-bottom-color: #fff5d8; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .client-grid { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
    .client-hero__card {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 18px;
        margin-top: 80px;
    }
    .client-hero__crest {
        width: 88px;
        height: 88px;
        margin-top: -50px;
        margin-bottom: 4px;
    }
    .client-hero__crest-letters { font-size: 1.8rem; }
    .client-hero__crest-tick { width: 28px; height: 28px; font-size: .85rem; }
    .client-stats { grid-template-columns: repeat(2, 1fr); }
    .client-trust { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
    .client-hero__cover { height: 140px; }
    .client-hero__card { padding: 16px; }
    .client-stat__num { font-size: 1.4rem; }
    .client-stat { padding: 14px 10px; }
    .client-card { padding: 18px 16px; }
}
    color: var(--wo-ink-2);
    font-size: 1.08rem;
    margin: 0 0 .8rem;
}
.profile-hero__meta {
    display: flex; flex-wrap: wrap; gap: .65rem 1.25rem;
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--wo-text-muted);
}
.profile-hero__meta i { color: var(--wo-primary-deep); margin-right: .25rem; }
.profile-hero__handle { color: var(--wo-primary-deep); font-weight: 600; }

.profile-hero__cta {
    display: flex; flex-direction: column; gap: .55rem;
    padding-left: 1.25rem; border-left: 1px solid var(--wo-line);
}
@media (max-width: 900px) {
    .profile-hero__cta { padding-left: 0; border-left: none; border-top: 1px solid var(--wo-line); padding-top: 1rem; }
}
.profile-hero__rate {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--wo-ink);
    line-height: 1;
    margin-bottom: .35rem;
}
.profile-hero__rate .num { font-size: 2rem; letter-spacing: -.03em; }
.profile-hero__rate-unit {
    font-family: var(--font-mono); font-size: .8rem;
    color: var(--wo-text-muted); font-weight: 500;
    margin-left: .25rem;
}
.profile-hero__cta-row {
    display: flex; gap: .35rem; margin-top: .35rem;
}
.profile-icon-btn {
    background: var(--wo-paper);
    border: 1px solid var(--wo-line);
    border-radius: 4px;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--wo-ink-2); cursor: pointer;
    transition: all .14s;
}
.profile-icon-btn:hover {
    border-color: var(--wo-ink); color: var(--wo-ink); background: var(--wo-card);
}

/* Profile stats strip */
.profile-stats {
    background: var(--wo-slab);
    color: var(--wo-on-slab);
    border-top: 1px solid var(--wo-line);
    border-bottom: 1px solid var(--wo-line);
}
.profile-stat {
    padding: 1.25rem 1.5rem;
    border-right: 1px solid rgba(255,255,255,.08);
}
.profile-stat:last-child { border-right: none; }
.profile-stat__num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    letter-spacing: -.03em;
    color: var(--wo-primary);
    line-height: 1;
}
.profile-stat__suffix { color: var(--wo-on-slab); font-size: 1rem; margin-left: 2px; }
.profile-stat__label {
    font-family: var(--font-mono);
    font-size: .68rem; text-transform: uppercase; letter-spacing: .14em;
    color: rgba(255,255,255,.55); font-weight: 500;
    margin-top: .35rem;
}

/* Profile body - blocks */
.profile-block {
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 8px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
}
.profile-block__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -.02em;
    color: var(--wo-ink);
    margin-bottom: 1rem;
}
.profile-bio { color: var(--wo-ink-2); line-height: 1.65; }

/* Skill bars */
.profile-skills { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
@media (max-width: 760px) { .profile-skills { grid-template-columns: 1fr; } }
.profile-skill__name {
    font-weight: 600; color: var(--wo-ink);
}
.profile-skill__lv {
    font-family: var(--font-mono);
    font-size: .72rem; color: var(--wo-text-muted);
    letter-spacing: .02em;
}
.profile-skill__bar {
    height: 4px; background: var(--wo-line-soft);
    border-radius: 2px; overflow: hidden; position: relative;
}
.profile-skill__bar span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--wo-primary-deep), var(--wo-primary));
    transition: width .8s cubic-bezier(.2,.7,.2,1);
}

/* Portfolio cards */
.portfolio-card {
    border: 1px solid var(--wo-line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--wo-paper);
    transition: all .18s ease;
    height: 100%;
    display: flex; flex-direction: column;
}
.portfolio-card:hover { border-color: var(--wo-ink); transform: translateY(-2px); box-shadow: var(--wo-shadow-md); }
.portfolio-card__visual {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--wo-paper-2), var(--wo-shell));
    display: flex; align-items: center; justify-content: center;
}
.portfolio-card__visual i {
    font-size: 2.5rem; color: var(--wo-primary-deep); opacity: .35;
}
/* PORTFOLIO-IMAGE-20260902: the tile is a fixed 16/9 box that until now only
   ever held an icon. object-fit: cover is what keeps a portrait screenshot or
   a very wide banner from distorting - without it the image stretches to the
   box and every uploaded design looks subtly wrong. */
.portfolio-card__visual img,
.portfolio-card__visual svg.cover-art {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* FILE-FIELD-20260903: our file picker instead of the browser's.
   The real input stays in the DOM and stays focusable - it is only visually
   hidden - because a display:none input is skipped by keyboard navigation and
   ignored by some screen readers, which would make uploading mouse-only. The
   <label> is the button; labels forward clicks to their input natively, so
   opening the file dialog needs no JavaScript. */
.wo-file { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.wo-file__input {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wo-file__btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .85rem;
    font-family: var(--font-display, inherit);
    font-size: .85rem; font-weight: 600;
    color: var(--wo-primary-deep, #8a4d00);
    background: var(--wo-paper-2, #f4ecd6);
    border: 1px solid var(--wo-primary-soft, #ffe4bf);
    border-radius: 9px;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.wo-file__btn:hover { background: var(--wo-primary-soft, #ffe4bf); border-color: var(--wo-primary, #ff9900); }
/* The focus ring has to be drawn on the label, since the input it belongs to
   is the thing we hid. Without this, tabbing to the field shows nothing. */
.wo-file__input:focus-visible + .wo-file__btn {
    outline: 2px solid var(--wo-primary, #ff9900);
    outline-offset: 2px;
}
.wo-file__name {
    font-size: .8rem; color: var(--wo-text-muted, #78716c);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 18rem;
}
.wo-file__name.is-set { color: var(--wo-ink, #261b10); font-weight: 500; }
html[data-theme="dark"] .wo-file__btn { background: #2a2119; border-color: #4a3b29; color: #ffb347; }
html[data-theme="dark"] .wo-file__btn:hover { background: #33281d; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not([data-theme="dark"]) .wo-file__btn {
        background: #2a2119; border-color: #4a3b29; color: #ffb347;
    }
}

/* PORTFOLIO-EDIT-20260903: the inline edit form on a portfolio card. */
.portfolio-edit {
    border-top: 1px solid var(--wo-line, #e7e0cf);
    padding-top: .85rem;
}

/* PORTFOLIO-EDIT-UI-20260903: the editor was squashed, and the cause was
   layout rather than the form. Portfolio cards sit in a col-md-6, which is
   around 330px - fine for reading a card, far too tight for paired fields, a
   textarea and a six-swatch picker, which all collapsed into slivers.

   Opening the editor promotes its whole column to the full row width, so the
   form gets the same room the "Add item" form below it already has, and puts
   it back on close. Everything here is scoped to .is-editing, so a card that
   is merely being read is untouched. */
.pf-col > .card { transition: box-shadow .16s ease; }

@media (min-width: 768px) {
    /* Bootstrap's col-md-6 is flex:0 0 auto + width:50%; both have to go. */
    .pf-col.is-editing {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
}

/* Lift the card being edited out of the grid visually, so it is obvious which
   item the open form belongs to when it is sitting next to its neighbours. */
.pf-col.is-editing > .card {
    box-shadow: 0 8px 28px rgba(38, 27, 16, .13);
    border-color: var(--wo-primary, #8a4d00);
}

/* The visual is a 16/9 cover. At full row width that is a very tall banner
   pushing the form below the fold, so cap it while editing. */
.pf-col.is-editing .portfolio-card__visual {
    max-height: 190px;
}

/* Give the form real column widths instead of whatever is left over. */
.portfolio-edit .cover-picker {
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}
.portfolio-edit .form-label { margin-bottom: .15rem; }
.portfolio-edit textarea.form-control { min-height: 5.5rem; }

/* PORTFOLIO-COVER-20260902: generated cover art + its picker.
   The SVG carries its own colours (the preset decides them), so there is no
   theme override here - a cover looks the same in light and dark, which is the
   point: it is artwork, not chrome. */
.cover-art { display: block; width: 100%; height: auto; }

.cover-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max(120px, (100% - 3rem) / 4), 1fr));
    gap: .6rem;
    margin-top: .35rem;
}
.cover-picker__opt { cursor: pointer; display: block; min-width: 0; }
/* Visually hidden, not display:none - the radio must stay focusable and
   reachable by keyboard and screen reader. */
.cover-picker__opt input {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cover-picker__art {
    display: block; overflow: hidden;
    border-radius: 10px;
    border: 2px solid transparent;
    box-shadow: 0 1px 3px rgba(38, 27, 16, .12);
    transition: border-color .12s ease, transform .12s ease;
}
.cover-picker__opt:hover .cover-picker__art { transform: translateY(-1px); }
.cover-picker__opt input:checked + .cover-picker__art { border-color: var(--wo-primary); }
/* Focus must be visible even though the input itself is hidden. */
.cover-picker__opt input:focus-visible + .cover-picker__art {
    outline: 2px solid var(--wo-primary);
    outline-offset: 2px;
}
.cover-picker__label {
    display: block; margin-top: .25rem;
    font-size: .72rem; color: var(--wo-text-muted, #78716c);
    text-align: center;
}
.portfolio-card__body { padding: 1rem 1.15rem; flex: 1; display: flex; flex-direction: column; }
.portfolio-card__title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; margin-bottom: .35rem; color: var(--wo-ink); }
.portfolio-card__desc { color: var(--wo-text-muted); font-size: .9rem; flex: 1; }
.portfolio-card__link {
    color: var(--wo-primary-deep); font-weight: 600;
    font-family: var(--font-display); font-size: .9rem;
    text-decoration: none; margin-top: .6rem;
}
.portfolio-card__link:hover { color: var(--wo-primary); }

.profile-portfolio-empty {
    text-align: center; padding: 2.5rem 1rem;
    background: var(--wo-paper); border: 1px dashed var(--wo-line);
    border-radius: 8px;
}
.profile-portfolio-empty i { font-size: 2rem; color: var(--wo-line); display: block; margin-bottom: .5rem; }

/* Sidebar cards */
.profile-sidebar { position: sticky; top: 80px; }
.sidebar-card {
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 8px;
    padding: 1.2rem 1.4rem;
    margin-bottom: 1rem;
}
.sidebar-card--accent {
    background: linear-gradient(180deg, var(--wo-primary-soft), var(--wo-card));
    border-color: var(--wo-primary-edge);
}
.sidebar-card__title {
    font-family: var(--font-display);
    font-weight: 700; font-size: .92rem;
    color: var(--wo-ink);
    margin-bottom: .85rem;
    border-bottom: 1px solid var(--wo-line);
    padding-bottom: .55rem;
}
.sidebar-card__eyebrow {
    font-family: var(--font-mono);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--wo-primary-deep); font-weight: 600;
    margin-bottom: .65rem;
    display: flex; align-items: center; gap: .35rem;
}
.sidebar-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: .35rem 0;
    border-bottom: 1px dashed var(--wo-line-soft);
    font-size: .92rem;
}
.sidebar-row:last-child { border-bottom: none; }
.sidebar-row__label { color: var(--wo-text-muted); }
.sidebar-row__val { color: var(--wo-ink); font-weight: 600; }
.sidebar-trust {
    list-style: none; padding: 0; margin: 0;
}
.sidebar-trust li {
    display: flex; align-items: center; gap: .55rem;
    padding: .35rem 0;
    color: var(--wo-ink-2);
    font-size: .9rem;
}
.sidebar-trust li i { color: var(--wo-primary-deep); }

/* ============================================================================
 * TALENT SEARCH - refined
 * ============================================================================ */
.talent-head {
    padding: 2rem 0 1.5rem;
    border-bottom: 1px solid var(--wo-line);
    background: linear-gradient(180deg, var(--wo-paper) 0%, var(--wo-paper-2) 100%);
}
.talent-search-bar {
    position: relative;
    display: flex; align-items: center; gap: .55rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 6px;
    padding: .4rem .55rem .4rem 2.4rem;
    width: 460px; max-width: 100%;
}
.talent-search-bar i {
    position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
    color: var(--wo-text-muted);
}
.talent-search-bar input {
    flex: 1; border: 0; outline: 0; background: transparent;
    font-family: var(--font-body); font-size: .95rem;
    padding: .35rem 0;
}
.talent-search-bar .btn { padding: .45rem 1rem; font-size: .87rem; }

/* Filter rail */
.talent-filters {
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 8px;
    padding: 1.25rem 1.4rem;
    position: sticky; top: 80px;
}
.filter-block { padding: 0 0 1rem; border-bottom: 1px solid var(--wo-line-soft); margin-bottom: 1rem; }
.filter-block:last-of-type { border-bottom: none; }
.filter-block__title {
    font-family: var(--font-mono);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--wo-ink-2); font-weight: 600;
    margin: 0 0 .65rem;
}
.filter-check {
    display: flex; align-items: center; gap: .55rem;
    cursor: pointer; font-size: .92rem; color: var(--wo-ink-2);
}
.filter-check input { width: 16px; height: 16px; }
.filter-check span { display: flex; align-items: center; gap: .35rem; }
.filter-count { color: var(--wo-text-muted); font-family: var(--font-mono); font-size: .76rem; }
.filter-range { display: flex; align-items: center; gap: .35rem; }
.filter-range input {
    border: 1px solid var(--wo-line); background: var(--wo-paper);
    border-radius: 4px; padding: .35rem .55rem;
    font-family: var(--font-mono); font-size: .85rem;
    width: 70px;
}
.filter-text {
    width: 100%; border: 1px solid var(--wo-line); background: var(--wo-paper);
    border-radius: 4px; padding: .45rem .65rem;
    font-family: var(--font-body); font-size: .9rem;
}
.filter-skill-chips {
    display: flex; flex-wrap: wrap; gap: .35rem;
}
.filter-skill-chip {
    cursor: pointer; position: relative;
}
.filter-skill-chip input { position: absolute; opacity: 0; pointer-events: none; }
.filter-skill-chip span {
    display: inline-block;
    background: var(--wo-paper);
    border: 1px solid var(--wo-line);
    border-radius: 999px;
    padding: .22rem .65rem;
    font-family: var(--font-mono); font-size: .76rem;
    color: var(--wo-ink-2);
    transition: all .12s;
}
.filter-skill-chip:hover span { border-color: var(--wo-ink); color: var(--wo-ink); }
.filter-skill-chip input:checked + span {
    background: var(--wo-slab); color: var(--wo-primary);
    border-color: var(--wo-ink);
}

.sort-by { display: flex; align-items: center; }
.sort-select {
    border: 1px solid var(--wo-line); background: var(--wo-card);
    border-radius: 4px; padding: .35rem .65rem;
    font-family: var(--font-body); font-size: .85rem; color: var(--wo-ink);
}

/* Talent card (grid result) */
.talent-card {
    display: block;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 10px;
    padding: 1.25rem 1.4rem;
    text-decoration: none;
    color: inherit;
    transition: all .18s ease;
    height: 100%;
}
.talent-card:hover {
    border-color: var(--wo-ink);
    transform: translateY(-2px);
    box-shadow: var(--wo-shadow-md);
}
.talent-card__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .85rem;
    align-items: center;
    margin-bottom: .7rem;
}
.talent-card__avatar {
    width: 48px; height: 48px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--wo-primary), var(--wo-primary-strong));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 15px;
}
/* TALENT-CARD-AVATAR-20260825: the tile is a gradient block with centred
   initials by default. When a head-shot exists it becomes the frame for the
   photo instead, so the gradient and text padding have to go - otherwise the
   brand colour shows around the edge of the image.
   Avatars are stored square (the upload cropper does the framing), so a plain
   centre cover is correct here - no nudge or zoom, same conclusion as
   AVATAR-CROP-20260821 reached for the profile hero. */
.talent-card__avatar--photo {
    background: none;
    overflow: hidden;
    padding: 0;
}
.talent-card__avatar--photo > img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
}
.talent-card__name { font-family: var(--font-display); font-size: 1rem; color: var(--wo-ink); }
.talent-card__role { font-size: .85rem; color: var(--wo-text-muted); margin-top: 2px; }
.talent-card__rate {
    font-family: var(--font-display); font-weight: 700;
    color: var(--wo-ink); text-align: right;
    line-height: 1;
}
.talent-card__rate .num { font-size: 1.15rem; }
.talent-card__rate span:last-child {
    display: block; font-family: var(--font-mono); font-size: .7rem;
    color: var(--wo-text-muted); margin-top: 3px; font-weight: 500;
}
.talent-card__bio {
    color: var(--wo-text-muted);
    font-size: .92rem; line-height: 1.5;
    margin: .6rem 0 .75rem;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.talent-card__foot {
    display: flex; flex-wrap: wrap; gap: 1rem;
    border-top: 1px solid var(--wo-line-soft);
    padding-top: .7rem;
}
.talent-card__meta {
    font-family: var(--font-mono); font-size: .76rem;
    color: var(--wo-text-muted);
    display: inline-flex; align-items: center; gap: .35rem;
}
.talent-card__meta i { color: var(--wo-primary-deep); }

.talent-empty {
    background: var(--wo-card);
    border: 1px dashed var(--wo-line);
    border-radius: 8px;
    padding: 3rem 1rem;
    text-align: center;
}
.talent-empty i { font-size: 2.2rem; color: var(--wo-line); display: block; margin-bottom: .6rem; }
.talent-empty h3 { font-family: var(--font-display); margin-bottom: .35rem; }

/* -------- Utilities ---------- */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 768px) { .hide-sm { display: none !important; } }

/* Scrollbar */
.inbox-list__items::-webkit-scrollbar,
.inbox-thread__messages::-webkit-scrollbar { width: 6px; }
.inbox-list__items::-webkit-scrollbar-thumb,
.inbox-thread__messages::-webkit-scrollbar-thumb { background: var(--wo-line); border-radius: 2px; }
.inbox-list__items::-webkit-scrollbar-thumb:hover,
.inbox-thread__messages::-webkit-scrollbar-thumb:hover { background: var(--wo-slab); }

/* ───────── PROFILE DEPTH RING ───────── */
.sidebar-card--ring { background: linear-gradient(135deg, #fffaf0, #fdf3df); }
.ring-wrap { position: relative; width: 92px; height: 92px; flex: 0 0 92px; }
.ring-pct {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 22px; font-weight: 700; color: var(--wo-ink); letter-spacing: -0.02em;
}
.ring-pct span { font-size: 12px; font-weight: 600; color: #ff9900; margin-left: 1px; }
.ring-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ring-checklist li {
    display: flex; align-items: center; gap: 8px;
    font-size: 13.5px; color: var(--wo-text-muted);
}
.ring-checklist li i { color: var(--wo-text-muted); width: 14px; }
.ring-checklist li.is-done { color: var(--wo-ink); }
.ring-checklist li.is-done i { color: #ff9900; }

/* ───────── MESSAGE DELETE + OFFER ───────── */
.msg-row { position: relative; }
.msg-del-btn {
    position: absolute; top: 4px; right: -28px;
    background: transparent; border: 0; padding: 4px 6px;
    color: rgba(38, 27, 16, 0.45); cursor: pointer;
    opacity: 0; transition: opacity .15s ease, color .15s ease;
    border-radius: 6px;
}
.msg-row:hover .msg-del-btn { opacity: 1; }
.msg-del-btn:hover { color: #b91c1c; background: rgba(185, 28, 28, 0.08); }
.msg-row--deleted .msg-bubble { opacity: 0.7; font-style: italic; }
.msg-bubble--deleted { background: rgba(38, 27, 16, 0.05) !important; color: var(--wo-text-muted) !important; }
.msg-deleted-banner {
    font-size: 11px; font-weight: 600; color:var(--wo-accent-text);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 4px; padding-bottom: 4px;
    border-bottom: 1px dashed rgba(185, 84, 0, 0.3);
}

/* Offer card */
.msg-offer {
    background: linear-gradient(135deg, #fffaf0, #fdf3df);
    border: 1px solid rgba(255, 153, 0, 0.25);
    border-radius: 14px;
    padding: 16px 18px;
    max-width: 360px;
    box-shadow: 0 4px 14px rgba(255, 153, 0, 0.08);
}
.msg-offer__head {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.12em; color: #ff9900; margin-bottom: 8px;
}
.msg-offer__title {
    font-family: var(--font-display);
    font-weight: 600; font-size: 16px; color: #261b10;
    margin-bottom: 8px; line-height: 1.3;
}
.msg-offer__price {
    font-family: var(--font-display);
    font-size: 24px; font-weight: 700; color: #261b10;
    letter-spacing: -0.02em;
}
.msg-offer__unit { font-size: 12px; font-weight: 500; color: rgba(38, 27, 16, 0.55); margin-left: 6px; letter-spacing: 0; }
.msg-offer__desc { font-size: 13px; color: rgba(38, 27, 16, 0.75); margin-top: 8px; line-height: 1.5; }
.msg-offer__actions { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(38, 27, 16, 0.06); }

/* Offer modal */
.offer-modal {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(38, 27, 16, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.offer-modal[hidden] { display: none; }
.offer-modal__card {
    width: 100%; max-width: 440px;
    background: var(--wo-card); border-radius: 16px;
    box-shadow: 0 24px 64px rgba(38, 27, 16, 0.32);
    padding: 24px; max-height: 92vh; overflow-y: auto;
}
.offer-modal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.offer-modal__head h3 { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--wo-ink); }
.offer-modal__close { background: transparent; border: 0; font-size: 24px; line-height: 1; color: var(--wo-text-muted); cursor: pointer; padding: 0 4px; }
.offer-modal__close:hover { color: var(--wo-ink); }

/* ───────── MEDIA MESSAGES (image / video / pdf inline) ───────── */
.msg-media {
    display: block;
    text-decoration: none;
    border-radius: 14px;
    overflow: hidden;
    max-width: 380px;
    background: rgba(38, 27, 16, 0.04);
    border: 1px solid rgba(38, 27, 16, 0.08);
    box-shadow: 0 2px 10px rgba(38, 27, 16, 0.05);
    margin-top: 2px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.msg-media:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(38, 27, 16, 0.10); }

.msg-media--image img {
    display: block; width: 100%; max-height: 420px; object-fit: cover;
    background: rgba(0,0,0,0.04);
}
.msg-media--video video {
    display: block; width: 100%; max-height: 420px; background: #000;
    border: 0; outline: none;
}
.msg-media--pdf iframe {
    display: block; width: 100%; height: 420px; border: 0; background: var(--wo-card);
}

.msg-media__caption {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    font-size: 12.5px; color: rgba(38, 27, 16, 0.65);
    background: rgba(255, 255, 255, 0.85);
    border-top: 1px solid rgba(38, 27, 16, 0.06);
}
.msg-media__caption i { color: #ff9900; }
.msg-media__caption a { color: #261b10; text-decoration: none; }
.msg-media__caption a:hover { text-decoration: underline; }
.msg-media__caption .file-size {
    margin-left: auto; padding-left: 8px;
    color: rgba(38, 27, 16, 0.45); font-size: 11.5px;
}

/* mine alignment - keep media right-aligned in own column */
.msg-row--mine .msg-media { margin-left: auto; }

/* ───────── COMPOSER ATTACH PREVIEW CHIP ───────── */
.composer-attach-preview {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    margin: 0 4px 8px;
    background: rgba(255, 153, 0, 0.06);
    border: 1px solid rgba(255, 153, 0, 0.22);
    border-radius: 12px;
    animation: chip-in .15s ease;
}
@keyframes chip-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.composer-attach-preview__thumb {
    width: 44px; height: 44px; object-fit: cover;
    border-radius: 8px; flex-shrink: 0;
    background: rgba(0,0,0,0.06);
}
.composer-attach-preview__icon {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 153, 0, 0.15);
    color: #ff9900;
    font-size: 22px;
}
.composer-attach-preview__body { flex: 1; min-width: 0; }
.composer-attach-preview__name {
    font-weight: 600; font-size: 13.5px; color: var(--wo-ink);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.composer-attach-preview__meta {
    font-size: 12px; color: var(--wo-text-muted);
}
.composer-attach-preview__remove {
    background: transparent; border: 0;
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--wo-text-muted); font-size: 18px; line-height: 1;
    cursor: pointer; transition: background .12s ease, color .12s ease;
}
.composer-attach-preview__remove:hover { background: rgba(185, 28, 28, 0.10); color: #b91c1c; }

/* ───────── LOAD OLDER MESSAGES ───────── */
.msg-load-older {
    display: flex; justify-content: center;
    padding: 12px 0 8px;
}
.msg-load-older button {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 16px;
    background: rgba(255, 153, 0, 0.08);
    color: var(--wo-ink);
    border: 1px solid rgba(255, 153, 0, 0.25);
    border-radius: 999px;
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.msg-load-older button:hover:not(:disabled) {
    background: rgba(255, 153, 0, 0.16);
    border-color: rgba(255, 153, 0, 0.42);
    transform: translateY(-1px);
}
.msg-load-older button:disabled { opacity: 0.7; cursor: default; }
.msg-load-older button i { color: #ff9900; font-size: 15px; }

/* ───────── IMAGE MESSAGE - WhatsApp style: image only, no caption ───────── */
.msg-media--bare {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}
.msg-media--bare img {
    border-radius: 12px;
    max-width: 280px;
    max-height: 360px;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 4px 14px rgba(38, 27, 16, 0.10);
    transition: transform .15s ease;
}
.msg-media--bare:hover img { transform: scale(1.01); }

/* ───────── COMPOSER ATTACH PREVIEW - image style ───────── */
.composer-attach-preview--image {
    padding: 8px;
    background: transparent;
    border: 0;
    align-items: flex-start;
}
.composer-attach-preview__image-wrap {
    position: relative;
    display: inline-block;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.04);
    box-shadow: 0 2px 8px rgba(38, 27, 16, 0.10);
}
.composer-attach-preview__image {
    display: block;
    max-width: 220px;
    max-height: 180px;
    width: auto;
    height: auto;
    object-fit: cover;
}
.composer-attach-preview__remove--overlay {
    position: absolute;
    top: 6px; right: 6px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(38, 27, 16, 0.78);
    color: #fff;
    border: 0;
    font-size: 16px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(6px);
}
.composer-attach-preview__remove--overlay:hover { background: #b91c1c; }

/* ───────── OFFER MODAL - innovative builder + live preview ───────── */
.offer-modal__card--xl { max-width: 860px; padding: 0; overflow: hidden; }
.offer-modal__card--xl .offer-modal__head { padding: 18px 24px 12px; }
.offer-builder { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; }
@media (max-width: 760px) { .offer-builder { grid-template-columns: 1fr; } }
.offer-builder__form {
    padding: 8px 24px 0;
    max-height: 70vh; overflow-y: auto;
}
.offer-builder__preview {
    background: linear-gradient(180deg, #fdf3df, #fffaf0);
    padding: 18px;
    border-left: 1px solid rgba(38, 27, 16, 0.06);
    display: flex; flex-direction: column; gap: 10px;
}
.offer-builder__preview-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: rgba(38, 27, 16, 0.55);
    margin-bottom: 4px;
}
.offer-section { margin-bottom: 14px; }
.offer-section__label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--wo-text-muted);
    margin-bottom: 8px;
}
.offer-row { display: flex; gap: 10px; align-items: flex-end; }
.offer-field { display: block; }
.offer-field span { display: block; font-size: 12px; font-weight: 500; color: var(--wo-ink-2); margin-bottom: 4px; }
.offer-field--grow { flex: 1; }
.offer-modal__foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 16px 0;
    border-top: 1px solid rgba(38, 27, 16, 0.06);
    margin-top: 12px; position: sticky; bottom: 0; background: var(--wo-card);
}

/* Presets */
.offer-presets {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.offer-preset {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 10px 12px;
    background: rgba(255, 153, 0, 0.05);
    border: 1px solid rgba(38, 27, 16, 0.08);
    border-radius: 10px;
    cursor: pointer; text-align: left;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.offer-preset:hover { background: rgba(255, 153, 0, 0.12); border-color: rgba(255, 153, 0, 0.32); transform: translateY(-1px); }
.offer-preset i { font-size: 16px; color: #ff9900; margin-bottom: 4px; }
.offer-preset span { font-weight: 600; font-size: 13.5px; color: var(--wo-ink); }
.offer-preset em { font-style: normal; font-size: 11.5px; color: var(--wo-text-muted); }

/* Tier */
.offer-tiers { display: flex; gap: 6px; flex-wrap: wrap; }
.offer-tier {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px;
    background: var(--wo-card); border: 1px solid rgba(38, 27, 16, 0.12);
    color: var(--wo-ink-2);
    font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.offer-tier:hover { border-color: #ff9900; color: var(--wo-ink); }
.offer-tier.is-active { background: #ff9900; color: #1a1209; border-color: #ff9900; font-weight: 600; }
.offer-tier i { font-size: 12px; }

/* Milestones (form rows) */
.offer-milestones { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.offer-milestone-row {
    display: grid; grid-template-columns: 1fr 120px auto; gap: 6px; align-items: center;
}
.offer-ms-remove {
    background: transparent; border: 0; color: var(--wo-text-muted);
    font-size: 14px; width: 32px; height: 32px; border-radius: 6px; cursor: pointer;
}
.offer-ms-remove:hover { background: rgba(185, 28, 28, 0.08); color: #b91c1c; }
.offer-milestone-add {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; background: transparent;
    border: 1px dashed rgba(255, 153, 0, 0.45); color:var(--wo-accent-text);
    border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background .12s, border-color .12s;
}
.offer-milestone-add:hover { background: rgba(255, 153, 0, 0.08); border-color: #ff9900; }

/* OFFER-SENDING-20260613: full-screen progress overlay shown while an offer is
   being sent and during the redirect to payment - so it never reads as a blank
   or stuck page. */
.offer-sending-overlay {
    position: fixed; inset: 0; z-index: 4000;
    display: none; align-items: center; justify-content: center;
    background: rgba(26, 18, 9, .55); backdrop-filter: blur(2px);
}
.offer-sending-overlay.is-on { display: flex; }
.offer-sending-overlay__box {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 26px 34px; border-radius: 16px;
    background: var(--wo-paper, #fbf5e8); box-shadow: 0 18px 50px rgba(0,0,0,.3);
    max-width: 320px; text-align: center;
}
.offer-sending-overlay__spin {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid rgba(214, 90, 19, .25); border-top-color: #d65a13;
    animation: offerSpin .8s linear infinite;
}
@keyframes offerSpin { to { transform: rotate(360deg); } }
.offer-sending-overlay__msg { font-weight: 600; color: var(--wo-ink); font-size: 14.5px; }

/* FUND-UI-20260613: client funding panel + in-page Stripe card modal. */
.fund-panel { background: linear-gradient(180deg, #fff8ec, #fffdf8); border: 1px solid rgba(214, 90, 19, .16) !important; }
.pay-modal { position: fixed; inset: 0; z-index: 4200; display: flex; align-items: center; justify-content: center; }
.pay-modal[hidden] { display: none; }
.pay-modal__backdrop { position: absolute; inset: 0; background: rgba(26, 18, 9, .55); backdrop-filter: blur(2px); }
.pay-modal__card {
    position: relative; z-index: 1; width: min(440px, calc(100vw - 32px));
    background: var(--wo-card); border-radius: 16px; padding: 22px 24px;
    box-shadow: 0 22px 60px rgba(0,0,0,.32);
}
.pay-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pay-modal__head h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--wo-ink); }
.pay-modal__close { background: transparent; border: 0; font-size: 24px; line-height: 1; color: var(--wo-text-muted); cursor: pointer; }
.pay-modal__close:hover { color: var(--wo-ink); }
.pay-modal__sub { font-size: 13.5px; color: var(--wo-ink-2); margin: 0 0 14px; }
.pay-modal__label { display: block; font-size: 12px; font-weight: 600; color: var(--wo-ink-2); margin-bottom: 6px; }
.pay-modal__card-el {
    padding: 12px 14px; border: 1px solid rgba(38,27,16,.18); border-radius: 10px; background: var(--wo-card);
}
.pay-modal__status { min-height: 20px; margin-top: 10px; font-size: 13px; font-weight: 500; color:var(--wo-accent-text); }
.pay-modal__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.pay-modal__trust { margin: 12px 0 0; font-size: 11.5px; color: var(--wo-text-muted); }
.pay-modal__trust i { color: #1f7a3a; }

/* OFFER-DRIVEN-PAY-20260613: standalone offer payment screen. */
.offerpay { max-width: 980px; margin: 0 auto; }
.offerpay__back { display: inline-flex; align-items: center; font-size: 13px; color: var(--wo-ink-2); text-decoration: none; }
.offerpay__back:hover { color: var(--wo-ink); }
.offerpay__choices { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.offerpay__choice {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline;
    padding: 14px 16px; border: 1.5px solid rgba(38,27,16,.14); border-radius: 12px;
    cursor: pointer; background: var(--wo-card); transition: border-color .12s, background .12s;
}
.offerpay__choice:hover { border-color: rgba(214,90,19,.4); }
.offerpay__choice.is-active { border-color: #d65a13; background: var(--wo-card); }
.offerpay__choice input { position: absolute; opacity: 0; pointer-events: none; }
.offerpay__choice-main { font-weight: 600; color: var(--wo-ink); }
.offerpay__choice-amt { font-family: var(--font-mono, monospace); font-weight: 700; color: var(--wo-ink); }
.offerpay__choice-note { grid-column: 1 / -1; font-size: 12px; color: var(--wo-text-muted); }
.offerpay__label { display: block; font-size: 12px; font-weight: 600; color: var(--wo-ink-2); margin-bottom: 6px; }
.offerpay__card-el { padding: 13px 14px; border: 1px solid rgba(38,27,16,.18); border-radius: 10px; background: var(--wo-card); }
.offerpay__status { min-height: 20px; margin-top: 10px; font-size: 13px; font-weight: 500; color:var(--wo-accent-text); }
.offerpay__trust { margin: 12px 0 0; font-size: 11.5px; color: var(--wo-text-muted); }
.offerpay__trust i { color: #1f7a3a; }
.offerpay__summary { position: sticky; top: 16px; }
.offerpay__lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.offerpay__line { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; }
.offerpay__line-i { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--wo-primary-soft); color:var(--wo-accent-text); font-size: 11px; font-weight: 700; }
.offerpay__line-name { color: var(--wo-ink); }
.offerpay__line-amt { font-family: var(--font-mono, monospace); color: var(--wo-ink); }
.offerpay__total { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid rgba(38,27,16,.1); padding-top: 12px; }
.offerpay__total strong { font-family: var(--font-display, inherit); font-size: 18px; font-weight: 800; color: var(--wo-ink); }

/* REVIEW-END-20260613: ended-contract review form. */
.review-panel { background: linear-gradient(180deg, #fff8ec, #fffdf8); border: 1px solid rgba(214, 90, 19, .16) !important; }
.review-stars { display: inline-flex; gap: 4px; }
.review-star { background: transparent; border: 0; cursor: pointer; font-size: 26px; line-height: 1; color: #ff9900; padding: 0 2px; transition: transform .1s ease; }
.review-star i { pointer-events: none; }
.review-star:hover { transform: scale(1.12); }

/* CARD-UI-20260613: Stripe card field focus/invalid states (Stripe adds these
   classes to the mounted element). Applies to both the offer-pay screen and the
   contract pay modal. */
.offerpay__card-el, .pay-modal__card-el { transition: border-color .12s ease, box-shadow .12s ease; }
.offerpay__card-el.StripeElement--focus, .pay-modal__card-el.StripeElement--focus {
    border-color: #d65a13; box-shadow: 0 0 0 3px rgba(214, 90, 19, .12);
}
.offerpay__card-el.StripeElement--invalid, .pay-modal__card-el.StripeElement--invalid {
    border-color: #b91c1c; box-shadow: 0 0 0 3px rgba(185, 28, 28, .1);
}

/* MILESTONE-REQ-20260613: roomier, milestone-driven offer builder. The total is
   derived from milestones, so the rows are the centrepiece and get real space. */
.offer-modal__card--xl { max-width: 940px; }
.offer-builder { grid-template-columns: 1.25fr 1fr; }
.offer-builder__form { padding: 10px 28px 0; }
.offer-section { margin-bottom: 18px; }
.offer-section__label { margin-bottom: 10px; }
.offer-row--roomy { gap: 18px; }

.offer-req {
    display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
    background: rgba(214, 90, 19, .12); color:var(--wo-accent-text);
    font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    vertical-align: middle;
}
.offer-hint {
    margin: -2px 0 12px; font-size: 12px; line-height: 1.5;
    color: var(--wo-text-muted);
}

.offer-milestones { gap: 9px; margin-bottom: 12px; }
.offer-milestone-row {
    display: grid;
    grid-template-columns: 28px 1fr 156px 34px;
    gap: 11px; align-items: center;
}
.offer-ms-seq {
    display: flex; align-items: center; justify-content: center;
    width: 27px; height: 27px; border-radius: 50%;
    background: var(--wo-primary-soft); color:var(--wo-accent-text); font-size: 12px; font-weight: 700;
}
.offer-ms-amtwrap { position: relative; display: flex; align-items: center; }
.offer-ms-cur {
    position: absolute; left: 11px; font-size: 11px; font-weight: 600;
    color: var(--wo-text-muted); pointer-events: none; letter-spacing: .02em;
}
.offer-ms-amt { padding-left: 46px; text-align: right; }
.offer-ms-remove { width: 31px; height: 31px; }

.offer-ms-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 6px;
}
.offer-ms-total { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--wo-text-muted); }
.offer-ms-total strong {
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 16px; font-weight: 700; color: var(--wo-ink);
}
@media (max-width: 560px) {
    .offer-milestone-row { grid-template-columns: 23px 1fr 116px 28px; gap: 8px; }
    .offer-ms-amt { padding-left: 40px; }
    .offer-row--roomy { flex-wrap: wrap; gap: 12px; }
}

/* Offer card additions */
.msg-offer { position: relative; }
.msg-offer__head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.msg-offer__status {
    margin-left: auto;
    font-size: 10px; font-weight: 700;
    color: #fff; padding: 3px 10px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.msg-offer__tier {
    font-size: 10px; font-weight: 700;
    background: #261b10; color: #ff9900;
    padding: 3px 10px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.msg-offer__chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 10px;
}
.msg-offer__chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; font-weight: 500;
    background: rgba(38, 27, 16, 0.06); color: rgba(38, 27, 16, 0.75);
    padding: 4px 10px; border-radius: 999px;
}
.msg-offer__chip i { font-size: 11px; color:var(--wo-accent-text); }
.msg-offer__milestones {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px dashed rgba(38, 27, 16, 0.12);
    display: flex; flex-direction: column; gap: 6px;
}
.msg-offer__milestone {
    display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center;
    font-size: 13px;
}
.msg-offer__milestone-i {
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255, 153, 0, 0.18); color:var(--wo-accent-text);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
}
.msg-offer__milestone-name { color: #261b10; }
.msg-offer__milestone-amt { font-weight: 600; color: #261b10; }

.msg-offer--accepted  { border-color: rgba(31, 122, 58, 0.4); background: linear-gradient(135deg, #ecf7ef, #fffaf0); }
.msg-offer--declined  { border-color: rgba(160, 24, 24, 0.32); background: linear-gradient(135deg, #fbeeee, #fffaf0); }
.msg-offer--expired   { opacity: 0.78; }
.msg-offer--withdrawn { opacity: 0.78; }
.msg-offer--preview { max-width: none; }

/* ───────── MESSENGER V2 ───────── */
/* Hover action bar on each message */
.msg-row { position: relative; }
.msg-actions {
    position: absolute; top: -6px; right: 8px;
    display: none; gap: 2px;
    background: var(--wo-card);
    border: 1px solid rgba(38,27,16,.10);
    border-radius: 999px;
    padding: 3px;
    box-shadow: 0 4px 14px rgba(38,27,16,.12);
    z-index: 5;
}
.msg-row:hover .msg-actions { display: inline-flex; }
.msg-row--mine .msg-actions { right: auto; left: 8px; }
.msg-actions__btn {
    width: 26px; height: 26px; border: 0; background: transparent;
    border-radius: 50%; cursor: pointer; color: var(--wo-text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; transition: background .12s, color .12s;
}
.msg-actions__btn:hover { background: rgba(255,153,0,.10); color:var(--wo-accent-text); }
.msg-actions__btn.is-active { color: #ff9900; }

/* Reaction picker (positioned popover) */
.msg-rx-picker {
    position: fixed; z-index: 9999;
    background: var(--wo-card); border: 1px solid rgba(38,27,16,.10);
    border-radius: 999px; padding: 5px 6px;
    box-shadow: 0 8px 28px rgba(38,27,16,.18);
    display: flex; gap: 2px;
    animation: rx-in .12s ease;
}
@keyframes rx-in { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.msg-rx-picker button {
    border: 0; background: transparent; cursor: pointer;
    width: 32px; height: 32px; border-radius: 50%;
    font-size: 18px; transition: transform .12s, background .12s;
}
.msg-rx-picker button:hover { background: rgba(255,153,0,.10); transform: scale(1.25); }

/* Reactions strip under bubble */
.msg-rx { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.msg-rx__chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    background: rgba(38,27,16,.06); border: 1px solid transparent;
    font-size: 12px; cursor: pointer; line-height: 1.2;
    transition: background .12s, border-color .12s;
}
.msg-rx__chip:hover { background: rgba(255,153,0,.10); }
.msg-rx__chip.is-mine { background: rgba(255,153,0,.16); border-color: rgba(255,153,0,.45); }
.msg-rx__chip span { font-size: 14px; }
.msg-rx__chip em { font-style: normal; font-weight: 600; color: var(--wo-ink-2); font-size: 11px; }

/* Reply quote in bubble */
.msg-quote {
    background: rgba(38,27,16,.05);
    border-left: 3px solid #ff9900;
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 6px;
    font-size: 12.5px;
}
.msg-quote__who { font-weight: 600; color:var(--wo-accent-text); font-size: 11.5px; }
.msg-quote__body { color: var(--wo-ink-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Composer reply chip */
.composer-reply-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    margin: 6px 4px 0;
    background: rgba(255,153,0,.08);
    border: 1px solid rgba(255,153,0,.28);
    border-radius: 10px;
}
.composer-reply-chip > i { color: #ff9900; }
.composer-reply-chip__body { flex: 1; min-width: 0; font-size: 12.5px; }
.composer-reply-chip__who { color: var(--wo-ink-2); }
.composer-reply-chip__body-text { color: var(--wo-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer-reply-chip__close {
    background: transparent; border: 0; font-size: 18px; color: var(--wo-text-muted);
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
}
.composer-reply-chip__close:hover { background: rgba(185,28,28,.10); color: #b91c1c; }

/* Smart reply chips */
.composer-smart-replies {
    display: flex; gap: 6px; padding: 6px 4px 0; flex-wrap: wrap;
}
.composer-smart-chip {
    padding: 5px 12px; border-radius: 999px;
    background: var(--wo-card); border: 1px solid rgba(38,27,16,.14);
    font-size: 13px; color: var(--wo-ink); cursor: pointer;
    transition: background .12s, border-color .12s;
}
.composer-smart-chip:hover { background: rgba(255,153,0,.10); border-color: rgba(255,153,0,.45); }

/* Voice notes */
.composer-recording {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    margin: 6px 4px 0;
    background: rgba(185,28,28,.06);
    border: 1px solid rgba(185,28,28,.32);
    border-radius: 10px;
}
.composer-recording__dot {
    width: 10px; height: 10px; border-radius: 50%; background: #b91c1c;
    animation: rec-pulse 1s ease-in-out infinite;
}
@keyframes rec-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.msg-voice audio { display: block; width: 100%; max-width: 320px; }

/* Presence dot */
.avatar-with-dot { position: relative; }
.presence-dot {
    position: absolute; bottom: -1px; right: -1px;
    width: 11px; height: 11px; border-radius: 50%;
    background: rgba(38,27,16,.3);
    box-shadow: 0 0 0 2px #fff;
}
.presence-dot[data-state="online"] { background: #1f7a3a; }
.presence-dot[data-state="away"]   { background: #b95400; }

/* Typing bubble */
.msg-row--typing .msg-bubble--typing {
    display: inline-flex; gap: 4px; padding: 8px 14px;
    background: rgba(38,27,16,.06); border-radius: 18px;
}
.msg-bubble--typing span {
    width: 6px; height: 6px; border-radius: 50%; background: rgba(38,27,16,.4);
    animation: typ 1.2s ease-in-out infinite;
}
.msg-bubble--typing span:nth-child(2) { animation-delay: .15s; }
.msg-bubble--typing span:nth-child(3) { animation-delay: .30s; }
@keyframes typ { 0%,80%,100% { transform: scale(.7); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

/* Contract card */
.msg-contract {
    background: linear-gradient(135deg, #f0fdf4, #fffaf0);
    border: 1px solid rgba(31, 122, 58, .3);
    border-radius: 14px;
    padding: 16px 18px;
    max-width: 360px;
}
.msg-contract__head { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #1f7a3a; margin-bottom: 8px; }
.msg-contract__title { font-weight: 600; font-size: 15px; color: #261b10; margin-bottom: 6px; }
.msg-contract__price { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: #261b10; letter-spacing: -.02em; }
.msg-contract__price span { font-size: 12px; font-weight: 500; color: rgba(38,27,16,.5); margin-left: 6px; letter-spacing: 0; }
.msg-contract__actions { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(38,27,16,.06); }

/* Details: files / links / quiet */
.details-file, .details-link {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 8px;
    color: var(--wo-ink); font-size: 13px; text-decoration: none;
    transition: background .12s;
}
.details-file:hover, .details-link:hover { background: rgba(255,153,0,.08); }
.details-file i, .details-link i { color: #ff9900; font-size: 15px; }
.details-file span, .details-link span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.details-file em, .details-link em {
    font-style: normal; font-size: 11.5px; color: var(--wo-text-muted);
}
.details-quiet__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 6px 0;
}
.details-quiet__row .btn { padding: 2px 10px; font-size: 12px; }
.details-quiet__label { font-size: 12px; font-weight: 600; color: var(--wo-ink-2); }

/* ───────── MESSENGER V2 - delete + action button positioning fix ─────────
   Original position was right:8px which put the trash icon directly under
   the scrollbar, making it unclickable. Tuck buttons inside the bubble flow
   and give the scroll container right padding to clear the scrollbar. */
.inbox-thread__messages { padding-right: 12px; }
@supports (scrollbar-gutter: stable) {
    .inbox-thread__messages { scrollbar-gutter: stable; padding-right: 4px; }
}
.msg-del-btn {
    position: static !important;            /* take it out of the absolute corner */
    display: none;                          /* show on row hover */
    align-self: flex-end;
    margin-top: 4px;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(38, 27, 16, 0.10);
    background: var(--wo-card);
    color: var(--wo-text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.msg-row:hover .msg-del-btn { display: inline-flex; align-items: center; justify-content: center; }
.msg-del-btn:hover { background: rgba(185, 28, 28, 0.10); color: #b91c1c; border-color: rgba(185, 28, 28, 0.32); }

/* Hover action bar - position relative to the message STACK (the bubble
   column), not the row. That way the menu sits on top of the bubble for
   both incoming AND outgoing messages, regardless of bubble width. */
.msg-stack { position: relative; }
.msg-actions {
    position: absolute;
    top: -28px;
    z-index: 6;
}
/* Incoming (their) messages: stack is on the LEFT (after the avatar)   */
.msg-row:not(.msg-row--mine) .msg-actions {
    left: 0;
    right: auto;
}
/* Outgoing (mine) messages: stack is on the RIGHT, anchor to right     */
.msg-row--mine .msg-actions {
    right: 0;
    left: auto;
}
@media (max-width: 720px) {
    .msg-actions { position: static; display: inline-flex; margin-top: 6px; }
    .msg-row:hover .msg-actions { display: inline-flex; }
}

/* ───────── VOICE NOTE PREVIEW (between Stop and Send) ───────── */
.composer-recording--preview {
    background: rgba(255, 153, 0, 0.06);
    border-color: rgba(255, 153, 0, 0.32);
    gap: 12px;
}
.composer-recording--preview > i { color: #ff9900; font-size: 18px; }
.composer-recording--preview audio {
    flex: 1; min-width: 0; height: 36px;
    border-radius: 18px;
}
.composer-recording--preview audio::-webkit-media-controls-panel {
    background-color: rgba(255, 255, 255, 0.85);
}
.composer-recording--preview .text-muted { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ───────── VOICE MESSAGE - WhatsApp style player ───────── */
.vmsg {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 8px 14px;
    background: rgba(38, 27, 16, 0.05);
    border-radius: 24px;
    min-width: 230px; max-width: 360px;
    user-select: none;
}
.msg-row--mine .vmsg { background: rgba(255, 153, 0, 0.14); }
.vmsg__play {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%; border: 0;
    background: #ff9900; color: #1a1209;
    font-size: 16px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(255, 153, 0, 0.35);
    transition: transform .12s ease;
}
.vmsg__play:hover { transform: scale(1.06); }
.vmsg__play i { line-height: 1; }
.vmsg__wave {
    flex: 1;
    display: flex; align-items: center; gap: 2px;
    height: 28px;
    cursor: pointer;
    min-width: 80px;
}
.vmsg__wave span {
    display: block;
    width: 3px;
    border-radius: 2px;
    background: rgba(38, 27, 16, 0.32);
    transition: background .12s ease;
}
.vmsg__wave span.is-played { background: #ff9900; }
.vmsg.is-playing .vmsg__wave span { animation: none; }
.vmsg__time {
    font-variant-numeric: tabular-nums;
    font-size: 12px; font-weight: 500;
    color: var(--wo-ink-2);
    min-width: 32px; text-align: right;
}

/* Hide the body text for voice messages (the player is enough) */
.msg-row .msg-voice + .msg-bubble { display: none; }

/* ───────── VOICE RECORDER UI - modern, animated ───────── */
.voice-rec {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    margin: 8px 4px 0;
    background: linear-gradient(90deg, rgba(255, 153, 0, 0.08), rgba(255, 153, 0, 0.04));
    border: 1px solid rgba(255, 153, 0, 0.32);
    border-radius: 28px;
    animation: voice-rec-in .18s ease;
}
@keyframes voice-rec-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.voice-rec__cancel,
.voice-rec__send,
.voice-rec__stop {
    width: 36px; height: 36px; border-radius: 50%; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; cursor: pointer;
    flex-shrink: 0;
    transition: transform .12s, background .12s, color .12s;
}
.voice-rec__cancel { background: rgba(38, 27, 16, 0.06); color: var(--wo-ink-2); }
.voice-rec__cancel:hover { background: rgba(185, 28, 28, 0.12); color: #b91c1c; }
.voice-rec__stop { background: #261b10; color: #ff9900; }
.voice-rec__stop:hover { transform: scale(1.06); }
.voice-rec__send { background: #ff9900; color: #1a1209; box-shadow: 0 2px 8px rgba(255, 153, 0, 0.35); }
.voice-rec__send:hover { transform: scale(1.06); }
.voice-rec__dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: #b91c1c;
    box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.6);
    animation: rec-pulse-ring 1.2s ease-out infinite;
    flex-shrink: 0;
}
@keyframes rec-pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.55); }
    70%  { box-shadow: 0 0 0 12px rgba(185, 28, 28, 0); }
    100% { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0); }
}
.voice-rec__bars {
    flex: 1;
    display: flex; align-items: center; justify-content: space-between;
    height: 28px; gap: 2px;
    min-width: 100px;
}
.voice-rec__bars span {
    display: block;
    width: 3px;
    height: 6px;
    border-radius: 2px;
    background: #ff9900;
    transition: height .08s linear;
}
.voice-rec__time {
    font-variant-numeric: tabular-nums;
    font-size: 13px; font-weight: 600; color: var(--wo-ink);
    min-width: 42px; text-align: center;
}
.voice-rec--preview { padding: 8px 12px; gap: 10px; background: linear-gradient(90deg, rgba(38, 27, 16, 0.04), rgba(255, 153, 0, 0.06)); }
.voice-rec--preview .vmsg { flex: 1; min-width: 0; background: rgba(255, 153, 0, 0.10); }

/* ───────── INLINE VOICE RECORDER (takes over the composer) ───────── */
.composer-voice {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: linear-gradient(90deg, rgba(38, 27, 16, 0.03), rgba(255, 153, 0, 0.06));
    border-radius: 12px;
    animation: voice-rec-in .15s ease;
}
.composer-voice__cancel,
.composer-voice__stop,
.composer-voice__send {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease, color .12s ease;
}
.composer-voice__cancel {
    background: rgba(38, 27, 16, 0.06);
    color: var(--wo-ink-2);
}
.composer-voice__cancel:hover { background: rgba(185, 28, 28, 0.10); color: #b91c1c; transform: scale(1.05); }

.composer-voice__stop {
    background: #261b10;
    color: #ff9900;
}
.composer-voice__stop:hover { transform: scale(1.06); }

.composer-voice__send {
    background: #ff9900;
    color: #1a1209;
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.35);
}
.composer-voice__send:hover { transform: scale(1.06); }

/* Center area - live state */
.composer-voice__center {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 12px;
    padding: 0 8px;
}
.composer-voice__dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: #b91c1c;
    box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.6);
    animation: rec-pulse-ring 1.2s ease-out infinite;
    flex-shrink: 0;
}
.composer-voice__bars {
    flex: 1;
    display: flex; align-items: center; justify-content: space-between;
    height: 36px; gap: 2px;
    min-width: 80px;
}
.composer-voice__bars span {
    display: block;
    width: 3px;
    height: 6px;
    border-radius: 2px;
    background: linear-gradient(180deg, #ffb84d, #ff9900);
    transition: height .08s linear;
}
.composer-voice__time {
    font-variant-numeric: tabular-nums;
    font-size: 14px; font-weight: 600;
    color: var(--wo-ink);
    min-width: 44px; text-align: right;
    flex-shrink: 0;
}

/* Preview state */
.composer-voice__preview {
    flex: 1; min-width: 0;
    display: flex; align-items: center;
}
.composer-voice__preview .vmsg {
    flex: 1;
    background: rgba(255, 153, 0, 0.12);
}

/* ───────── INLINE VOICE RECORDER v2 - premium mirrored waveform ───────── */
.composer-voice.is-recording {
    background: linear-gradient(90deg, rgba(38, 27, 16, 0.04) 0%, rgba(255, 153, 0, 0.10) 50%, rgba(38, 27, 16, 0.04) 100%);
    box-shadow: 0 0 0 1px rgba(255, 153, 0, 0.18), 0 2px 12px rgba(255, 153, 0, 0.10);
}

/* REC pill - red dot + label + timer, all in one rounded badge */
.composer-voice__rec-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 8px;
    background: #1a1209;
    color: #fff;
    border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.composer-voice__rec-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    animation: rec-pulse-ring 1.2s ease-out infinite;
}
.composer-voice__rec-label { color: #ef4444; }
.composer-voice__rec-pill .composer-voice__time {
    color: #ff9900;
    font-size: 13px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: auto;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    padding-left: 8px;
    margin-left: 2px;
}

/* Mirrored waveform - top row, gap line, bottom row */
.composer-voice__wave {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: stretch;
    gap: 2px;
    height: 48px;
    padding: 0 4px;
    position: relative;
}
.composer-voice__wave::after {
    /* Subtle center line so the mirror reads clearly */
    content: ''; position: absolute; left: 0; right: 0; top: 50%;
    height: 1px; background: rgba(255, 153, 0, 0.18);
    transform: translateY(-0.5px);
    pointer-events: none;
}
.composer-voice__bars {
    flex: 1;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 3px;
    min-width: 80px;
}
.composer-voice__bars--top { align-items: flex-end; }
.composer-voice__bars--bot { align-items: flex-start; }
.composer-voice__bars span {
    display: block;
    width: 3px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, #ffb84d 0%, #ff9900 100%);
    transition: height .07s linear;
    flex: 1;
}
.composer-voice__bars--bot span {
    background: linear-gradient(0deg, #ffb84d 0%, #ff9900 100%);
}

/* Speak-now hint - subtle, fades on hover */
.composer-voice__hint {
    font-size: 12px;
    color: var(--wo-text-muted);
    font-style: italic;
    flex-shrink: 0;
    padding-right: 4px;
    user-select: none;
}
@media (max-width: 640px) {
    .composer-voice__hint { display: none; }
}

/* Stop button - bigger, with depth + glow */
.composer-voice.is-recording .composer-voice__stop {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, #261b10, #1a1209);
    color: #ff9900;
    font-size: 18px;
    box-shadow:
        0 4px 14px rgba(38, 27, 16, 0.35),
        inset 0 0 0 2px rgba(255, 153, 0, 0.35);
    animation: stop-glow 2.4s ease-in-out infinite;
}
.composer-voice.is-recording .composer-voice__stop:hover {
    transform: scale(1.08);
    box-shadow:
        0 6px 18px rgba(38, 27, 16, 0.45),
        inset 0 0 0 2px rgba(255, 153, 0, 0.65);
}
@keyframes stop-glow {
    0%, 100% { box-shadow: 0 4px 14px rgba(38, 27, 16, 0.35), inset 0 0 0 2px rgba(255, 153, 0, 0.32); }
    50%      { box-shadow: 0 4px 18px rgba(255, 153, 0, 0.30), inset 0 0 0 2px rgba(255, 153, 0, 0.55); }
}

/* Cancel button in recording state - slightly larger trash with hover bloom */
.composer-voice.is-recording .composer-voice__cancel {
    width: 40px; height: 40px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(6px);
    color: rgba(38, 27, 16, 0.55);
}
.composer-voice.is-recording .composer-voice__cancel:hover {
    background: rgba(239, 68, 68, 0.10);
    color: #b91c1c;
    transform: scale(1.08);
}

/* Slight breathing animation on the whole row so it feels alive */
.composer-voice.is-recording { animation: voice-breathe 3s ease-in-out infinite; }
@keyframes voice-breathe {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ───────── COMPOSER VOICE - sending spinner state ───────── */
.composer-voice__send.is-sending {
    pointer-events: none;
    background: linear-gradient(135deg, #ffb84d, #ff9900);
    color: transparent;          /* hide the send icon entirely */
    position: relative;
}
.composer-voice__send.is-sending::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2.5px solid rgba(26, 18, 9, 0.25);
    border-top-color: #1a1209;
    animation: send-spinner .7s linear infinite;
}
@keyframes send-spinner { to { transform: rotate(360deg); } }

/* Same spinner state for the generic composer-send button (text mode) */
.composer-send.is-sending { color: transparent; pointer-events: none; position: relative; }
.composer-send.is-sending::after {
    content: ''; position: absolute; inset: 0; margin: auto;
    width: 16px; height: 16px; border-radius: 50%;
    border: 2.5px solid rgba(26, 18, 9, 0.25);
    border-top-color: #1a1209;
    animation: send-spinner .7s linear infinite;
}

/* ───────── Voice / message - sending + failed states ───────── */
.msg-row--sending .vmsg,
.msg-row--sending .msg-bubble {
    opacity: 0.72;
    position: relative;
}
.msg-row--sending .vmsg::after {
    content: '';
    position: absolute;
    right: -22px; top: 50%;
    width: 12px; height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    border: 2px solid rgba(255, 153, 0, 0.25);
    border-top-color: #ff9900;
    animation: send-spinner .7s linear infinite;
}
.msg-row--failed .vmsg,
.msg-row--failed .msg-bubble {
    border: 1px solid rgba(185, 28, 28, 0.3);
    background: rgba(185, 28, 28, 0.04);
}
.msg-fail-note {
    margin-top: 4px;
    font-size: 11.5px; color: #b91c1c;
    display: inline-flex; align-items: center; gap: 4px;
}
.msg-fail-note i { font-size: 12px; }

/* ============================================================
   Read receipts - WhatsApp-style time + ticks INSIDE the bubble
   single grey ✓ = delivered, double orange ✓✓ = read by partner
   ============================================================ */
.msg-bubble {
    position: relative;
    /* enough right padding to fit the meta strip without overlap */
    padding-right: 4.6rem !important;
    padding-bottom: 1.35rem !important;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.msg-bubble__text {
    white-space: pre-wrap;
    word-break: break-word;
}
.msg-bubble__meta {
    position: absolute;
    right: .7rem;
    bottom: .35rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
    color: var(--wo-text-muted);
    pointer-events: none;
    user-select: none;
}
.msg-row--mine .msg-bubble__meta {
    color: rgba(255,255,255,.62);
}
.msg-bubble__time { opacity: .9; }

/* Tick mark - single grey ✓ until read, double orange ✓✓ when seen */
.msg-tick {
    font-size: .82rem;
    line-height: 1;
    font-weight: 700;
    color: inherit;
    opacity: .85;
    letter-spacing: -.07em;
    transition: color .3s ease;
    margin-left: 1px;
}
.msg-row--mine .msg-tick--read,
.msg-tick--read {
    color: #ff9900 !important;   /* orange, regardless of bubble bg */
    opacity: 1;
    text-shadow: 0 0 1px rgba(255,153,0,.3);
}

/* Sending state - small clock instead of ✓ */
.msg-tick--sending {
    font-size: .72rem;
    opacity: .65;
    animation: tick-sending-spin 1.4s linear infinite;
    display: inline-block;
}
@keyframes tick-sending-spin {
    0%, 100% { opacity: .65; }
    50%      { opacity: 1; }
}
.msg-row--sending .msg-bubble { opacity: .82; }
/* Outside-the-bubble meta for media/voice/offer cards (mine only) */
.msg-meta--mine {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}
.msg-meta--mine .msg-bubble__time { color: var(--wo-text-muted); }
.msg-meta--mine .msg-tick { color: var(--wo-text-muted); }
.msg-meta--mine .msg-tick--read { color: #ff9900; }

/* ============================================================
   3-dot "More" menu in the action bar - WhatsApp/iMessage style
   ============================================================ */
.msg-actions__more { position: relative; display: inline-block; }
.msg-actions__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: var(--wo-card);
    border: 1px solid rgba(38,27,16,.08);
    border-radius: 12px;
    box-shadow: 0 20px 50px -10px rgba(38,27,16,.28),
                0 4px 12px rgba(38,27,16,.08);
    padding: 6px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 1px;
    animation: msg-menu-in .14s cubic-bezier(.2,.9,.3,1.2);
    transform-origin: top right;
}
@keyframes msg-menu-in {
    from { opacity: 0; transform: scale(.92) translateY(-4px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}
.msg-row--mine .msg-actions__menu { right: 0; left: auto; transform-origin: top right; }
.msg-actions__menu[hidden] { display: none; }
.msg-actions__menu-item {
    appearance: none; border: 0;
    background: transparent;
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 500;
    color: var(--wo-ink);
    display: flex;
    align-items: center;
    gap: .7rem;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s ease, color .12s ease, transform .08s ease;
    width: 100%;
    line-height: 1.2;
}
.msg-actions__menu-item i {
    font-size: 1.05rem;
    color: var(--wo-ink-2);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.msg-actions__menu-item:hover {
    background: rgba(255,153,0,.10);
    color: var(--wo-ink);
}
.msg-actions__menu-item:hover i { color:var(--wo-accent-text); }
.msg-actions__menu-item:active { transform: scale(.98); }
.msg-actions__menu-item--danger { color: #b91c1c; }
.msg-actions__menu-item--danger i { color: #b91c1c; }
.msg-actions__menu-item--danger:hover {
    background: rgba(185,28,28,.10);
    color: #b91c1c;
}
.msg-actions__menu-item--danger:hover i { color: #b91c1c; }

/* Toast/copy-confirm tag that appears briefly */
.msg-copy-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--wo-slab);
    color: var(--wo-on-slab);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(38,27,16,.25);
    z-index: 1000;
    animation: toast-pop 1.6s ease forwards;
    pointer-events: none;
}
@keyframes toast-pop {
    0%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
    15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    80%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

/* ============================================================
   "N new messages" floating pill - clicks to scroll to bottom
   ============================================================ */
.new-msg-pill {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: var(--wo-slab);
    color: var(--wo-primary);
    border: 0;
    padding: 8px 14px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 12px 28px -4px rgba(38,27,16,.35);
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
.new-msg-pill.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.new-msg-pill:hover {
    background: var(--wo-primary);
    color: var(--wo-ink);
}
.new-msg-pill i { font-size: 1rem; }

/* Hide the old floating trash entirely now that the menu owns delete */
.msg-del-btn { display: none !important; }

/* ============================================================
   Reply quote - SOLID background so it's readable on the page
   ============================================================ */
button.msg-quote {
    appearance: none;
    background: var(--wo-card);            /* warm cream pill, contrasts the page */
    border: 1px solid rgba(255,153,0,.30);
    border-left: 3px solid #ff9900;
    padding: 8px 12px;
    margin-bottom: 5px;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    font-family: inherit;
    color: var(--wo-ink);
    width: auto;
    max-width: 100%;
    display: block;
    transition: background .12s ease, transform .08s ease;
}
button.msg-quote:hover {
    background: var(--wo-primary-soft);
    border-color: rgba(255,153,0,.50);
}
button.msg-quote:active { transform: translateY(1px); }
.msg-quote__who {
    font-size: .76rem;
    font-weight: 700;
    color: #8a3a00;
    letter-spacing: .01em;
    margin-bottom: 3px;
}
.msg-quote__body {
    font-size: .85rem;
    color: var(--wo-ink);
    line-height: 1.35;
    opacity: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* Mine reply quote - same warm cream/orange pill as incoming, just right-aligned */
.msg-row--mine button.msg-quote {
    background: var(--wo-card);
    border: 1px solid rgba(255,153,0,.30);
    border-left: 3px solid #ff9900;
    color: var(--wo-ink);
    margin-left: auto;
}
.msg-row--mine button.msg-quote:hover {
    background: var(--wo-primary-soft);
    border-color: rgba(255,153,0,.50);
}
.msg-row--mine .msg-quote__who  { color: #8a3a00; font-weight: 700; }
.msg-row--mine .msg-quote__body { color: var(--wo-ink); opacity: 1; }

/* ============================================================
   Flash highlight - clean glowing outline around the message
   Preserves the bubble's own colors so text stays readable
   ============================================================ */
@keyframes msg-flash-pulse {
    0%   { box-shadow: 0 0 0 3px #ff9900, 0 0 0 6px rgba(255,153,0,.35); }
    60%  { box-shadow: 0 0 0 2px rgba(255,153,0,.45), 0 0 24px rgba(255,153,0,.18); }
    100% { box-shadow: 0 0 0 0 rgba(255,153,0,0); }
}
.msg-flash {
    animation: msg-flash-pulse 1.8s cubic-bezier(.22,.61,.36,1);
    border-radius: 6px;
    position: relative;
    z-index: 5;
}

/* ───────── INBOX-FIX-08 (2026-05-27) - Image lightbox ───────── */
.lightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(10, 8, 6, 0.92);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0; transition: opacity .18s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.lightbox.is-open { opacity: 1; }
body.lightbox-open { overflow: hidden; }

.lightbox__stage {
    position: relative;
    max-width: min(94vw, 1400px);
    max-height: 82vh;
    display: flex; align-items: center; justify-content: center;
    transform: scale(.96); transition: transform .2s ease;
}
.lightbox.is-open .lightbox__stage { transform: scale(1); }
.lightbox__stage img {
    max-width: 100%; max-height: 82vh;
    width: auto; height: auto;
    border-radius: 6px;
    box-shadow: 0 24px 80px rgba(0,0,0,.5);
    background: #1a1310;
    user-select: none;
}

.lightbox__close {
    position: absolute; top: 18px; right: 18px;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,.12); color: #fff;
    border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    transition: background .15s ease, transform .15s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.lightbox__close:hover { background: rgba(255,255,255,.22); transform: scale(1.05); }

.lightbox__bar {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    display: inline-flex; gap: .5rem;
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 6px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
}
.lightbox__btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .45rem .85rem;
    background: transparent; color: #fff;
    border: 0; border-radius: 999px;
    font-size: .85rem; font-family: var(--font-body, inherit);
    text-decoration: none; cursor: pointer;
    transition: background .14s ease;
}
.lightbox__btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.lightbox__btn i { font-size: 1rem; }
.lightbox__btn--danger { color: #fda4af; }
.lightbox__btn--danger:hover { background: rgba(220, 38, 38, .26); color: #fff; }

@media (max-width: 600px) {
    .lightbox__btn span { display: none; }
    .lightbox__btn { padding: .55rem .65rem; }
    .lightbox__close { top: 12px; right: 12px; width: 38px; height: 38px; }
}

/* INBOX-FIX-07 relaxed - image-fallback chip is icon-only (no filename) */
.composer-attach-preview--image-fallback {
    padding: 8px 12px;
    background: rgba(255, 153, 0, 0.06);
    border: 1px solid rgba(255, 153, 0, 0.22);
}

/* ───────── INBOX-FIX-12 (2026-05-27) - multi-attachment composer + bubble ───────── */
/* container for multiple pending-chip previews in the composer */
.composer-attach-previews {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0 4px 8px;
    padding: 0;
}
.composer-attach-previews .composer-attach-preview { margin: 0; flex: 0 1 auto; }
.composer-attach-previews .composer-attach-preview--image { padding: 0; }

/* stack inside a message bubble - multiple files in one message */
.msg-attach-stack { display: flex; flex-direction: column; gap: 6px; }
.msg-attach-stack .msg-media { margin: 0; }

/* grid for 2+ images in the same bubble */
.msg-gallery {
    display: grid; gap: 4px;
    border-radius: 12px; overflow: hidden;
    max-width: 360px;
}
.msg-gallery .msg-media--image,
.msg-gallery .msg-media--bare {
    margin: 0; border-radius: 0; box-shadow: none;
}
.msg-gallery .msg-media--bare img {
    width: 100%; height: 100%; max-width: none; max-height: none;
    object-fit: cover; border-radius: 0;
    box-shadow: none;
    transition: none;
    display: block;
}
.msg-gallery .msg-media--bare:hover img { transform: none; }
.msg-gallery--n1 { grid-template-columns: 1fr; }
.msg-gallery--n1 .msg-media--bare img { aspect-ratio: auto; max-height: 360px; object-fit: contain; background: #1a1310; }
.msg-gallery--n2 { grid-template-columns: 1fr 1fr; }
.msg-gallery--n2 .msg-media--bare img { aspect-ratio: 1 / 1; }
.msg-gallery--n3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.msg-gallery--n3 .msg-media--bare:first-child { grid-column: span 2; }
.msg-gallery--n3 .msg-media--bare img { aspect-ratio: 1 / 1; }
.msg-gallery--n3 .msg-media--bare:first-child img { aspect-ratio: 2 / 1; }
.msg-gallery--n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.msg-gallery--n4 .msg-media--bare img { aspect-ratio: 1 / 1; }

/* If the user attaches more than 4 images, the 4th tile shows a +N overlay */
.msg-gallery--n4 .msg-media--bare:nth-child(n+5) { display: none; }
.msg-gallery--n4 .msg-media--bare:nth-child(4) { position: relative; }
.msg-gallery--n4 .msg-media--bare:nth-child(4)::after {
    content: attr(data-more);
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.55); color: #fff;
    font-weight: 600; font-size: 1.5rem;
    pointer-events: none;
}

/* ───────── INBOX-FIX-13 (2026-05-27) - orange-tint upload overlay per chip ─────────
   The user picks files → chips render INSTANTLY from local blob URLs. A
   semi-opaque orange overlay sits on top of each chip and DRAINS from full
   (100%-tinted) to empty (0%-tinted) as the XHR progresses. Driven by the
   --upload-progress custom prop set inline by JS. */

/* Image chip - overlay covers the wrap, drains via height anim */
.composer-attach-preview .composer-attach-preview__progress-overlay {
    position: absolute;
    inset: auto 0 0 0;
    height: calc(100% - var(--upload-progress, 0%));
    background: rgba(255, 153, 0, 0.55);
    border-radius: inherit;
    pointer-events: none;
    transition: height .25s ease;
    z-index: 2;
    /* subtle shimmer to communicate "active" */
    background-image: linear-gradient(180deg, rgba(255, 200, 100, .25) 0%, rgba(255, 153, 0, .65) 100%);
}
/* Hide overlay entirely once done */
.composer-attach-preview:not(.is-uploading) .composer-attach-preview__progress-overlay {
    opacity: 0;
    transition: opacity .25s ease, height .25s ease;
}

/* Image-wrap needs relative for the overlay to anchor */
.composer-attach-preview--image .composer-attach-preview__image-wrap {
    position: relative;
}

/* Center percentage badge - visible while uploading */
.composer-attach-preview__progress-badge {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 3;
    pointer-events: none;
    color: #fff;
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    font-size: .95rem;
    text-shadow: 0 1px 4px rgba(0,0,0,.35);
    opacity: 0; transition: opacity .15s ease;
}
.composer-attach-preview.is-uploading .composer-attach-preview__progress-badge { opacity: 1; }

/* Non-image chips - overlay sits over the icon square only (so the filename text
   stays readable). Use icon-wrap as the anchor. */
.composer-attach-preview__icon-wrap {
    position: relative;
    flex-shrink: 0;
}
.composer-attach-preview__icon-wrap .composer-attach-preview__progress-overlay {
    border-radius: 8px;
}
.composer-attach-preview__icon-wrap .composer-attach-preview__icon {
    position: relative;
    z-index: 1;
}

/* Error state - replace orange with red tint */
.composer-attach-preview.is-error .composer-attach-preview__progress-overlay {
    background: rgba(220, 38, 38, 0.55);
    background-image: none;
    height: 100%;
    opacity: 1;
}
.composer-attach-preview.is-error .composer-attach-preview__meta { color: #b91c1c; }

/* While uploading, the remove × is still clickable (lets the user cancel) */
.composer-attach-preview.is-uploading .composer-attach-preview__remove {
    z-index: 4;
}

/* Send button while waiting on uploads - subtle disabled-ish look (no shake) */
.composer-send.composer-send--waiting {
    opacity: .55; cursor: progress;
}
.composer-send.composer-send--waiting i { animation: wo-upload-pulse 1.2s ease-in-out infinite; }

/* INBOX-FIX-15 - placeholder visible only while <img> has no src yet */
.composer-attach-preview__image-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 153, 0, .55); font-size: 2rem;
    pointer-events: none;
    background: rgba(255, 153, 0, 0.05);
    border-radius: inherit;
    z-index: 0;
}
.composer-attach-preview__image-wrap > .composer-attach-preview__image[src]:not([src=""]) ~ .composer-attach-preview__image-placeholder {
    display: none;
}
.composer-attach-preview__image[src=""] {
    /* Empty src - keep the tag in DOM but hide visually until FileReader resolves */
    width: 220px; height: 140px; visibility: hidden;
}
/* Once filled in: smooth fade from placeholder to real image */
.composer-attach-preview__image {
    animation: wo-img-in .25s ease-out;
}
@keyframes wo-img-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }

/* ───────── INBOX-FIX-20 (2026-05-27) - WorkOfficially confirm modal ─────────
   Drop-in replacement for native browser confirm(). Matches the rest of the UI. */
.wo-confirm {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0; transition: opacity .15s ease;
}
.wo-confirm.is-open { opacity: 1; }
body.wo-confirm-open { overflow: hidden; }
.wo-confirm__backdrop {
    position: absolute; inset: 0;
    background: rgba(10, 8, 6, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.wo-confirm__panel {
    position: relative;
    background: var(--wo-card, #fff);
    border: 1px solid var(--wo-line, rgba(0,0,0,.08));
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0,0,0,.28);
    width: 100%; max-width: 440px;
    padding: 22px 22px 18px;
    transform: scale(.96) translateY(6px); transition: transform .18s ease;
}
.wo-confirm.is-open .wo-confirm__panel { transform: scale(1) translateY(0); }
.wo-confirm__head {
    display: flex; gap: 14px; align-items: flex-start;
    margin-bottom: 18px;
}
.wo-confirm__icon {
    flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 153, 0, .12); color: #d97706;
    font-size: 1.25rem;
}
.wo-confirm--danger .wo-confirm__icon {
    background: rgba(220, 38, 38, .12); color: #dc2626;
}
.wo-confirm__title {
    font-family: var(--font-display, inherit);
    font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em;
    color: var(--wo-ink, #261b10);
    margin: 0 0 .25rem;
}
.wo-confirm__message {
    font-size: .9rem; color: var(--wo-text-muted, rgba(38,27,16,.65));
    margin: 0; line-height: 1.45;
}
.wo-confirm__foot {
    display: flex; gap: .5rem; justify-content: flex-end;
    margin-top: .5rem;
}
.wo-confirm__btn {
    padding: .55rem 1.1rem;
    font-family: var(--font-display, inherit);
    font-weight: 600; font-size: .9rem;
    border-radius: 8px; border: 1px solid transparent;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, transform .1s ease;
}
.wo-confirm__btn:active { transform: translateY(1px); }
.wo-confirm__btn--ghost {
    background: transparent; color: var(--wo-ink, #261b10);
    border-color: var(--wo-line, rgba(0,0,0,.12));
}
.wo-confirm__btn--ghost:hover { background: rgba(38,27,16,.05); }
.wo-confirm__btn--primary {
    background: var(--wo-ink, #261b10); color: var(--wo-primary, #ff9900);
    border-color: var(--wo-ink, #261b10);
}
.wo-confirm__btn--primary:hover { background: var(--wo-primary, #ff9900); color: var(--wo-ink, #261b10); }
.wo-confirm__btn--danger {
    background: #dc2626; color: #fff; border-color: #dc2626;
}
.wo-confirm__btn--danger:hover { background: #b91c1c; border-color: #b91c1c; }

@media (max-width: 500px) {
    .wo-confirm__panel { padding: 18px 16px 14px; }
    .wo-confirm__foot  { flex-direction: column-reverse; }
    .wo-confirm__btn   { width: 100%; padding: .7rem; }
}

/* INBOX-FIX-21 - caption text shown ABOVE an attachment (or gallery).
   Renders as a regular speech bubble but with a tighter bottom margin so it
   sits flush with the image/gallery beneath. */
.msg-bubble--caption {
    margin-bottom: 4px;
    max-width: 360px;
    /* let it line-break naturally */
}
.msg-row--mine .msg-bubble--caption { margin-left: auto; }

/* INBOX-FIX-22 - preserve newlines inside the woConfirm message text so the
   per-file rejection list reads nicely. */
.wo-confirm__message { white-space: pre-line; }

/* INBOX-FIX-23 - "Tap to retry" bar attached to a failed bubble */
/* REPORT-20260902: the reason picker.
   A purpose-built sheet rather than woConfirm, which is yes/no only and cannot
   collect a choice. Bottom-sheet on phones, centred card on desktop - reporting
   most often happens on a phone, mid-conversation. */
.wo-report-sheet {
    position: fixed; inset: 0; z-index: 1080;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(15, 12, 9, .45);
    padding: 0;
}
.wo-report-sheet__panel {
    width: 100%; max-width: 26rem;
    background: #fff; color: #1f2937;
    border-radius: 16px 16px 0 0;
    padding: 1rem 1rem 1.1rem;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
}
.wo-report-sheet__title { font-weight: 700; font-size: 1rem; }
.wo-report-sheet__sub   { font-size: .82rem; color: #6b7280; margin-top: .15rem; }
.wo-report-sheet__opts  { display: flex; flex-direction: column; gap: .35rem; margin: .8rem 0 .6rem; }
.wo-report-sheet__opt {
    text-align: left; width: 100%;
    padding: .6rem .7rem;
    font-size: .88rem;
    background: #f9fafb; color: inherit;
    border: 1px solid #e5e7eb; border-radius: 10px;
    cursor: pointer;
}
.wo-report-sheet__opt:hover { background: #f3f4f6; }
.wo-report-sheet__cancel {
    width: 100%; padding: .55rem;
    font-size: .85rem; color: #6b7280;
    background: transparent; border: 0; cursor: pointer;
}
@media (min-width: 640px) {
    .wo-report-sheet { align-items: center; padding: 1rem; }
    .wo-report-sheet__panel { border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .22); }
}
html[data-theme="dark"] .wo-report-sheet__panel { background: #1c1917; color: #e7e5e4; }
html[data-theme="dark"] .wo-report-sheet__opt   { background: #292524; border-color: #44403c; }
html[data-theme="dark"] .wo-report-sheet__opt:hover { background: #332e2b; }
html[data-theme="dark"] .wo-report-sheet__sub,
html[data-theme="dark"] .wo-report-sheet__cancel { color: #a8a29e; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not([data-theme="dark"]) .wo-report-sheet__panel { background: #1c1917; color: #e7e5e4; }
    html:not([data-theme="light"]):not([data-theme="dark"]) .wo-report-sheet__opt   { background: #292524; border-color: #44403c; }
    html:not([data-theme="light"]):not([data-theme="dark"]) .wo-report-sheet__sub,
    html:not([data-theme="light"]):not([data-theme="dark"]) .wo-report-sheet__cancel { color: #a8a29e; }
}

/* CONTACT-MASK-20260902: shown under the sender's own bubble when contact
   details were hidden. Informational, not an error - amber, not the red of
   .msg-retry-bar below, because the message DID send. */
.msg-mask-note {
    margin-top: 4px;
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .3rem .55rem;
    font-size: .72rem; line-height: 1.35; color: #92400e;
    background: rgba(217, 119, 6, .10);
    border: 1px solid rgba(217, 119, 6, .28);
    border-radius: 8px;
    max-width: 32rem;
}
.msg-mask-note i { font-size: .85rem; flex: 0 0 auto; }
html[data-theme="dark"] .msg-mask-note {
    color: #fcd34d;
    background: rgba(217, 119, 6, .16);
    border-color: rgba(252, 211, 77, .30);
}
/* Match the file's existing pattern: an explicit choice wins, and a visitor
   who never touched the toggle follows their OS. Without this second block the
   note stays light-mode amber on a system-dark screen. */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not([data-theme="dark"]) .msg-mask-note {
        color: #fcd34d;
        background: rgba(217, 119, 6, .16);
        border-color: rgba(252, 211, 77, .30);
    }
}

.msg-retry-bar {
    margin-top: 4px;
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .3rem .55rem;
    font-size: .75rem; color: #b91c1c;
    background: rgba(220, 38, 38, .08);
    border: 1px solid rgba(220, 38, 38, .25);
    border-radius: 8px;
}
.msg-retry-bar i { font-size: .9rem; }
.msg-retry-btn {
    background: transparent; border: 0; color: #b91c1c;
    font-weight: 600; cursor: pointer; text-decoration: underline;
    padding: 0;
}
.msg-retry-btn:hover { color: #7f1d1d; }
/* Sending state - slightly dimmed (was already in CSS as msg-row--sending) but
   tweak to read more like WhatsApp's grey-clock. */
.msg-row--sending .msg-tick--sending { opacity: .55; }
.msg-row--failed  .msg-bubble        { opacity: .85; }

/* ───────── INBOX-FIX-25 (2026-05-27) - inbox list star button + empty state ───────── */
.inbox-item { position: relative; }
.inbox-item__fav {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 28px; height: 28px;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--wo-text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .9rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, background .12s ease, color .12s ease, transform .12s ease;
    z-index: 4;
}
.inbox-item:hover .inbox-item__fav,
.inbox-item[data-favorite="1"] .inbox-item__fav {
    opacity: 1;
}
.inbox-item__fav:hover { background: rgba(255, 153, 0, .12); color: #d97706; transform: scale(1.1); }
.inbox-item[data-favorite="1"] .inbox-item__fav { color: #ff9900; }
.inbox-item[data-favorite="1"] .inbox-item__fav i.bi-star-fill { color: #ff9900; }

/* Filter empty state */
.inbox-empty--filter {
    padding: 28px 18px;
    text-align: center;
    color: var(--wo-ink-2);
}
.inbox-empty--filter i {
    display: block;
    font-size: 1.8rem;
    margin-bottom: 8px;
    color: rgba(255, 153, 0, .55);
}
.inbox-empty--filter .btn-link {
    color: #d97706;
    font-weight: 600;
    text-decoration: underline;
    vertical-align: baseline;
}

/* ───────── MODE-FIX-01 (2026-05-27) - dual-mode switcher ───────── */

/* Header pill - always visible next to the WO wordmark */
.mode-pill {
    position: relative;
    margin-left: .9rem;
    display: inline-flex;
}
.mode-pill__btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .7rem .35rem .55rem;
    background: var(--wo-card, #fff);
    border: 1px solid var(--wo-line, rgba(0,0,0,.10));
    border-radius: 999px;
    font-family: var(--font-display, inherit);
    font-weight: 500; font-size: .82rem;
    color: var(--wo-ink, #261b10);
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease;
}
.mode-pill__btn:hover { background: rgba(255, 153, 0, .07); border-color: rgba(255, 153, 0, .35); }
.mode-pill__btn > i:first-child { font-size: 1rem; }
.mode-pill__chev { font-size: .7rem; opacity: .55; margin-left: .15rem; }
.mode-pill__label { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; gap: 1px; }
.mode-pill__as { font-size: .62rem; opacity: .55; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; }
.mode-pill__label strong { font-weight: 600; }

.mode-pill--freelancer .mode-pill__btn > i:first-child { color: #d97706; }
.mode-pill--client     .mode-pill__btn > i:first-child { color: #2b579a; }

.mode-pill__menu {
    position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 240px;
    background: var(--wo-card, #fff);
    border: 1px solid var(--wo-line, rgba(0,0,0,.10));
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
    padding: .35rem;
    z-index: 200;
    animation: mode-pill-in .15s ease;
}
@keyframes mode-pill-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mode-pill__menu-head {
    padding: .4rem .6rem .15rem;
    font-size: .65rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--wo-text-muted); font-weight: 600;
}
.mode-pill__menu-item {
    display: flex; align-items: center; gap: .5rem;
    width: 100%;
    padding: .55rem .65rem;
    background: transparent; border: 0;
    border-radius: 8px;
    color: var(--wo-ink, #261b10);
    font-size: .85rem; text-align: left;
    cursor: pointer; text-decoration: none;
    transition: background .12s ease;
    font-family: inherit;
}
.mode-pill__menu-item:hover { background: rgba(255, 153, 0, .10); color: var(--wo-ink, #261b10); }
.mode-pill__menu-item i { font-size: 1rem; opacity: .8; }
.mode-pill__menu-item--activate { color: #d97706; font-weight: 600; }
.mode-pill__menu-item--activate i { color: #d97706; }
.mode-pill__form { margin: 0; }
.mode-pill__hint {
    margin-top: .25rem;
    padding: .55rem .65rem;
    font-size: .72rem;
    color: var(--wo-text-muted);
    border-top: 1px solid rgba(0,0,0,.06);
    line-height: 1.35;
}

/* Mode chip inside account dropdown */
.mode-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    background: rgba(255, 153, 0, .08);
    color:var(--wo-accent-text);
    margin-bottom: .35rem;
}
.mode-chip--client { background: rgba(43, 87, 154, .1); color: #2b579a; }
.mode-chip i { font-size: .85rem; }

/* Activation form - full-page onboarding for the second mode */
.mode-activate {
    min-height: 70vh;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 48px 16px;
}
.mode-activate__container {
    width: 100%; max-width: 640px;
    background: var(--wo-card, #fff);
    border: 1px solid var(--wo-line, rgba(0,0,0,.08));
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
    padding: 32px;
}
.mode-activate__header {
    display: flex; gap: 18px; align-items: flex-start;
    margin-bottom: 24px;
}
.mode-activate__icon {
    flex: 0 0 56px; width: 56px; height: 56px;
    border-radius: 14px;
    display: grid; place-items: center;
    background: rgba(255, 153, 0, .1); color: #d97706;
    font-size: 1.7rem;
}
.mode-activate__title {
    font-family: var(--font-display, inherit);
    font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em;
    color: var(--wo-ink, #261b10); margin: 0 0 .35rem;
}
.mode-activate__sub {
    margin: 0; font-size: .9rem; line-height: 1.45;
    color: var(--wo-ink-2);
}
.mode-activate__form {
    display: flex; flex-direction: column; gap: 18px;
}
.mode-activate__field { display: flex; flex-direction: column; gap: .35rem; }
.mode-activate__field label { font-weight: 600; font-size: .82rem; color: var(--wo-ink); }
.mode-activate__field .form-control,
.mode-activate__field .form-select {
    font-size: .92rem; padding: .55rem .7rem;
    border-radius: 8px;
}
.mode-activate__field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) {
    .mode-activate__container { padding: 22px; }
    .mode-activate__field-row { grid-template-columns: 1fr; }
}
.mode-activate__optional { font-weight: 400; color: var(--wo-text-muted); }
.mode-activate__hint {
    font-size: .75rem; color: var(--wo-text-muted);
    margin-top: -.15rem;
}
.mode-activate__hint--note {
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(43, 87, 154, .06);
    border: 1px solid rgba(43, 87, 154, .18);
    border-radius: 8px;
    color: #2b579a; font-size: .8rem;
    display: flex; align-items: flex-start; gap: .5rem;
}
.mode-activate__hint--note i { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.mode-activate__actions {
    display: flex; justify-content: flex-end; gap: .55rem;
    margin-top: 8px; padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,.06);
}
.mode-activate__foot {
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 153, 0, .06);
    color: var(--wo-ink, #261b10);
    font-size: .82rem; line-height: 1.45;
}

/* ───────── BRIDGE-FIX-02 (2026-05-27) - "NEW" badge on top-bar nav items ─────────
   NAV-FIX (2026-05-29): upgraded to a proper golden flare. Three layers:
   1) Metallic gradient base (light-gold → bright-gold → deep-gold) for a
      molten look, with a 1px white inset border at the top for a polished
      metallic edge and 1px dark shadow at the bottom.
   2) Pulsing outer halo (box-shadow ring expanding + fading on a 2.4s loop).
   3) Sweeping shimmer overlay (::after) that sweeps left-to-right every
      3.6s - gives the "freshly polished gold" flare. */
.app-bar__link--new {
    position: relative;
}
.app-bar__new-badge {
    position: relative;
    overflow: hidden;                 /* clips the shimmer sweep */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: .4rem;
    padding: 3px 8px;
    font-family: var(--font-display, inherit);
    font-size: .6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .08em;
    color: #2a1505;                   /* deep brown - more contrast on gold than #1a1209 */
    background:
        linear-gradient(180deg,
            #fff3c4 0%,               /* champagne highlight */
            #ffd97a 22%,
            #ffb238 55%,               /* core gold */
            #f49118 80%,
            #c8650a 100%);            /* deep amber base */
    border-radius: 999px;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255, 245, 200, .55);  /* soft top highlight on the text */
    pointer-events: none;
    vertical-align: middle;
    /* Metallic edge: bright inset on top, dark inset on bottom */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .65),
        inset 0 -1px 0 rgba(120, 60, 0, .45),
        0 2px 6px rgba(255, 153, 0, .45),
        0 0 0 0 rgba(255, 200, 80, .55);
    animation: wo-new-halo 2.4s ease-in-out infinite;
}
/* Sweeping shimmer overlay - bright white diagonal stripe that travels
   across the badge every 3.6s. */
.app-bar__new-badge::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -60%;
    width: 50%;
    background: linear-gradient(115deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, .75) 50%,
        rgba(255, 255, 255, 0) 70%,
        transparent 100%);
    transform: skewX(-22deg);
    animation: wo-new-shimmer 3.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes wo-new-halo {
    0%, 100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .65),
            inset 0 -1px 0 rgba(120, 60, 0, .45),
            0 2px 6px rgba(255, 153, 0, .45),
            0 0 0 0 rgba(255, 200, 80, .55);
        transform: scale(1);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .85),
            inset 0 -1px 0 rgba(120, 60, 0, .55),
            0 3px 10px rgba(255, 153, 0, .65),
            0 0 0 5px rgba(255, 200, 80, 0);
        transform: scale(1.05);
    }
}
@keyframes wo-new-shimmer {
    0%        { left: -60%; }
    60%, 100% { left: 130%; }
}
/* When the user is ON the new-feature page, retire the flare so it doesn't
   keep nagging - replace with a static "you're here" highlight */
.app-bar__link--new.is-active .app-bar__new-badge {
    animation: none;
    background: rgba(255, 255, 255, 0.92);
    color: var(--wo-ink, #1a1209);
    text-shadow: none;
    box-shadow:
        inset 0 0 0 1px rgba(120, 60, 0, .2),
        0 1px 0 rgba(255, 153, 0, .15);
}
.app-bar__link--new.is-active .app-bar__new-badge::after { display: none; }

/* Respect reduced motion - kill halo + shimmer, keep the static gold pill */
@media (prefers-reduced-motion: reduce) {
    .app-bar__new-badge          { animation: none; }
    .app-bar__new-badge::after   { display: none; }
}

@media (max-width: 600px) {
    /* Narrow screens: hide badge text, keep a small gold dot via ::before */
    .app-bar__new-badge {
        font-size: 0;
        padding: 4px;
        margin-left: .25rem;
    }
    .app-bar__new-badge::before {
        content: '';
        display: block;
        width: 6px; height: 6px;
        background: #2a1505;
        border-radius: 50%;
    }
}

/* ───────── BRIDGE-FIX-03 (2026-05-27) - visible platform dropdown ───────── */
.bridge-select-wrap {
    position: relative;
}
.bridge-select-wrap .bridge-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: none;        /* kill Bootstrap's built-in chevron - we draw our own */
    padding: .65rem 2.4rem .65rem 2.2rem;
    border-radius: 8px;
    border: 1.5px solid var(--wo-line, rgba(0,0,0,.18));
    background-color: var(--wo-card, #fff);
    font-weight: 500;
    color: var(--wo-ink, #1a1209);
    cursor: pointer;
    width: 100%;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.bridge-select-wrap .bridge-select:hover {
    border-color: rgba(255, 153, 0, .55);
}
.bridge-select-wrap .bridge-select:focus {
    outline: none;
    border-color: #ff9900;
    box-shadow: 0 0 0 3px rgba(255, 153, 0, .15);
}
.bridge-select-icon {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--wo-text-muted);
    font-size: 1rem;
    pointer-events: none;
}
.bridge-select-chev {
    position: absolute;
    right: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #ff9900;
    font-size: .9rem;
    font-weight: 700;
    pointer-events: none;
    transition: transform .15s ease;
}
.bridge-select-wrap:focus-within .bridge-select-chev {
    transform: translateY(-50%) rotate(180deg);
    color: #d97706;
}


/* ============================================================================
 * MOBILE-PASS-2026-05-30  ·  Safe primitives only
 * ----------------------------------------------------------------------------
 * The big sweep was rolled back because it broke layouts. What remains here
 * are only safe, isolated primitives. Anything more invasive will be done
 * per-page after walking through the inventory together.
 *
 *   1. iOS safe-area on the top app bar (notch / dynamic island)
 *   2. Inputs ≥16px on phones so iOS Safari doesn't auto-zoom on focus
 * ============================================================================ */

@supports (padding: env(safe-area-inset-top)) {
    .app-bar {
        padding-top: max(.75rem, env(safe-area-inset-top));
        padding-left: max(1.5rem, env(safe-area-inset-left));
        padding-right: max(1.5rem, env(safe-area-inset-right));
    }
}

@media (max-width: 640px) {
    .form-control, .form-select,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="tel"], input[type="url"], input[type="search"],
    input[type="number"], textarea, select {
        font-size: 16px;
    }
}
/* ── MOBILE-Z1 (2026-05-30): mobile app-bar layout per design feedback ────────
 * Phone (≤900): hamburger LEFT, "WorkOfficially" CENTERED, actions RIGHT
 * (Messages icon surfaced next to bell + shield + avatar). Drawer from LEFT.
 * Desktop is untouched - every rule below sits in @media.
 * --------------------------------------------------------------------------- */

/* Messages icon in the actions cluster: only visible on mobile. */
.app-bar__msg-mobile { display: none; }
@media (max-width: 900px) {
    .app-bar__msg-mobile {
        display: inline-flex;
        width: 40px; height: 40px;
        align-items: center; justify-content: center;
    }
}

/* Re-grid the bar on phones. */
@media (max-width: 900px) {
    .app-bar {
        /* WORDMARK-NEVER-CUT-20260902: was `auto 1fr auto`, which put the BRAND
           in the 1fr track. Measured on a 375px phone against production, that
           track resolved to 45.1px while the wordmark needs 115.4px - a 70px
           shortfall, clipped mid-word. Hence "WorkOfficiall" and, on Android,
           "WorkO".

           Brand now gets its own intrinsic `auto` track and the ACTIONS cluster
           takes the flexible one, so the squeeze lands on the buttons instead
           of the logo. */
        grid-template-columns: auto auto 1fr !important;
        gap: .5rem;
    }
    .app-bar__brand {
        /* LOGO-OVERLAP-FIX (2026-08-11): was justify-content:center, which let the
           full-size wordmark overflow to the LEFT, under the hamburger, on narrow
           phones. Left-align it beside the hamburger so it can never collide. */
        justify-content: flex-start;
        /* WORDMARK-NEVER-CUT-20260902: min-width:0 + overflow:hidden here is
           what actually performed the cut - confirmed by reading the computed
           style off the live page, not inferred. The 2026-08-11 fix solved the
           overlap by clipping, and its own comment says so: "clip on the right
           if space is still tight". That trade is no longer wanted, and it is
           no longer needed either: the brand has its own grid track now, so it
           cannot reach under the hamburger whether or not it is clipped. */
        min-width: max-content;
        overflow: visible;
        padding-left: .1rem;
    }
    /* The app-bar wordmark renders as .wo-wm (the old .wo-wordmark selector here
       never matched anything, so nothing constrained it). */
    .app-bar__brand .wo-wm {
        font-size: 1.15rem !important;
        max-width: none;
        overflow: visible;
    }
    .app-bar__actions {
        justify-self: end;
        gap: .15rem;
        /* Let the buttons be the thing that gives. Without min-width:0 a grid
           item refuses to shrink below min-content and the whole bar overflows
           the viewport instead - trading a cut logo for a sideways-scrolling
           page, which is not a fix. */
        min-width: 0;
    }
}

/* WORDMARK-NEVER-CUT-20260902 - making room, measured rather than guessed.
   At 375px the row wanted 445px: 48 padding + 38 hamburger + 16 gaps +
   228 actions + 115 wordmark. Something has to give 70px, and it must not be
   the logo. Taken from the three cheapest places, none of which removes a
   control: the frame padding, the CTA chrome, and a small step down in
   wordmark size. A complete slightly-smaller logo beats a cut one. */
@media (max-width: 420px) {
    .app-bar {
        padding-left: .6rem;
        padding-right: .6rem;
        gap: .4rem;
    }
    .app-bar__brand .wo-wm { font-size: 1rem !important; }
    .app-bar__signin {
        padding-left: .4rem;
        padding-right: .4rem;
        letter-spacing: .02em;
    }
    .app-bar__getstarted {
        padding-left: .55rem;
        padding-right: .55rem;
        letter-spacing: .02em;
    }
}

/* WORDMARK-NEVER-CUT-20260902 - the last 22px.
   Measured at 320px with everything above applied: the actions cluster still
   wanted 176px in a 148px track and OVERLAPPED the wordmark by 21.6px. Not a
   clip any more, but just as broken - the theme toggle sat on the logo's tail.
   Worth saying plainly, because the earlier version of this fix looked correct
   at 375px and I only caught this by measuring 320.

   The toggle is the right thing to drop: it is a preference, not navigation,
   and it now lives in the drawer (THEME-IN-DRAWER-20260902) so nothing is lost
   - unlike Sign in / Get started, which for a guest exist ONLY here. */
@media (max-width: 400px) {
    .app-bar__actions .wo-theme-toggle { display: none; }
}

/* Drawer slides in from the LEFT on mobile (was right). */
@media (max-width: 900px) {
    .app-drawer__panel {
        right: auto !important;
        left: 0 !important;
        border-left: 0 !important;
        border-right: 1px solid var(--wo-line) !important;
        transform: translateX(-100%);
    }
    .app-drawer.is-open .app-drawer__panel { transform: translateX(0); }
}

/* ── MOBILE-Z2 (2026-05-30): inbox single-pane on phones ─────────────────────
 * The 3-pane (list · thread · details) grid was rendering ALL THREE panes
 * stacked on mobile because earlier rules in the file have `display:flex`
 * for `.inbox-list` and `.inbox-thread` outside any media query. These
 * rules sit at the END of the file so they win the cascade without needing
 * to chase down every earlier rule.
 *
 * Mobile state model:
 *   .inbox-app                  → list-mode (no active conversation)
 *   .inbox-app.is-thread-open   → thread-mode (active conversation)
 * The server stamps the class based on $activeConv. Desktop = unchanged.
 * --------------------------------------------------------------------------- */

@media (max-width: 760px) {
    /* Reset the grid so panes can stack/hide without the grid widths fighting us. */
    .inbox-app {
        display: block !important;
        height: 100%;
        position: relative;
    }

    /* List-mode (default): show the list pane, hide thread + details. */
    .inbox-app:not(.is-thread-open) .inbox-list {
        display: flex !important;
        width: 100% !important;
        height: 100%;
        border-right: 0 !important;
    }
    .inbox-app:not(.is-thread-open) .inbox-thread,
    .inbox-app:not(.is-thread-open) .inbox-details {
        display: none !important;
    }

    /* Thread-mode: show the thread pane only. List + details hidden. */
    .inbox-app.is-thread-open .inbox-thread {
        display: flex !important;
        flex-direction: column;
        width: 100% !important;
        height: 100%;
    }
    .inbox-app.is-thread-open .inbox-list,
    .inbox-app.is-thread-open .inbox-details {
        display: none !important;
    }

    /* The back arrow lives in the thread header - make it a real 40px touch
       target. The d-lg-none class was unreliable here. */
    .inbox-back-mobile {
        width: 40px; height: 40px;
        display: inline-flex !important;
        align-items: center; justify-content: center;
        margin-right: .25rem;
        flex-shrink: 0;
        color: var(--wo-ink);
        text-decoration: none;
    }

    /* Tighten the thread header so the back + avatar + tools fit without
       wrapping or pushing the composer down. */
    .inbox-thread__header {
        padding: .65rem .75rem !important;
        flex-wrap: nowrap;
    }
    .inbox-thread__header .icon-btn {
        width: 36px; height: 36px;
    }

    /* List header tightening so the search + filter row fits cleanly. */
    .inbox-list__header { padding: .9rem 1rem .6rem; }
}

/* Above ≥ 761px: hide the mobile back link, restore desktop. */
@media (min-width: 761px) {
    .inbox-back-mobile { display: none !important; }
}

/* ── MOBILE-Z4 (2026-05-30): details panel as slide-in overlay on phones ─────
 * The right details rail (files, links, pinned, etc.) is hidden on mobile
 * by Z2. Tapping #detailsToggle in the thread header adds `is-details-open`
 * on .inbox-app, which slides the panel in from the right over the thread.
 * Tap backdrop or the close icon to dismiss. */

@media (max-width: 760px) {
    /* Backdrop for the slide-in. Rendered as a ::before on .inbox-app so we
       don't have to touch the markup. */
    .inbox-app.is-thread-open.is-details-open::before {
        content: "";
        position: fixed; inset: 0;
        background: rgba(38, 27, 16, .42);
        backdrop-filter: blur(2px);
        z-index: 1090;
        animation: woFadeIn .18s ease;
    }
    @keyframes woFadeIn { from { opacity: 0 } to { opacity: 1 } }

    /* Make the details panel a positioned slide-in (only when open). */
    .inbox-app.is-thread-open.is-details-open .inbox-details {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: min(360px, 92vw);
        background: var(--wo-card, #fff);
        border-left: 1px solid var(--wo-line, #ece5d5);
        box-shadow: 0 0 60px rgba(17, 16, 12, .22);
        z-index: 1091;
        overflow-y: auto;
        transform: translateX(0);
        animation: woSlideInRight .22s cubic-bezier(.2, .7, .2, 1);
        padding-bottom: env(safe-area-inset-bottom);
    }
    @keyframes woSlideInRight {
        from { transform: translateX(100%); }
        to   { transform: translateX(0); }
    }
}
@media (prefers-reduced-motion: reduce) {
    .inbox-app.is-thread-open.is-details-open::before,
    .inbox-app.is-thread-open.is-details-open .inbox-details {
        animation: none !important;
    }
}

/* ── CALL-O (2026-05-30): Cancel button on waiting screen + Active-call
 *    banner in the inbox thread when a call is in progress ───────────────── */

/* Empty-state: Copy invite + Cancel side by side. */
.call-empty__actions {
    display: flex;
    gap: .65rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.call-empty__cancel {
    background: linear-gradient(180deg, #fbf5e8 0%, #f4ead1 100%);
    color: #8a261b;
    border: 1px solid rgba(138, 38, 27, .40);
    font-weight: 700;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 2px 6px rgba(138, 38, 27, .10);
    transition: transform .12s, background .14s, box-shadow .22s, border-color .14s, color .14s;
}
.call-empty__cancel:hover {
    background: linear-gradient(180deg, #fbf5e8 0%, #efdfb6 100%);
    border-color: rgba(138, 38, 27, .70);
    color: #6e1a12;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 8px 22px rgba(138, 38, 27, .18),
                0 0 0 3px rgba(255, 153, 0, .22);
}
.call-empty__cancel:active {
    transform: scale(.97);
    background: linear-gradient(180deg, #9a2a1d 0%, #7a1f15 100%);
    color: #fbf5e8;
    border-color: rgba(138, 38, 27, .85);
}

/* Active-call banner inside the conversation thread. Hidden by default;
   shown by JS when sessionStorage holds an active call for this conv. */
.inbox-active-call {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem .9rem;
    background: linear-gradient(180deg, #fff8e6 0%, #ffeec2 100%);
    border-bottom: 1px solid rgba(255, 153, 0, .35);
    color: #5b3d00;
    font-family: var(--font-mono);
    font-size: .82rem;
    letter-spacing: .02em;
}
.inbox-active-call.is-visible { display: flex; }
.inbox-active-call__label {
    display: inline-flex; align-items: center; gap: .45rem;
    font-weight: 700;
}
.inbox-active-call__label .pulse {
    width: 9px; height: 9px; border-radius: 50%;
    background: #d12727;
    box-shadow: 0 0 0 0 rgba(209, 39, 39, .6);
    animation: woPulseDot 1.4s infinite;
}
@keyframes woPulseDot {
    0%   { box-shadow: 0 0 0 0   rgba(209, 39, 39, .55); }
    70%  { box-shadow: 0 0 0 10px rgba(209, 39, 39, 0); }
    100% { box-shadow: 0 0 0 0   rgba(209, 39, 39, 0); }
}
.inbox-active-call__actions {
    display: inline-flex; align-items: center; gap: .45rem;
    flex-shrink: 0;
}
.inbox-active-call__join,
.inbox-active-call__end {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: .7rem; font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid rgba(138, 38, 27, .40);
    transition: transform .12s, background .14s, box-shadow .22s, border-color .14s, color .14s;
}
.inbox-active-call__join {
    background: #261b10;
    color: #fbf5e8;
    border-color: #261b10;
    text-decoration: none;
}
.inbox-active-call__join:hover {
    background: #3a2a18;
    color: #fbf5e8;
}
.inbox-active-call__end {
    background: linear-gradient(180deg, #fbf5e8 0%, #f4ead1 100%);
    color: #8a261b;
}
.inbox-active-call__end:hover {
    background: linear-gradient(180deg, #fbf5e8 0%, #efdfb6 100%);
    border-color: rgba(138, 38, 27, .70);
    color: #6e1a12;
    box-shadow: 0 0 0 3px rgba(255, 153, 0, .22);
}
.inbox-active-call__end:active {
    transform: scale(.97);
    background: linear-gradient(180deg, #9a2a1d 0%, #7a1f15 100%);
    color: #fbf5e8;
}
@media (prefers-reduced-motion: reduce) {
    .inbox-active-call__label .pulse { animation: none; }
}

/* ── MOBILE-Z6 (2026-05-30): keep message rows inside the viewport ───────────
 * The desktop bubbles use max-width:70% which is fine, but the inner widgets
 * (voice waveform card, file card, offer card) have min-widths set for
 * desktop that overflow on phones - voice cards push right off-screen.
 * Constrain everything to the row's width on ≤640. */

@media (max-width: 640px) {
    /* Tighter padding so bubbles have more room without changing desktop. */
    .inbox-thread__messages {
        padding: .9rem .75rem !important;
    }

    /* Rows: wider, but never beyond what fits. min-width:0 lets flex children
       shrink instead of forcing horizontal overflow. */
    .msg-row {
        max-width: 88% !important;
        min-width: 0;
    }

    /* Inner stack containing the bubble + its action row must shrink too. */
    .msg-stack {
        min-width: 0;
        max-width: 100%;
        flex: 1 1 auto;
    }

    /* Text bubble: wrap long words/URLs that would otherwise extend the box. */
    .msg-bubble {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: anywhere;
    }

    /* Voice message pill - was min-width:230px / max-width:360px which is
       wider than a phone column. Snap it to the row width. */
    .msg-voice { max-width: 100%; }
    .msg-voice .vmsg {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100%;
        box-sizing: border-box;
    }
    .vmsg__wave { min-width: 40px; }
    .vmsg__time { flex-shrink: 0; }

    /* File / offer / contract cards: same containment. */
    .msg-file, .msg-offer, .msg-contract, .msg-callcard, .msg-media {
        max-width: 100%;
        box-sizing: border-box;
    }
    .msg-file { white-space: normal; }

    /* Inline reaction / action chip row under a bubble must not push the
       bubble wider than its row. */
    .msg-row .msg-actions { max-width: 100%; }
}

/* ── MOBILE-Z7 (2026-05-30): inbox thread polish ─────────────────────────────
 * 1. Action pills (react / reply / star / pin / more) were permanently
 *    visible below every message on mobile because the existing 720px
 *    rule turned them into static flex items. Hide them by default and
 *    reveal only when the row carries `.is-actions-open` (tap-to-toggle).
 * 2. Voice card: right-padding so "0:04" timer doesn't touch the edge.
 * 3. Bubbles: claim the wasted left space (88% → 92% max-width).
 * 4. Thread header status: stays on one line, truncates.
 * 5. Header action icons: tighter packing so name + status fit. */

@media (max-width: 760px) {
    /* (1) Action pills hidden by default. */
    .msg-row .msg-actions {
        display: none !important;
    }
    .msg-row.is-actions-open .msg-actions {
        display: inline-flex !important;
        position: static;
        margin-top: 6px;
        background: var(--wo-card, #fff);
        border: 1px solid rgba(38, 27, 16, .1);
        border-radius: 999px;
        padding: 3px;
        box-shadow: 0 2px 8px rgba(38, 27, 16, .08);
        max-width: 100%;
        flex-wrap: wrap;
    }
    /* When mine: align the pill to the right with the bubble. */
    .msg-row--mine.is-actions-open .msg-actions {
        margin-left: auto;
    }

    /* (2) Voice card: extra right padding for the timer. */
    .msg-voice .vmsg {
        padding-right: 16px;
    }

    /* (3) Bubbles claim more width on phones (88% → 92%). */
    .msg-row { max-width: 92% !important; }

    /* (4) Thread header: status stays on one line. */
    .inbox-thread__header .thread-name,
    .inbox-thread__header .thread-sub {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .inbox-thread__header > div:first-child {
        min-width: 0;
        flex: 1 1 auto;
    }

    /* (5) Right-side action icons in the thread header - tighter spacing. */
    .inbox-thread__header > div:last-child {
        gap: 0 !important;
        flex-shrink: 0;
    }
    .inbox-thread__header .icon-btn {
        width: 34px; height: 34px;
    }
    .inbox-thread__header .icon-btn i { font-size: 1.05rem; }
}
@media (min-width: 761px) {
    /* Desktop: ignore the tap-toggle, keep original hover behaviour. */
    .msg-row.is-actions-open .msg-actions { /* no-op */ }
}

/* BRIDGE-FIX-17 (2026-06-08): Reputation Bridge import card layout.
 * Long source URLs (e.g. upwork.com/freelancers/...) with no break points
 * overflow the left flex child and push the trash button outside the card
 * on mobile. Fix by letting the info column shrink + force URL wrapping. */
.bridge-import-row {
    gap: .75rem;
    flex-wrap: nowrap;
}
.bridge-import-info {
    min-width: 0;              /* allow shrinking below content width */
    flex: 1 1 auto;
}
.bridge-import-url a,
.bridge-import-url {
    overflow-wrap: anywhere;   /* break long URLs mid-string if needed */
    word-break: break-word;
}
.bridge-import-actions {
    flex-shrink: 0;            /* trash button never gets pushed out */
    align-self: flex-start;
}

/* INBOX-MOBILE-HEADER (2026-06-08): on phones, 6 action icons (video/
 * schedule/offer/pin/search/details) crowd against the partner name and
 * visually overlap it. Tier the icons by importance so the name stays
 * readable. The hidden icons are still reachable from the details panel. */

/* < 600px: hide schedule, send offer, pin. Keep video, search, details. */
@media (max-width: 599.98px) {
    .inbox-thread__header #hdrSchedule,
    .inbox-thread__header #hdrSendOffer,
    .inbox-thread__header #hdrPin {
        display: none !important;
    }
    /* Give the name area real room to breathe and ellipsize cleanly. */
    .inbox-thread__header > div:first-child {
        min-width: 0 !important;
        flex: 1 1 0 !important;
        gap: .5rem !important;
    }
    .inbox-thread__header > div:last-child {
        flex-shrink: 0;
        margin-left: .25rem;
    }
    /* Avatar slightly smaller on mobile so name + sub get more width. */
    .inbox-thread__header .avatar-circle { width: 38px; height: 38px; }
}

/* < 420px: also hide search. Just video + details remain. */
@media (max-width: 419.98px) {
    .inbox-thread__header #hdrSearch {
        display: none !important;
    }
    .inbox-thread__header .thread-name { font-size: .95rem; }
    .inbox-thread__header .thread-sub  { font-size: .75rem; }
}

/* ── MOBILE-Z8 (2026-05-30): caption text + reaction picker fixes ───────────
 * 1. Mine caption bubbles ("Attached the SOW for review" etc) were rendering
 *    with an orange tint instead of the bubble's cream-paper. Force the
 *    cascade so caption inherits the standard mine-bubble color.
 * 2. The reaction picker (.msg-rx-picker) is JS-positioned via inline `left`
 *    and on phones that puts it off-screen for right-aligned bubbles.
 *    On ≤640 we override and anchor it centered horizontally, clamped
 *    to the viewport. */

/* (1) Caption bubble - explicit color, beats any later cascade. */
.msg-row--mine .msg-bubble--caption,
.msg-row--mine .msg-bubble--caption .msg-bubble__text,
.msg-row--mine .msg-bubble--caption a,
.msg-row--mine .msg-bubble--caption span {
    color: var(--wo-on-slab) !important;
}

/* (2) Reaction picker centered + viewport-clamped on phones. */
@media (max-width: 640px) {
    .msg-rx-picker {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        max-width: calc(100vw - 24px);
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── MOBILE-Z9 (2026-05-30): bubbles fit their content, never full-row ─────
 * .msg-stack is a flex column; default `align-items: stretch` forced the
 * bubble to fill the column. Short messages ("456", "lets test") came out
 * as huge empty cream cards. Make bubbles fit-content and align the stack
 * start/end so each bubble hugs its text and sits on the right (mine) /
 * left (them) side of its row. */

@media (max-width: 760px) {
    .msg-stack {
        align-items: flex-start;
    }
    .msg-row--mine .msg-stack {
        align-items: flex-end;
    }
    .msg-bubble,
    .msg-bubble--caption,
    .msg-voice .vmsg,
    .msg-file {
        max-width: 100%;
        width: -moz-fit-content;
        width: fit-content;
    }
    /* The text/file/voice container should not push past the parent row.
       fit-content + max-width:100% does the right thing for short and long
       messages alike. */

    /* Reaction strip + action pill belong with the bubble, not stretched. */
    .msg-stack .msg-rx,
    .msg-stack .msg-actions {
        align-self: flex-start;
    }
    .msg-row--mine .msg-stack .msg-rx,
    .msg-row--mine .msg-stack .msg-actions {
        align-self: flex-end;
    }

    /* Bubble timestamp meta row (the "12:02pm ✓✓") also aligns with bubble. */
    .msg-stack .msg-meta {
        align-self: flex-start;
    }
    .msg-row--mine .msg-stack .msg-meta {
        align-self: flex-end;
    }
}

/* ── REP-FEATURE (2026-05-30): Reputation Bridge section on the public
 *    home page. Editorial copy left, mock profile-card visual right.
 *    Pairs with the auth-side `.auth-rep` block - same vocabulary. */

.home-rep {
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 200, 80, .18), transparent 45%),
        radial-gradient(circle at 5% 90%,  rgba(255, 153, 0,  .12), transparent 55%),
        linear-gradient(180deg, #fffaf0 0%, #fbf2e0 100%);
    border-top: 1px solid rgba(255, 153, 0, .25);
    border-bottom: 1px solid rgba(255, 153, 0, .25);
}
.home-rep__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-mono);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color:var(--wo-accent-text);
    font-weight: 700;
    margin-bottom: 1.1rem;
}
.home-rep__pulse {
    width: 10px; height: 10px; border-radius: 50%;
    background: #ff9900;
    box-shadow: 0 0 0 0 rgba(255, 153, 0, .65);
    animation: homeRepPulse 1.8s ease-out infinite;
}
@keyframes homeRepPulse {
    0%   { box-shadow: 0 0 0 0   rgba(255, 153, 0, .65); }
    70%  { box-shadow: 0 0 0 14px rgba(255, 153, 0, 0); }
    100% { box-shadow: 0 0 0 0   rgba(255, 153, 0, 0); }
}
.home-rep__title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 4.5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.025em;
    color: var(--wo-ink);
    margin-bottom: 1rem;
}
.home-rep__title .serif {
    font-family: var(--font-serif, "Instrument Serif", serif);
    font-style: italic;
    font-weight: 500;
    color:var(--wo-accent-text);
    letter-spacing: -.01em;
}
.home-rep__sub {
    max-width: 540px;
    color: var(--wo-ink-2);
    margin-bottom: 1.5rem;
}
/* short intro is mobile-only; the full editorial paragraph shows on desktop */
.home-rep__sub--short { display: none; }
.home-rep__list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.8rem;
}
.home-rep__list li {
    padding: .55rem 0;
    border-bottom: 1px solid rgba(255, 153, 0, .15);
    color: var(--wo-ink);
    font-size: .98rem;
    display: flex; align-items: flex-start; gap: .55rem;
}
.home-rep__list li:last-child { border-bottom: 0; }
.home-rep__list li i {
    color: #1d8a4e;
    font-size: 1.15rem;
    margin-top: 2px;
    flex-shrink: 0;
}
.home-rep__list li strong { color: var(--wo-ink); font-weight: 700; margin-right: 3px; }
.home-rep__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    align-items: center;
}
/* REP-V12 (2026-05-30): "How it works" is now a real outlined button (was a
   subtle text link). Matching the primary CTA's height/weight so they sit
   as a proper pair, but in WO orange outline so the visual hierarchy stays
   primary > secondary. */
.home-rep__cta-secondary.btn {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .005em;
    border: 1.5px solid #b95400;
    color:var(--wo-accent-text);
    background: var(--wo-card);
    box-shadow: 0 2px 6px rgba(138, 38, 27, .08);
    transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .22s ease, transform .12s ease;
}
.home-rep__cta-secondary.btn:hover {
    background: #b95400;
    color: #fff;
    border-color:var(--wo-accent-text);
    box-shadow: 0 6px 16px rgba(185, 84, 0, .25),
                0 0 0 3px rgba(255, 153, 0, .18);
    transform: translateY(-1px);
}
.home-rep__cta-secondary.btn:active { transform: scale(.97); }

/* Right side: visual */
.home-rep__visual {
    position: relative;
    max-width: 480px;
    margin-left: auto;
}
.home-rep__sources {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin-bottom: .8rem;
}
.home-rep__source {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .85rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(38, 27, 16, .06);
    animation: homeRepDrift 6s ease-in-out infinite;
}
.home-rep__source:nth-child(2) {
    animation-delay: .8s;
    margin-left: 32px;
}
@keyframes homeRepDrift {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
.home-rep__source-glyph {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    flex-shrink: 0;
}
.home-rep__source--upwork .home-rep__source-glyph { background: #14a800; }
.home-rep__source--fiverr .home-rep__source-glyph { background: #1dbf73; }
.home-rep__source-meta { display: flex; flex-direction: column; line-height: 1.2; }
.home-rep__source-meta strong { font-weight: 700; color: var(--wo-ink); }
.home-rep__source-meta em {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--wo-text-muted);
}

/* Flow arrow */
.home-rep__flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin: .25rem 0 .55rem;
    color:var(--wo-accent-text);
}
.home-rep__flow-line {
    width: 1px;
    height: 18px;
    background: linear-gradient(180deg, rgba(255, 153, 0, .55), rgba(255, 153, 0, .15));
    margin-bottom: 4px;
}
.home-rep__flow-label {
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2px;
}
.home-rep__flow i { font-size: 1.1rem; }

/* Mock profile card */
.home-rep__card {
    position: relative;
    padding: 1.2rem 1.25rem 1.1rem;
    background: linear-gradient(180deg, #fff 0%, #fffaf0 100%);
    border: 1px solid rgba(255, 153, 0, .3);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(38, 27, 16, .12),
                0 1px 0 rgba(255, 255, 255, .9) inset;
}
.home-rep__card-stamp {
    position: absolute;
    top: -10px; right: 16px;
    font-family: var(--font-mono);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: #3a2400;
    background: linear-gradient(180deg, #ffd97a, #ffb340);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(196, 130, 0, .45);
    box-shadow: 0 4px 10px rgba(255, 153, 0, .4);
}
.home-rep__card-head {
    display: flex; align-items: center; gap: .85rem;
    margin-bottom: .9rem;
}
.home-rep__card-avatar {
    width: 50px; height: 50px;
    background: #261b10;
    color: #ff9900;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
}
.home-rep__card-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--wo-ink);
    display: inline-flex; align-items: center; gap: .4rem;
}
.home-rep__card-name i { color: #1d8a4e; font-size: .9rem; }
.home-rep__card-meta {
    font-family: var(--font-mono);
    font-size: .68rem;
    color: var(--wo-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 2px;
}
.home-rep__card-score {
    display: flex; align-items: baseline;
    gap: .55rem;
    padding: .65rem .75rem;
    background: rgba(255, 153, 0, .07);
    border-radius: 10px;
    margin-bottom: .8rem;
    flex-wrap: wrap;
}
.home-rep__card-stars { display: inline-flex; gap: .15rem; }
.home-rep__card-stars i { color: #ff9900; font-size: .9rem; }
.home-rep__card-score strong {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--wo-ink);
    font-variant-numeric: tabular-nums;
}
.home-rep__card-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: .7rem;
    color: var(--wo-text-muted);
}

/* REP-STARS-20260613: gold-star rating pill for the /reputation-migration hero,
   mirroring the homepage star treatment. Inline pill so it hugs its content. */
.rep-hero-rating {
    display: inline-flex; align-items: baseline; flex-wrap: wrap;
    gap: .55rem; padding: .55rem .8rem;
    background: rgba(255, 153, 0, .07); border-radius: 10px;
}
.rep-hero-rating .home-rep__card-stars i { font-size: 1rem; }
.rep-hero-rating strong {
    font-family: var(--font-display); font-weight: 800; font-size: 1.2rem;
    color: var(--wo-ink); font-variant-numeric: tabular-nums;
}
.rep-hero-rating__label {
    align-self: center;
    font-family: var(--font-mono); font-size: .72rem; color: var(--wo-text-muted);
}
.home-rep__card-quote {
    font-family: var(--font-serif, "Instrument Serif", serif);
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.4;
    color: var(--wo-ink);
    padding: .25rem 0 .55rem;
    border-bottom: 1px dashed rgba(255, 153, 0, .25);
}
.home-rep__card-source {
    display: flex; align-items: center; gap: .55rem;
    margin-top: .55rem;
    font-family: var(--font-mono);
    font-size: .7rem;
    color: var(--wo-text-muted);
}
/* PROFILE REVIEW CARDS (IMPORTED-REVIEWS-20260915)

   WAS -webkit-line-clamp, WHICH CANNOT BE ANIMATED. Clamping by line is the
   tidier way to cut text, but line-clamp is not an animatable property: the
   card snapped open, and in a two-column grid that snap shoved the neighbouring
   card down in one frame. max-height animates, so the card grows instead of
   jumping, and a gradient over the last line says there is more to read without
   needing the button to explain it.

   9.5em is about six lines at this size. The exact value matters less than it
   being a max-height rather than a line count - that is what makes it move. */
/* A WORKOFFICIALLY REVIEW LOOKS DIFFERENT, because it IS different: it is the
   only kind this platform stands behind. Everything else on the page is
   carried over from somewhere we cannot vouch for, and the badge in the footer
   says so - but a badge is read second and a border is read first.
   Bronze is the brand colour (#8A4D00). The glow is a soft outer ring rather
   than a thick border so the card does not change size when it gains one. */
/* CARD-UNIFORMITY-20260915: the source line sits on the floor of the card.
   Cards in a row are already equal height (h-100), but the footer used to
   follow the quote, so a two-line review put its tag halfway up while a ten
   line review put its tag at the bottom. Same row, same card size, footers at
   different heights. A flex column plus margin-top:auto on the footer fixes it
   without touching the quote or the clamp. */
/* EVERY COLLAPSED CARD THE SAME HEIGHT (owner, 15 Sep).
   h-100 only equalises cards that share a ROW, so a deck scrolled through five
   rows had five different card heights and looked ragged. A min-height sized to
   a fully-clamped card makes every collapsed card identical; a short review
   simply leaves space above the footer, which reads as deliberate because the
   footer is pinned to the floor.
   Where the number comes from, rather than taste:
       padding (p-3)            2.00rem
       score pill + its margin  3.30rem
       quote at the clamp       9.50em + .80rem padding
       footer + its margin      1.70rem
   which lands near 17.3rem; 18rem leaves room for the optional title line
   without making a titleless card look hollow. It is a variable so it can be
   nudged in one place.
   NOT applied while expanded: is-wide cards are the whole row and their height
   is whatever the text needs, which is the point of expanding. */
:root { --wo-rev-card-h: 18rem; }
.wo-rev-card {
    display: flex;
    flex-direction: column;
    min-height: var(--wo-rev-card-h);
}
.wo-rev-item.is-wide .wo-rev-card { min-height: 0; }
.wo-rev-card .home-rep__card-source { margin-top: auto; }
/* See more sits at the right-hand end of the source row. It used to hang under
   the quote, which left a different-sized gap beneath it on every card once the
   footer was pinned to the floor. */
.home-rep__card-source .wo-rev-more { margin-left: auto; white-space: nowrap; }

.wo-rev-native {
    border-color: rgba(138, 77, 0, .45) !important;
    box-shadow: 0 0 0 1px rgba(138, 77, 0, .25), 0 2px 14px rgba(255, 153, 0, .16);
}

/* The pager. Numbers, not just Previous and Next: with fifty pages of reviews,
   stepping one at a time to reach the oldest is not navigation. */
.wo-rev-pager .btn { min-width: 2.1rem; }
.wo-rev-pager .is-current {
    background: var(--wo-ink, #201a14);
    border-color: var(--wo-ink, #201a14);
    color: #fff;
}
.wo-rev-gap { opacity: .55; padding: 0 .15rem; user-select: none; }

/* WIDTH FIRST, HEIGHT ONLY IF NEEDED.
   Two cards sit side by side. Clicking See more makes the card take the whole
   row - it gets LONGER - and the text reflows into fewer, wider lines. Only
   then does the height animate, and usually it barely has to move, because the
   extra width already absorbed most of the text.
   Bootstrap 5 sizes a column with `width`, not flex-basis, so width is what is
   transitioned here. The card beside it wraps to the next row on its own. */
.wo-rev-item {
    transition: width .38s cubic-bezier(.4, 0, .2, 1);
}
@media (min-width: 992px) {
    .wo-rev-item.is-wide { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .wo-rev-item { transition: none; }
}

.wo-rev-quote {
    position: relative;
    overflow: hidden;
    transition: max-height .38s cubic-bezier(.4, 0, .2, 1);
}
.wo-rev-quote.is-clamped {
    max-height: 9.5em;
}
/* The fade only exists while clamped, and it is pointer-events:none so it can
   never eat a click meant for the text underneath it. */
.wo-rev-quote.is-clamped::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2.6em;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,0), var(--wo-surface, #fff) 92%);
}
.wo-rev-more {
    font-family: var(--font-mono);
    font-size: .7rem;
    text-decoration: none;
    padding: 0;
}
.wo-rev-more:hover { text-decoration: underline; }
/* Somebody who has asked their system not to animate things gets the same
   behaviour without the movement, rather than a feature they cannot use. */
@media (prefers-reduced-motion: reduce) {
    .wo-rev-quote { transition: none; }
}

.home-rep__card-source-tag {
    background: #14a800;
    color: #fff;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 700;
    font-size: .62rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* RECOMMENDATION-CARDS-20261014: Recommendations on the profile are the
   Verified Work History cards (same parts, same pager). A recommendation has
   no stars, so its score row carries the writer: an initial, the name (named
   only once they confirmed), and the date in the slot feedback uses for the
   amount. */
.wo-rec-who { align-items: center; flex-wrap: nowrap; }
.wo-rec-av {
    flex: 0 0 auto;
    width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--wo-ink, #261b10); color: #ff9900;
    font-family: var(--font-display); font-weight: 800; font-size: .85rem;
}
.home-rep__card-score .wo-rec-name {
    font-size: 1rem; font-weight: 700; line-height: 1.25;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wo-rec-who .home-rep__card-count { white-space: nowrap; }
.wo-rec-sub { font-size: .9rem; }
.wo-rec-ok { color: #1b7a3c; font-weight: 700; }
.wo-rec-card .home-rep__card-source-tag,
.wo-rec-card .home-rep__card-source > span { white-space: nowrap; }
/* The pieces never break inside; on a narrow card See more drops to its own
   line, still on the right, rather than running off the edge. */
.wo-rec-card .home-rep__card-source { flex-wrap: wrap; row-gap: .35rem; }

/* MOBILE-FIRST HERO (2026-06-22): the reputation hero was a desktop 2-column row
   that merely stacked on phones - the CTA fell below the fold, the paragraph was
   too long, and the proof points wrapped awkwardly. On phones we tighten the
   section, REORDER the copy so the CTA sits right under a short intro (above the
   fold), turn the proof points into compact cards, and full-width the buttons.
   Tablet/desktop (>=768px) are untouched. */
@media (max-width: 767.98px) {
    .home-rep { padding-top: 2rem; padding-bottom: 2.5rem; }
    .home-rep .row { --bs-gutter-y: 1.1rem; }

    /* reorder copy: badge -> headline -> short intro -> CTAs -> proof cards */
    .home-rep__copy { display: flex; flex-direction: column; }
    .home-rep__eyebrow { order: 1; margin-bottom: .6rem; }
    .home-rep__title   { order: 2; font-size: 2rem; line-height: 1.08; margin-bottom: .55rem; }
    .home-rep__sub     { order: 3; }
    .home-rep__ctas    { order: 4; margin-bottom: 1.35rem; }
    .home-rep__list    { order: 5; margin: 0; }

    /* swap long paragraph -> short mobile intro */
    .home-rep__sub--full  { display: none; }
    .home-rep__sub--short { display: block; font-size: 1rem; line-height: 1.5; max-width: none; margin-bottom: 1.15rem; }

    /* CTA above the fold: full-width, stacked, primary first */
    .home-rep__ctas { flex-direction: column; align-items: stretch; gap: .6rem; }
    .home-rep__ctas .btn { width: 100%; justify-content: center; font-size: 1.02rem; padding: .8rem 1rem; }

    /* proof points removed on phones - they crowded the hero and wrapped badly
       ("Hand-\verified"). The value props still live on desktop + the how-it-works
       page. Mobile goes straight from CTA to the live review card. */
    .home-rep__list { display: none; }

    /* review-card visual comes right after the CTAs, full width */
    .home-rep__visual { max-width: 100%; margin: .25rem auto 0; }
    .home-rep__source:nth-child(2) { margin-left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-rep__pulse,
    .home-rep__source { animation: none; }
}

/* REP-V11 (2026-05-30): smooth modern crossfade for the rotating card.
   Was: 180ms opacity-only fade - read as a synchronized "page-refresh" blink.
   Now: 420ms cubic-bezier ease + gentle slide + slight scale + tiny blur,
   plus a staggered start handled in JS so elements crossfade in sequence,
   not all-at-once. */
.home-rep__source,
.auth-rep__chip,
.home-rep__card-quote,
.home-rep__card-name span,
.home-rep__card-meta span,
.home-rep__card-avatar,
.auth-rep__name span,
.auth-rep__meta span,
.auth-rep__avatar {
    transition: opacity .42s cubic-bezier(.4, 0, .2, 1),
                transform .42s cubic-bezier(.4, 0, .2, 1),
                filter .42s cubic-bezier(.4, 0, .2, 1);
    will-change: opacity, transform;
}
.home-rep__source.is-fading,
.auth-rep__chip.is-fading,
.home-rep__card-quote.is-fading,
.home-rep__card-name span.is-fading,
.home-rep__card-meta span.is-fading,
.home-rep__card-avatar.is-fading,
.auth-rep__name span.is-fading,
.auth-rep__meta span.is-fading,
.auth-rep__avatar.is-fading {
    opacity: 0;
    transform: translateY(6px) scale(.97);
    filter: blur(1.5px);
}
/* Via-tag pill: longer easing so the color shift glides instead of flashing. */
.home-rep__card-source-tag {
    transition: background .55s cubic-bezier(.4, 0, .2, 1),
                color .55s cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
    .home-rep__source,
    .auth-rep__chip,
    .home-rep__card-quote,
    .home-rep__card-name span,
    .home-rep__card-meta span,
    .home-rep__card-avatar,
    .auth-rep__name span,
    .auth-rep__meta span,
    .auth-rep__avatar,
    .home-rep__card-source-tag {
        transition: none !important;
        filter: none !important;
    }
}

/* ── REP-PUBLIC (2026-05-30): public Reputation Bridge explainer page
 *    (/how/reputation-bridge). 3-step cards, FAQ list, CTA strip.
 *    Reuses the .home-rep palette so the page reads as a continuation. */

.rep-how { background: linear-gradient(180deg, #fff 0%, #fffaf0 100%); }
.rep-step {
    position: relative;
    height: 100%;
    padding: 1.5rem 1.4rem 1.3rem;
    background: var(--wo-card);
    border: 1px solid rgba(255, 153, 0, .22);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(38, 27, 16, .06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rep-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(38, 27, 16, .12);
    border-color: rgba(255, 153, 0, .55);
}
.rep-step__num {
    position: absolute;
    top: -14px; left: 1.4rem;
    background: linear-gradient(180deg, #ffd97a, #ffb340);
    color: #3a2400;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(196, 130, 0, .45);
    box-shadow: 0 4px 10px rgba(255, 153, 0, .35);
    letter-spacing: .04em;
}
.rep-step h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    margin: .25rem 0 .55rem;
    color: var(--wo-ink);
    letter-spacing: -.01em;
}
.rep-step p {
    color: var(--wo-ink-2);
    font-size: .94rem;
    line-height: 1.5;
    margin-bottom: 1.1rem;
}
.rep-step__visual {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(255, 153, 0, .25);
}
.rep-step__platforms {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}
.rep-step__plat {
    width: 30px; height: 30px;
    border-radius: 50%;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .82rem;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(38, 27, 16, .15);
}
.rep-step__visual--code {
    background: #261b10;
    border-radius: 8px;
    padding: .65rem .8rem;
    border-top: 0;
    font-family: var(--font-mono);
    font-size: .76rem;
    color: #fbf5e8;
}
.rep-step__code-line { padding: 2px 0; }
.rep-step__code-line--dim { color: rgba(255, 245, 230, .55); }
.rep-step__code-line--ok  { color: #4ade80; }
.rep-step__code-tag {
    background: #ff9900;
    color: #1a1209;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 800;
    font-size: .68rem;
    letter-spacing: .08em;
    margin-right: 6px;
}
.rep-step__mini-card {
    display: flex; align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .65rem .75rem;
    background: rgba(255, 153, 0, .07);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: .82rem;
}
.rep-step__mini-stars { color: #ff9900; letter-spacing: 1px; }
.rep-step__mini-card strong { color: var(--wo-ink); font-size: .92rem; }
.rep-step__mini-tag {
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 2px 6px;
    border-radius: 3px;
}

/* FAQ */
.rep-faq {
    border-bottom: 1px solid rgba(255, 153, 0, .22);
    padding: 1rem 0;
}
.rep-faq:last-of-type { border-bottom: 0; }
.rep-faq > summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--wo-ink);
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
}
.rep-faq > summary::-webkit-details-marker { display: none; }
.rep-faq > summary::after {
    content: "+";
    color:var(--wo-accent-text);
    font-family: var(--font-mono);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1;
    transition: transform .2s ease;
}
.rep-faq[open] > summary::after { transform: rotate(45deg); }
.rep-faq p {
    margin: .65rem 0 0;
    color: var(--wo-ink-2);
    line-height: 1.6;
}
.rep-faq p em { color: var(--wo-ink); font-style: italic; }

/* CTA section */
.rep-cta {
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 200, 80, .22), transparent 45%),
        radial-gradient(circle at 5% 90%,  rgba(255, 153, 0,  .14), transparent 55%),
        linear-gradient(180deg, #fffaf0 0%, #fbf2e0 100%);
}
.rep-cta h2 .serif {
    font-family: var(--font-serif, "Instrument Serif", serif);
    font-style: italic;
    font-weight: 500;
    color:var(--wo-accent-text);
}

@media (max-width: 640px) {
    .rep-step { padding: 1.3rem 1.2rem 1.1rem; }
    .rep-faq > summary { font-size: .98rem; }
}

/* ── REP-V4 (2026-05-30): auth panel - Reputation on top, WRK Token below ──
 * Side panel had: brand → eyebrow → headline → quotes carousel → stats grid
 *               → rep card.
 * Now has:      brand → rep card → WRK Token panel.
 * The .auth-rep--top variant removes the top border that was there to
 * separate it from the stats above it. */

.auth-rep--top {
    margin-top: 2.25rem;
    padding-top: 0 !important;
    border-top: 0 !important;
}

/* WRK Token panel on auth pages. Compact version of the home-page data
   panel so the visual language is consistent across surfaces. */
.auth-wrk {
    margin-top: 2.25rem;
    padding: 1.1rem 1.2rem 1rem;
    background: linear-gradient(180deg, #fffaf0 0%, #f7ecd0 100%);
    border: 1px solid rgba(255, 153, 0, .28);
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(38, 27, 16, .06),
                0 1px 0 rgba(255, 255, 255, .9) inset;
    position: relative;
    overflow: hidden;
}
.auth-wrk::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255, 200, 80, .18), transparent 55%);
    pointer-events: none;
}
.auth-wrk__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .85rem;
    padding-bottom: .65rem;
    border-bottom: 1px dashed rgba(255, 153, 0, .25);
    position: relative;
}
.auth-wrk__title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wo-ink);
    letter-spacing: -.01em;
}
.auth-wrk__id {
    font-family: var(--font-mono);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--wo-text-muted);
    margin-top: 2px;
}
.auth-wrk__live {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-mono);
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #1d8a4e;
}
.auth-wrk__live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #1d8a4e;
    box-shadow: 0 0 0 0 rgba(29, 138, 78, .55);
    animation: authWrkPulse 1.8s ease-out infinite;
}
@keyframes authWrkPulse {
    0%   { box-shadow: 0 0 0 0   rgba(29, 138, 78, .55); }
    70%  { box-shadow: 0 0 0 8px rgba(29, 138, 78, 0); }
    100% { box-shadow: 0 0 0 0   rgba(29, 138, 78, 0); }
}
.auth-wrk__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
    padding: .35rem 0;
    border-bottom: 1px solid rgba(255, 153, 0, .12);
    position: relative;
}
.auth-wrk__row--last { border-bottom: 0; }
.auth-wrk__label {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--wo-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.auth-wrk__value {
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 700;
    color: var(--wo-ink);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.auth-wrk__value .accent { color:var(--wo-accent-text); }

@media (prefers-reduced-motion: reduce) {
    .auth-wrk__live-dot { animation: none; }
}

/* REP-V7 block superseded by REP-V11 above (unified, smoother crossfade). */

/* ── LEGAL-V1 (2026-05-30): About + Careers + subprocessors table ─────────── */

/* Subprocessor table on /legal/privacy */
.legal-subproc-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.2rem 0; }
.legal-subproc {
    width: 100%; border-collapse: collapse;
    font-size: .92rem; background: var(--wo-card);
    border: 1px solid var(--wo-line); border-radius: 8px; overflow: hidden;
}
.legal-subproc thead th {
    background: var(--wo-paper-2);
    text-align: left;
    padding: .65rem .85rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--wo-ink-2);
    border-bottom: 1px solid var(--wo-line);
}
.legal-subproc tbody td {
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--wo-line);
    color: var(--wo-ink);
    vertical-align: top;
}
.legal-subproc tbody tr:last-child td { border-bottom: 0; }
.legal-subproc tbody tr:nth-child(odd) { background: rgba(255,153,0,.03); }

/* About page */
.about-hero { padding: 4rem 0 2.5rem; }
.about-numbers {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
    padding: 1.4rem 1.5rem;
    background: linear-gradient(180deg, #fffaf0 0%, #f7ecd0 100%);
    border: 1px solid rgba(255, 153, 0, .28);
    border-radius: 14px;
}
.about-numbers > div { text-align: left; }
.about-numbers strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--wo-ink);
}
.about-numbers span {
    font-family: var(--font-mono);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--wo-text-muted);
}

.about-mission .lead { color: var(--wo-ink-2); }
.about-mission strong { color: var(--wo-ink); }

.about-principle {
    height: 100%;
    padding: 1.4rem 1.3rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 12px;
    transition: border-color .15s ease, transform .15s ease;
}
.about-principle:hover { border-color: rgba(255, 153, 0, .55); transform: translateY(-2px); }
.about-principle__num {
    font-family: var(--font-mono); font-size: .68rem;
    color:var(--wo-accent-text); font-weight: 700;
    letter-spacing: .12em;
    border-bottom: 1px solid rgba(255, 153, 0, .25);
    padding-bottom: .45rem; margin-bottom: .8rem;
    display: block;
}
.about-principle h3 {
    font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
    margin-bottom: .4rem; color: var(--wo-ink);
}
.about-principle p {
    font-size: .92rem; color: var(--wo-ink-2); line-height: 1.5; margin: 0;
}

.about-founder { background: linear-gradient(180deg, #fffaf0 0%, #fbf2e0 100%); }
.about-founder__card {
    padding: 1.6rem 1.7rem;
    background: var(--wo-card);
    border: 1px solid rgba(255, 153, 0, .3);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(38, 27, 16, .12);
}
.about-founder__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.about-founder__avatar {
    width: 60px; height: 60px;
    background: #261b10; color: #ff9900;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: 1.2rem;
}
.about-founder__name {
    font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
    display: inline-flex; align-items: center; gap: .35rem; color: var(--wo-ink);
}
.about-founder__name i { color: #1d8a4e; font-size: .9rem; }
.about-founder__role {
    font-family: var(--font-mono); font-size: .68rem;
    text-transform: uppercase; letter-spacing: .14em; color: var(--wo-text-muted);
}
.about-founder__list { list-style: none; padding: 0; margin: 0; }
.about-founder__list li {
    padding: .5rem 0;
    border-bottom: 1px dashed rgba(255, 153, 0, .25);
    color: var(--wo-ink); font-size: .94rem; line-height: 1.5;
}
.about-founder__list li:last-child { border-bottom: 0; }
.about-founder__list li strong { color:var(--wo-accent-text); font-weight: 700; }
.about-founder__sign {
    margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--wo-line);
    color: var(--wo-ink); font-size: .98rem;
}

.about-stack {
    padding: 1rem 1.1rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 10px;
    display: flex; flex-direction: column; gap: 4px;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.about-stack:hover {
    border-color:var(--wo-accent-text);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(38, 27, 16, .08);
    color: inherit;
    text-decoration: none;
}
.about-stack:hover strong { color:var(--wo-accent-text); }
.about-stack strong {
    font-family: var(--font-mono); font-size: .88rem;
    color: var(--wo-ink); font-weight: 700;
    transition: color .15s ease;
}
.about-stack span { color: var(--wo-text-muted); font-size: .85rem; line-height: 1.4; }

/* Careers page */
.careers-hero { padding: 4rem 0 2.5rem; }
.careers-card {
    padding: 1.3rem 1.4rem;
    background: linear-gradient(180deg, #fff 0%, #fffaf0 100%);
    border: 1px solid rgba(255, 153, 0, .3);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(38, 27, 16, .08);
}
.careers-card__head {
    display: flex; align-items: center; gap: .55rem;
    padding-bottom: .65rem; margin-bottom: .65rem;
    border-bottom: 1px dashed rgba(255, 153, 0, .25);
}
.careers-card__head strong {
    font-family: var(--font-display); font-weight: 700; color: var(--wo-ink);
}
.careers-card__dot {
    width: 10px; height: 10px; border-radius: 50%; background: #1d8a4e;
    box-shadow: 0 0 0 0 rgba(29, 138, 78, .55);
    animation: careersDot 1.8s ease-out infinite;
}
@keyframes careersDot {
    0%   { box-shadow: 0 0 0 0   rgba(29, 138, 78, .55); }
    70%  { box-shadow: 0 0 0 12px rgba(29, 138, 78, 0); }
    100% { box-shadow: 0 0 0 0   rgba(29, 138, 78, 0); }
}
.careers-card__list { list-style: none; padding: 0; margin: 0; }
.careers-card__list li {
    padding: .4rem 0; display: flex; align-items: center; gap: .55rem;
    color: var(--wo-ink); font-size: .94rem;
}
.careers-card__list li i { color: #1d8a4e; }

.careers-tile {
    height: 100%; padding: 1.4rem 1.3rem;
    background: var(--wo-card); border: 1px solid var(--wo-line);
    border-radius: 12px;
    transition: transform .15s, border-color .15s;
}
.careers-tile:hover { transform: translateY(-2px); border-color: rgba(255, 153, 0, .55); }
.careers-tile__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: #261b10; color: #ff9900;
    border-radius: 8px;
    font-family: var(--font-display); font-weight: 800;
    font-size: .9rem;
    margin-bottom: .8rem;
}
.careers-tile h3 {
    font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
    margin-bottom: .4rem; color: var(--wo-ink);
}
.careers-tile p {
    font-size: .92rem; color: var(--wo-ink-2); line-height: 1.5; margin: 0;
}

.careers-benefit {
    height: 100%; padding: 1.3rem 1.3rem;
    background: var(--wo-card); border: 1px solid var(--wo-line);
    border-radius: 12px;
    text-align: left;
}
.careers-benefit i {
    font-size: 1.5rem; color:var(--wo-accent-text);
    margin-bottom: .65rem; display: block;
}
.careers-benefit h4 {
    font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
    margin-bottom: .35rem; color: var(--wo-ink);
}
.careers-benefit p {
    color: var(--wo-ink-2); font-size: .9rem; line-height: 1.5; margin: 0;
}

.careers-roles__list {
    display: flex; flex-direction: column; gap: .85rem;
}

/* CAREERS-V2 (2026-05-30): grouped role categories - Security + Full-stack. */
.role-cat {
    margin-bottom: 2.5rem;
}
.role-cat:last-of-type { margin-bottom: 0; }
.role-cat__head {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 1.1rem 0 .9rem;
    border-bottom: 1px solid var(--wo-line);
    margin-bottom: 1rem;
}
.role-cat__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border-radius: 10px;
    background: #261b10; color: #ff9900;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.role-cat__title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--wo-ink);
    margin: 0 0 .25rem;
}
.role-cat__sub {
    color: var(--wo-ink-2);
    font-size: .95rem;
    line-height: 1.5;
    margin: 0;
    max-width: 70ch;
}
.role-cat__list {
    display: flex; flex-direction: column; gap: .75rem;
}
@media (max-width: 640px) {
    .role-cat__head { flex-direction: column; gap: .6rem; }
    .role-cat__title { font-size: 1.35rem; }
}
.role-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem;
    padding: 1.2rem 1.4rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 12px;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.role-row:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 153, 0, .55);
    box-shadow: 0 8px 22px rgba(38, 27, 16, .08);
}
.role-title {
    font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
    margin: 0 0 .25rem; color: var(--wo-ink);
}
.role-blurb {
    color: var(--wo-ink-2); font-size: .92rem; margin: 0; line-height: 1.45;
    max-width: 60ch;
}
.role-meta {
    display: flex; align-items: center; gap: .55rem;
    flex-shrink: 0;
}
.role-tag {
    font-family: var(--font-mono);
    font-size: .66rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--wo-ink-2); padding: 4px 9px;
    background: var(--wo-paper-2); border: 1px solid var(--wo-line);
    border-radius: 999px; font-weight: 700;
}
.role-tag--loc { color: #1d8a4e; background: rgba(29, 138, 78, .08); border-color: rgba(29, 138, 78, .22); }

.careers-equal-opp {
    margin-top: 2.5rem; padding: 1rem 1.2rem;
    background: var(--wo-paper); border-left: 3px solid #b95400;
    border-radius: 4px;
    color: var(--wo-ink-2); font-size: .9rem; line-height: 1.55;
    font-style: italic;
}

@media (max-width: 800px) {
    .role-row { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .role-meta { flex-wrap: wrap; }
    .about-numbers { grid-template-columns: 1fr; gap: .5rem; }
    .about-numbers > div { display: flex; justify-content: space-between; align-items: baseline; }
    .about-numbers strong { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .careers-card__dot { animation: none; }
}

/* ── CAR.G (2026-05-30): Careers apply flow (gate, form, submitted) ──── */

/* Apply gate (anonymous visitor) */
.apply-gate-hero { padding: 4rem 0 2rem; }
.apply-gate { background: linear-gradient(180deg, #fffaf0 0%, #fbf2e0 100%); }
.apply-gate__card {
    height: 100%;
    padding: 1.6rem 1.5rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 14px;
    text-align: left;
    position: relative;
    transition: transform .15s ease, border-color .15s ease, box-shadow .22s ease;
}
.apply-gate__card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 153, 0, .55);
    box-shadow: 0 10px 28px rgba(38, 27, 16, .10);
}
.apply-gate__card--gold {
    background: linear-gradient(180deg, #fff 0%, #fffaf0 100%);
    border-color: rgba(255, 153, 0, .40);
}
.apply-gate__badge {
    position: absolute;
    top: -10px; right: 14px;
    font-family: var(--font-mono);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: #3a2400;
    background: linear-gradient(180deg, #ffd97a, #ffb340);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(196, 130, 0, .45);
    box-shadow: 0 4px 10px rgba(255, 153, 0, .35);
}
.apply-gate__icon {
    width: 48px; height: 48px;
    background: #261b10; color: #ff9900;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    margin-bottom: .85rem;
}
.apply-gate__card h3 {
    font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
    margin: 0 0 .35rem; color: var(--wo-ink);
}
.apply-gate__card p {
    color: var(--wo-ink-2); font-size: .94rem; line-height: 1.55;
    margin: 0 0 1.1rem;
}
.apply-gate__note {
    margin-top: 2rem; padding: 1rem 1.2rem;
    background: var(--wo-paper);
    border-left: 3px solid #b95400;
    border-radius: 4px;
    color: var(--wo-ink-2); font-size: .9rem; line-height: 1.55;
}
.apply-gate__note i { color:var(--wo-accent-text); margin-right: .35rem; }
.apply-gate__back { margin-top: 1.5rem; font-family: var(--font-mono); font-size: .82rem; }
.apply-gate__back a { color: var(--wo-ink-2); text-decoration: none; }
.apply-gate__back a:hover { color:var(--wo-accent-text); }

/* Apply form */
.apply-form-hero { padding: 3rem 0 1.5rem; }
.apply-form-section { padding-top: 1.5rem; }
.apply-form {
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 14px;
    padding: 1.8rem 2rem;
    box-shadow: 0 6px 18px rgba(38, 27, 16, .04);
}
.apply-form__group {
    border: 0;
    margin: 0 0 1.6rem;
    padding: 0 0 1.4rem;
    border-bottom: 1px solid var(--wo-line);
}
.apply-form__group:last-of-type { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.apply-form__group legend {
    font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
    color: var(--wo-ink); margin-bottom: .85rem; padding: 0;
    display: flex; align-items: center; gap: .55rem;
}
.apply-form__group label {
    display: block;
    font-family: var(--font-mono);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--wo-ink-2); font-weight: 700;
    margin-bottom: .3rem;
}
.apply-form__group label a { color: inherit; }
.apply-form__req {
    font-family: var(--font-mono); font-size: .58rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .14em;
    color:var(--wo-accent-text);
    padding: 2px 7px;
    background: rgba(255, 153, 0, .12);
    border-radius: 999px;
}
.apply-form__opt {
    font-family: var(--font-mono); font-size: .58rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--wo-text-muted);
    padding: 2px 7px;
    background: var(--wo-paper-2);
    border-radius: 999px;
}
.apply-form__hint {
    margin: .35rem 0 0; font-size: .82rem; color: var(--wo-text-muted);
}
.apply-form__err {
    margin-top: .35rem;
    padding: .45rem .7rem;
    background: rgba(185, 28, 28, .07);
    border-left: 3px solid #b91c1c;
    color: #8b1414;
    font-size: .84rem;
    border-radius: 3px;
}
.apply-form__drop {
    display: block;
    text-align: center;
    padding: 1.4rem 1.4rem;
    background: linear-gradient(180deg, #fffaf0 0%, #fbf2e0 100%);
    border: 2px dashed rgba(255, 153, 0, .45);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.apply-form__drop:hover { border-color:var(--wo-accent-text); background: linear-gradient(180deg, #fff7e2 0%, #f9e6b8 100%); }
/* FILE-FIELD-20260903: the raw input here is now visually hidden by .wo-file__input
   and replaced by our own button, so this rule would fight it. Kept as a no-op
   selector for any other file input that lands in this drop zone later. */
.apply-form__drop input[type="file"]:not(.wo-file__input) { display: block; width: 100%; margin-top: .75rem; font-size: .85rem; }
.apply-form__drop .wo-file { justify-content: center; margin-top: .75rem; }
.apply-form__drop-icon i { font-size: 2.1rem; color:var(--wo-accent-text); }
.apply-form__drop-text {
    display: block;
    color: var(--wo-ink);
    font-family: var(--font-display);
    margin-top: .35rem;
    line-height: 1.4;
}
.apply-form__drop-text em {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--wo-text-muted);
}
.apply-form__group--terms { background: var(--wo-paper); border-radius: 10px; padding: 1rem 1.2rem; border: 0; margin-top: 1.6rem; }
.apply-form__terms {
    display: flex; align-items: flex-start; gap: .65rem;
    font-family: inherit; font-size: .92rem; text-transform: none; letter-spacing: 0;
    color: var(--wo-ink); font-weight: 400;
    line-height: 1.55;
}
.apply-form__terms input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: #ff9900;
    margin-top: 2px;
    flex-shrink: 0;
}
.apply-form__actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    margin-top: 1.4rem; padding-top: 1.4rem;
    border-top: 1px solid var(--wo-line);
}

/* Sticky role recap */
.apply-recap {
    position: sticky; top: 90px;
    padding: 1.4rem 1.5rem;
    background: linear-gradient(180deg, #fffaf0 0%, #fbf2e0 100%);
    border: 1px solid rgba(255, 153, 0, .35);
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(38, 27, 16, .06);
}
.apply-recap__tag {
    display: inline-block;
    font-family: var(--font-mono); font-size: .65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em;
    color:var(--wo-accent-text);
    background: rgba(255, 153, 0, .12);
    padding: 3px 9px; border-radius: 999px;
    margin-bottom: .85rem;
}
.apply-recap h3 {
    font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
    color: var(--wo-ink); margin: 0 0 .25rem;
}
.apply-recap__loc {
    font-family: var(--font-mono); font-size: .72rem;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--wo-text-muted); margin: 0 0 .85rem;
}
.apply-recap__blurb {
    color: var(--wo-ink-2); font-size: .88rem; line-height: 1.55;
    margin: 0 0 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed rgba(255, 153, 0, .25);
}
.apply-recap__list { display: flex; flex-direction: column; gap: .55rem; }
.apply-recap__list > div { display: flex; justify-content: space-between; gap: .85rem; align-items: baseline; }
.apply-recap__list span {
    font-family: var(--font-mono); font-size: .65rem;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--wo-text-muted);
}
.apply-recap__list strong {
    font-family: var(--font-display); font-size: .88rem; font-weight: 700;
    color: var(--wo-ink); text-align: right;
}

/* Submitted page */
.apply-done-hero {
    padding: 5rem 0 3rem;
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 200, 80, .22), transparent 45%),
        radial-gradient(circle at 5% 90%,  rgba(255, 153, 0,  .14), transparent 55%),
        linear-gradient(180deg, #fffaf0 0%, #fbf2e0 100%);
    text-align: center;
}
.apply-done { max-width: 720px; margin: 0 auto; }
.apply-done__stamp {
    display: inline-flex; align-items: center; justify-content: center;
    width: 72px; height: 72px;
    background: linear-gradient(180deg, #1d8a4e 0%, #146a3b 100%);
    color: #fff;
    border-radius: 50%;
    font-size: 2.2rem;
    margin-bottom: 1.2rem;
    box-shadow: 0 6px 22px rgba(29, 138, 78, .35), 0 1px 0 rgba(255,255,255,.4) inset;
    animation: applyDoneStamp .55s cubic-bezier(.18,.89,.32,1.28) both;
}
@keyframes applyDoneStamp {
    0%   { transform: scale(.4); opacity: 0; }
    70%  { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); }
}
.apply-done__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin-bottom: 1rem;
}
.apply-done__title .serif {
    font-family: var(--font-serif, "Instrument Serif", serif);
    font-style: italic; font-weight: 500; color:var(--wo-accent-text);
}
.apply-done__sub {
    color: var(--wo-ink-2);
    font-size: 1.05rem; line-height: 1.55;
    max-width: 600px; margin: 0 auto 1.5rem;
}
.apply-done__meta {
    display: inline-flex; gap: 2rem;
    padding: 1rem 1.5rem;
    background: var(--wo-card);
    border: 1px solid rgba(255, 153, 0, .3);
    border-radius: 12px;
    margin-bottom: 1rem;
    flex-wrap: wrap; justify-content: center;
}
.apply-done__meta > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.apply-done__meta span {
    font-family: var(--font-mono); font-size: .62rem;
    text-transform: uppercase; letter-spacing: .14em; color: var(--wo-text-muted);
}
.apply-done__meta strong {
    font-family: var(--font-display); font-weight: 700; font-size: 1rem;
    color: var(--wo-ink); font-variant-numeric: tabular-nums;
}
.apply-done__withdraw .btn-link {
    color: #8b1414; font-size: .85rem;
    text-decoration: underline; text-underline-offset: 3px;
}
.apply-done__withdraw .btn-link:hover { color: #6b0f0f; }

/* While you wait */
.apply-while { background: var(--wo-paper); }
.apply-while__card {
    height: 100%;
    display: flex; flex-direction: column;
    padding: 1.3rem 1.3rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.apply-while__card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 153, 0, .55);
    box-shadow: 0 10px 24px rgba(38, 27, 16, .10);
    color: inherit;
}
.apply-while__card--gold {
    background: linear-gradient(180deg, #fffaf0 0%, #fbf2e0 100%);
    border-color: rgba(255, 153, 0, .35);
}
.apply-while__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    background: #261b10; color: #ff9900;
    border-radius: 8px;
    font-family: var(--font-display); font-weight: 800; font-size: .85rem;
    margin-bottom: .65rem;
}
.apply-while__card h4 {
    font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
    margin: 0 0 .35rem; color: var(--wo-ink);
}
.apply-while__card p {
    color: var(--wo-ink-2); font-size: .88rem; line-height: 1.5; margin: 0 0 .8rem;
    flex: 1;
}
.apply-while__cta {
    font-family: var(--font-mono); font-size: .7rem;
    text-transform: uppercase; letter-spacing: .1em;
    color:var(--wo-accent-text); font-weight: 700;
}

@media (max-width: 800px) {
    .apply-form { padding: 1.3rem 1.2rem; }
    .apply-recap { position: static; }
    .apply-done__meta { gap: 1.2rem; padding: .9rem 1.1rem; }
    .apply-form__actions { flex-direction: column-reverse; align-items: stretch; }
    .apply-form__actions .btn-primary { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .apply-done__stamp { animation: none; }
}

/* ── CAR.I (2026-05-30): /my-applications applicant tracking page ───────── */

.my-apps { padding-top: .5rem; }
.my-apps__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
    margin-bottom: 1.6rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--wo-line);
}
.my-apps__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: .25rem 0 .55rem;
}
.my-apps__sub { color: var(--wo-ink-2); max-width: 60ch; margin: 0; }

.my-apps__empty {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--wo-card);
    border: 1px dashed rgba(255, 153, 0, .35);
    border-radius: 14px;
}
.my-apps__empty-glyph {
    width: 60px; height: 60px;
    margin: 0 auto 1rem;
    background: var(--wo-paper);
    color:var(--wo-accent-text);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
}
.my-apps__empty h2 {
    font-family: var(--font-display); font-weight: 800; font-size: 1.4rem;
    color: var(--wo-ink); margin-bottom: .5rem;
}
.my-apps__empty p { color: var(--wo-ink-2); max-width: 480px; margin: 0 auto 1.3rem; }

.my-apps__list { display: flex; flex-direction: column; gap: .8rem; }
.my-apps__row {
    display: flex; align-items: center; gap: 1.5rem;
    justify-content: space-between;
    padding: 1.1rem 1.3rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.my-apps__row:hover {
    border-color: rgba(255, 153, 0, .55);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(38, 27, 16, .07);
}
.my-apps__row-body { min-width: 0; flex: 1; }
.my-apps__row-meta {
    display: flex; align-items: center; gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .35rem;
}
.my-apps__cat,
.my-apps__tag,
.my-apps__loc {
    font-family: var(--font-mono); font-size: .66rem;
    text-transform: uppercase; letter-spacing: .12em;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
}
.my-apps__cat { background: #261b10; color: #ff9900; }
.my-apps__tag { background: var(--wo-paper-2); color: var(--wo-ink-2); border: 1px solid var(--wo-line); }
.my-apps__loc { background: rgba(29, 138, 78, .08); color: #1d8a4e; border: 1px solid rgba(29, 138, 78, .22); }
.my-apps__role {
    font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
    color: var(--wo-ink); margin: 0 0 .25rem;
}
.my-apps__sub-meta {
    margin: 0;
    font-family: var(--font-mono); font-size: .72rem;
    color: var(--wo-text-muted);
}
.my-apps__sub-meta code {
    background: var(--wo-paper); padding: 1px 5px; border-radius: 3px;
    color: var(--wo-ink-2); font-size: .72rem;
}
.my-apps__row-side {
    display: flex; flex-direction: column; align-items: flex-end; gap: .55rem;
    flex-shrink: 0;
}
.my-apps__status {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    padding: 5px 10px;
    border-radius: 999px;
}
.my-apps__status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
}
.my-apps__status.is-new      { color:var(--wo-accent-text); background: rgba(255, 153, 0, .12); border: 1px solid rgba(255, 153, 0, .35); }
.my-apps__status.is-progress { color: #1d4ed8; background: rgba(29, 78, 216, .10); border: 1px solid rgba(29, 78, 216, .30); }
.my-apps__status.is-good     { color: #1d8a4e; background: rgba(29, 138, 78, .10); border: 1px solid rgba(29, 138, 78, .30); }
.my-apps__status.is-bad      { color: #8b1414; background: rgba(185, 28, 28, .08); border: 1px solid rgba(185, 28, 28, .30); }
.my-apps__status.is-muted    { color: var(--wo-text-muted); background: var(--wo-paper-2); border: 1px solid var(--wo-line); }
.my-apps__status.is-new .my-apps__status-dot      { animation: myAppsDot 1.8s ease-out infinite; }
.my-apps__status.is-progress .my-apps__status-dot { animation: myAppsDot 1.8s ease-out infinite; }
@keyframes myAppsDot {
    0%   { box-shadow: 0 0 0 0   currentColor; opacity: 1; }
    70%  { box-shadow: 0 0 0 8px transparent;  opacity: .65; }
    100% { box-shadow: 0 0 0 0   transparent;  opacity: 1; }
}
.my-apps__row-actions { display: flex; align-items: center; gap: .55rem; }
.my-apps__withdraw { color: #8b1414; text-decoration: underline; text-underline-offset: 3px; font-size: .82rem; padding: 0 .35rem; }
.my-apps__withdraw:hover { color: #6b0f0f; }

.my-apps__foot {
    margin-top: 2rem; padding: 1rem 1.2rem;
    background: var(--wo-paper);
    border-left: 3px solid #b95400;
    border-radius: 4px;
    color: var(--wo-ink-2); font-size: .9rem;
}
.my-apps__foot i { color:var(--wo-accent-text); margin-right: .35rem; }

/* Submitted page nav row */
.apply-done__nav {
    margin-top: 1.5rem;
    display: flex; align-items: center; gap: 1rem;
    flex-wrap: wrap; justify-content: center;
}

@media (max-width: 760px) {
    .my-apps__row { flex-direction: column; align-items: stretch; gap: .75rem; }
    .my-apps__row-side { flex-direction: row; justify-content: space-between; align-items: center; }
    .my-apps__head { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .my-apps__status .my-apps__status-dot { animation: none; }
}

/* ── CONFIRM-V1 (2026-05-31): GLOBAL WorkOfficially-themed dialog ───────── */

.wo-dialog {
    position: fixed; inset: 0;
    z-index: 10010;
}
.wo-dialog[hidden] { display: none !important; }
.wo-dialog__backdrop {
    position: absolute; inset: 0;
    background: rgba(38, 27, 16, .58);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .18s ease;
}
.wo-dialog__panel {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, calc(-50% - 12px)) scale(.97);
    width: min(440px, calc(100vw - 32px));
    background: linear-gradient(180deg, #fffaf0 0%, #f7ecd0 100%);
    border: 1px solid rgba(255, 153, 0, .35);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(38, 27, 16, .45),
                0 1px 0 rgba(255, 255, 255, .85) inset;
    opacity: 0;
    transition: opacity .22s cubic-bezier(.2,.7,.2,1),
                transform .22s cubic-bezier(.2,.7,.2,1);
    overflow: hidden;
}
.wo-dialog.is-open .wo-dialog__backdrop { opacity: 1; }
.wo-dialog.is-open .wo-dialog__panel    { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.wo-dialog__head {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 1.3rem 1.4rem .9rem;
}
.wo-dialog__icon {
    flex-shrink: 0;
    width: 46px; height: 46px;
    background: linear-gradient(180deg, #ffd97a, #ffb340);
    color: #3a2400;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 4px 12px rgba(255, 153, 0, .3),
                0 1px 0 rgba(255, 255, 255, .55) inset;
}
.wo-dialog--danger .wo-dialog__icon {
    background: linear-gradient(180deg, #9a2a1d 0%, #7a1f15 100%);
    color: #fbf5e8;
    box-shadow: 0 4px 12px rgba(138, 38, 27, .35),
                0 1px 0 rgba(255, 255, 255, .14) inset;
}
.wo-dialog__head-text { flex: 1; min-width: 0; }
.wo-dialog__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--wo-ink);
    letter-spacing: -.01em;
    margin: 2px 0 .35rem;
}
.wo-dialog__message {
    margin: 0;
    color: var(--wo-ink-2);
    font-size: .94rem;
    line-height: 1.55;
    white-space: pre-line;
}
.wo-dialog__field {
    padding: 0 1.4rem .35rem;
}
.wo-dialog__input {
    width: 100%;
    font-family: var(--font-display);
    font-size: 1rem;
    padding: .7rem .85rem;
    background: var(--wo-card);
    border: 1px solid rgba(255, 153, 0, .35);
    border-radius: 10px;
    color: var(--wo-ink);
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.wo-dialog__input:focus {
    border-color:var(--wo-accent-text);
    box-shadow: 0 0 0 3px rgba(255, 153, 0, .18);
}
.wo-dialog__foot {
    display: flex; justify-content: flex-end; gap: .6rem;
    padding: 1rem 1.4rem 1.2rem;
}
.wo-dialog__btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .55rem 1.1rem;
    border-radius: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .92rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .12s ease, background .14s ease, box-shadow .22s ease, border-color .14s ease, color .14s ease;
}
.wo-dialog__btn:active { transform: scale(.97); }
.wo-dialog__btn--ghost {
    background: transparent;
    color: var(--wo-ink-2);
    border-color: rgba(38, 27, 16, .15);
}
.wo-dialog__btn--ghost:hover {
    color: var(--wo-ink);
    border-color: var(--wo-ink-2);
    background: rgba(255, 255, 255, .35);
}
.wo-dialog__btn--primary {
    background: #261b10;
    color: #ffd58a;
    border-color: #261b10;
    box-shadow: 0 4px 12px rgba(38, 27, 16, .22);
}
.wo-dialog__btn--primary:hover {
    background: #3a2a18;
    color: #ffd58a;
    box-shadow: 0 8px 22px rgba(38, 27, 16, .35),
                0 0 0 3px rgba(255, 153, 0, .18);
}
.wo-dialog__btn--danger {
    background: linear-gradient(180deg, #fbf5e8 0%, #f4ead1 100%);
    color: #8a261b;
    border-color: rgba(138, 38, 27, .40);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 2px 6px rgba(138, 38, 27, .10);
}
.wo-dialog__btn--danger:hover {
    background: linear-gradient(180deg, #fbf5e8 0%, #efdfb6 100%);
    color: #6e1a12;
    border-color: rgba(138, 38, 27, .70);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 8px 22px rgba(138, 38, 27, .18),
                0 0 0 3px rgba(255, 153, 0, .22);
}
.wo-dialog__btn--danger:active {
    background: linear-gradient(180deg, #9a2a1d 0%, #7a1f15 100%);
    color: #fbf5e8;
}

/* Lock the page underneath while the dialog is open. */
body.wo-dialog-open { overflow: hidden; }

@media (max-width: 480px) {
    .wo-dialog__panel { width: calc(100vw - 16px); border-radius: 14px; }
    .wo-dialog__head { padding: 1.1rem 1.2rem .7rem; }
    .wo-dialog__foot { padding: .85rem 1.2rem 1rem; flex-wrap: wrap; }
    .wo-dialog__btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .wo-dialog__backdrop, .wo-dialog__panel { transition: none; }
}

/* ── CAREERS-V4 (2026-05-31): tier ladder on /profile/edit ────────────────── */

.prof-tier-ladder {
    margin-top: .85rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(180deg, var(--wo-card) 0%, var(--wo-shell) 100%);
    border: 1px solid rgba(255, 153, 0, .28);
    border-radius: 12px;
}
.prof-tier-ladder__head {
    display: flex; align-items: baseline; gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .85rem;
}
.prof-tier-ladder__head strong {
    font-family: var(--font-display);
    font-weight: 700; font-size: 1rem;
    color: var(--wo-ink);
}
.prof-tier-ladder__head em {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color:var(--wo-accent-text);
    padding: 3px 8px;
    background: rgba(255, 153, 0, .12);
    border-radius: 999px;
    font-weight: 700;
}

.prof-tier-ladder__row {
    display: grid;
    /* TIER-LADDER-FIT-20260902: was repeat(4, 1fr), which is four HARD columns.
       A `1fr` track is minmax(auto, 1fr) and its auto minimum is min-content, so
       the track cannot shrink below the widest unbreakable text in it - the grid
       simply overruns its container instead. Measured: it overflows at 340px and
       at 311px, and the real markup overflows further than a plain-text test
       because the rank line is letter-spaced uppercase.

       That showed up when the ladder was placed in the client editor's right
       rail, but it was never rail-specific: the SAME row on the freelancer
       profile has been overflowing on phones since it was written.

       auto-fit + minmax lets the browser choose the column count from the space
       it actually has, and the max() floors every track at a QUARTER of the row
       so it can never create a fifth column for a four-rung ladder. Plain
       minmax(150px, 1fr) did exactly that at 820px - four cards plus an empty
       gap, narrower than they are today. The 1.95rem is the three .65rem gaps.

       Measured against the real markup and the live .prof-tier rules, not a
       mock - the mock under-reported the overflow badly because the rank line
       is letter-spaced uppercase:
         280px -> 1 col   311px -> 2   340px -> 2   480px -> 3
         700px / 820px / 1100px -> 4
       zero overflow and no text spill at every one. */
    grid-template-columns: repeat(auto-fit, minmax(max(150px, (100% - 1.95rem) / 4), 1fr));
    gap: .65rem;
}
.prof-tier {
    display: flex; flex-direction: column; gap: .35rem;
    /* TIER-LADDER-FIT-20260902: without min-width:0 a grid item refuses to
       shrink below its own min-content, which would reintroduce the overflow
       the auto-fit above just removed. The wrapping rule is what makes that
       safe: long words break instead of spilling out of the card. */
    min-width: 0;
    overflow-wrap: break-word;
    padding: .75rem .85rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 10px;
    transition: transform .15s ease, border-color .15s ease;
}
.prof-tier:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 153, 0, .55);
}
/* TIER-LADDER-20260822: the profile ladder shows all four tiers so position is
   legible at a glance. The ones you do not hold are dimmed, the one you do is
   lifted. Dimming uses opacity plus grayscale rather than swapping colours,
   so the tee chips stay recognisably themselves - a grey Gold chip would read
   as a different tier rather than the same tier not yet earned.
   Hover restores full colour, so a dimmed tier is still inspectable (its
   description is on the title attribute) without being visually loud. */
.prof-tier.is-dimmed {
    opacity: .42;
    filter: grayscale(.75);
    transition: opacity .15s ease, filter .15s ease, transform .15s ease;
}
.prof-tier.is-dimmed:hover {
    opacity: 1;
    filter: none;
}
.prof-tier.is-current {
    border-color: var(--wo-primary);
    box-shadow: 0 0 0 2px rgba(255, 153, 0, .28), 0 4px 14px rgba(38, 27, 16, .10);
    background: linear-gradient(180deg, rgba(255, 153, 0, .06) 0%, var(--wo-card) 60%);
}
/* TIER-OUTLINE-20261012 (owner): each tier card on the ladder is outlined in
   its own colour (freelancer and client ladders share the keys), and the one
   you hold glows in that colour instead of the generic orange. Dimmed cards
   keep their grayscale, so the outline only reads fully on hover. */
.prof-tier[data-tier="start"] { --tier-line: #d4b47a; --tier-glow: rgba(212, 180, 122, .35); --tier-ink: #8a5a1c; }
.prof-tier[data-tier="gold"]  { --tier-line: #d99a1c; --tier-glow: rgba(224, 165, 35, .30); --tier-ink: #a86f00; }
.prof-tier[data-tier="prime"] { --tier-line: #1d4fa8; --tier-glow: rgba(29, 79, 168, .25); --tier-ink: #1d4fa8; }
.prof-tier[data-tier="elite"] { --tier-line: #7a1a2e; --tier-glow: rgba(122, 26, 46, .25); --tier-ink: #7a1a2e; }
.prof-tier[data-tier] { border: 1.5px solid var(--tier-line); }
.prof-tier[data-tier]:hover { border-color: var(--tier-line); }
.prof-tier[data-tier].is-current {
    border: 2px solid var(--tier-line);
    box-shadow: 0 0 0 3px var(--tier-glow), 0 4px 14px rgba(38, 27, 16, .10);
}
.prof-tier[data-tier].is-current .prof-tier__rank { color: var(--tier-ink); }
.prof-tier.is-current .prof-tier__rank {
    color: var(--wo-primary-deep);
    font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
    .prof-tier, .prof-tier.is-dimmed { transition: none; }
}
.prof-tier__chip {
    display: inline-block;
    width: 28px; height: 28px;
    border-radius: 8px;
    margin-bottom: .15rem;
    position: relative;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 2px 6px rgba(38, 27, 16, .12);
}
.prof-tier__chip::after {
    /* tiny "T" mark so the chip reads as a tee, not a swatch. */
    content: "T";
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .75rem;
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 1px 1px rgba(38, 27, 16, .25);
}
.prof-tier__chip--start { background: linear-gradient(160deg, #fbf5e8 0%, #e9dcb8 100%); }
.prof-tier__chip--start::after { color: #261b10; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.prof-tier__chip--gold  { background: linear-gradient(160deg, #ffd97a 0%, #ffb340 100%); }
.prof-tier__chip--gold::after { color: #3a2400; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); }
/* SAPPHIRE-PRIME-20261012: the Prime rung (Prime Pro and Prime Patron share it) is sapphire, was espresso. */
.prof-tier__chip--prime {
    background:
        radial-gradient(circle at 28% 24%, rgba(150, 200, 255, .4), transparent 60%),
        linear-gradient(155deg, #3170d8 0%, #1d4fa8 48%, #0f2f72 100%);
    border: 1px solid rgba(240, 200, 122, .75);
    box-shadow: 0 1px 0 rgba(150, 200, 255, .35) inset,
                0 2px 8px rgba(15, 47, 114, .35);
}
.prof-tier__chip--prime::after { color: #ffe6a8; }
/* CAREERS-V4 polish: Expert Elite = rich burgundy with a subtle gold sheen
   and a thin gold trim. Reads as "premium" without going full black-gold. */
.prof-tier__chip--elite {
    background:
        radial-gradient(circle at 28% 28%, rgba(255, 213, 138, .28), transparent 60%),
        linear-gradient(160deg, #7a1a2e 0%, #4a0e1c 100%);
    border: 1px solid rgba(255, 213, 138, .55);
    box-shadow: 0 1px 0 rgba(255, 213, 138, .35) inset,
                0 2px 8px rgba(74, 14, 28, .35);
}
.prof-tier__chip--elite::after { color: #ffd58a; }
.prof-tier strong {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .88rem;
    color: var(--wo-ink);
    line-height: 1.2;
    /* CAREERS-V5: keep the tier name on one line at all desktop widths.
       Names compress to 13-14 chars so this fits the narrower 4-col layout. */
    white-space: nowrap;
}
.prof-tier em {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: .68rem;
    color: var(--wo-text-muted);
    letter-spacing: .04em;
    line-height: 1.4;
    display: flex; flex-direction: column;
    gap: 1px;
}
.prof-tier em .prof-tier__rank {
    color: var(--wo-ink-2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.prof-tier em .prof-tier__tee {
    color: var(--wo-text-muted);
    font-weight: 500;
}
.prof-tier-ladder__zero {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--wo-ink);
    letter-spacing: -.005em;
    margin-right: .4rem;
}
.prof-tier-ladder__foot {
    margin: .85rem 0 0;
    font-size: .82rem;
    color: var(--wo-ink-2);
    line-height: 1.5;
}

@media (max-width: 760px) {
    .prof-tier-ladder__row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
    .prof-tier-ladder__row { grid-template-columns: 1fr; }
}

/* ── CAREERS-V5 (2026-05-31): locked / unlocked profile head-shot field ──── */

.prof-avatar > span .prof-field__lock {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color:var(--wo-accent-text);
    background: rgba(255, 153, 0, .12);
    padding: 3px 8px;
    border-radius: 999px;
    margin-left: .55rem;
    font-weight: 700;
}
.prof-avatar > span .prof-field__lock i { margin-right: 3px; }

.prof-avatar__row {
    display: flex; align-items: center;
    gap: .65rem;
    padding: .75rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 10px;
    flex-wrap: wrap;
}
.prof-avatar__upload {
    display: inline-flex; align-items: center; gap: .35rem;
    font-family: var(--font-display);
    font-weight: 700;
    border-width: 1.5px;
    flex-shrink: 0;
}
.prof-avatar__or {
    font-family: var(--font-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--wo-text-muted);
    font-weight: 700;
    padding: 0 .25rem;
}
.prof-avatar__url {
    flex: 1 1 240px;
    min-width: 0;
}

.prof-avatar__locked {
    display: flex; align-items: flex-start; gap: .85rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(180deg, var(--wo-card) 0%, var(--wo-shell) 100%);
    border: 1px solid rgba(255, 153, 0, .35);
    border-radius: 10px;
}
.prof-avatar__locked > i {
    color:var(--wo-accent-text);
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.prof-avatar__locked strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--wo-ink);
    margin-bottom: 2px;
}
.prof-avatar__locked div { color: var(--wo-ink-2); font-size: .92rem; line-height: 1.55; }
.prof-avatar__locked a {
    display: inline-block;
    margin-top: .35rem;
    color:var(--wo-accent-text);
    font-family: var(--font-mono);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
.prof-avatar__locked a:hover { color: #8a3e00; }

/* ────────────────────────────────────────────────────────────────────────────
   CAREERS-V6 (2026-05-31) - Skills tag-input
   Cream chip with WRK-orange accent on hover, X removes. The whole wrap
   looks like one input field; the real <input> is borderless inside it.
   ──────────────────────────────────────────────────────────────────────────── */
.skill-tagger {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    padding: 8px 10px;
    background: var(--wo-card);
    border: 1px solid rgba(58, 36, 18, .18);
    border-radius: 10px;
    cursor: text;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.skill-tagger:focus-within {
    border-color: var(--wo-orange, #d65a13);
    box-shadow: 0 0 0 3px rgba(214, 90, 19, .12);
}
.skill-tagger__list {
    display: contents;
    margin: 0;
    padding: 0;
    list-style: none;
}
.skill-tagger__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 4px 5px 12px;
    background: linear-gradient(180deg, #fdf3e0 0%, #f6e6c4 100%);
    color: #3a2412;
    border: 1px solid rgba(214, 90, 19, .28);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    transition: transform .14s ease, box-shadow .14s ease;
}
.skill-tagger__chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(58, 36, 18, .08);
}
.skill-tagger__x {
    appearance: none;
    border: 0;
    background: transparent;
    color: rgba(58, 36, 18, .55);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    transition: background-color .14s ease, color .14s ease;
}
.skill-tagger__x:hover {
    background: rgba(214, 90, 19, .15);
    color: var(--wo-orange, #d65a13);
}
.skill-tagger__x:focus-visible {
    outline: 2px solid var(--wo-orange, #d65a13);
    outline-offset: 1px;
}
.skill-tagger__entry {
    position: relative;
    flex: 1 1 160px;
    min-width: 140px;
    display: flex;
}
.skill-tagger__input {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 6px 4px;
    font-family: inherit;
    font-size: .95rem;
    color: var(--wo-ink-1, #3a2412);
}
.skill-tagger__input::placeholder {
    color: var(--wo-text-muted);
    font-style: italic;
}
.skill-tagger__input:disabled {
    color: var(--wo-text-muted);
    cursor: not-allowed;
}

/* ── CAREERS-V7 (2026-06-01) ── Autocomplete dropdown ────────
   Anchored to .skill-tagger__entry. Cream sheet with a thin
   gold rule under each item, WRK-orange highlight on hover/focus. */
.skill-tagger__suggest {
    position: absolute;
    z-index: 50;
    top: calc(100% + 6px);
    left: -8px;
    right: -8px;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--wo-card);
    border: 1px solid rgba(58, 36, 18, .18);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(58, 36, 18, .14), 0 2px 6px rgba(58, 36, 18, .08);
    max-height: 280px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.skill-tagger__suggest[hidden] { display: none; }
.skill-tagger__opt {
    padding: 8px 12px;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: .88rem;
    color: var(--wo-ink-1, #3a2412);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.skill-tagger__opt + .skill-tagger__opt {
    border-top: 1px solid rgba(214, 90, 19, .08);
    border-radius: 0;
}
.skill-tagger__opt:first-child,
.skill-tagger__opt.is-active {
    border-radius: 6px;
}
.skill-tagger__opt:hover,
.skill-tagger__opt.is-active {
    background: linear-gradient(180deg, #fdf3e0 0%, #f6e6c4 100%);
    color: #3a2412;
}
.skill-tagger__opt mark {
    background: transparent;
    color: var(--wo-orange, #d65a13);
    font-weight: 700;
    padding: 0;
}

@media (max-width: 540px) {
    .skill-tagger { min-height: 56px; padding: 10px; }
    .skill-tagger__chip { font-size: .78rem; }
    .skill-tagger__input { font-size: 16px; /* iOS no-zoom */ }
    .skill-tagger__entry { flex-basis: 100%; }
    .skill-tagger__suggest { left: -10px; right: -10px; max-height: 240px; }
    .skill-tagger__opt { padding: 10px 12px; font-size: .82rem; }
}

@media (max-width: 640px) {
    .prof-tier strong { font-size: .82rem; white-space: normal; }
}

/* === END MOBILE-PASS-2026-05-30 ============================================= */

/* ============================================================================
   DARK MODE (2026-06-24)
   Warm-brown dark, ported 1:1 from the Android app's WoColors.dark() palette
   (the brand stays warm in dark - never a cold/blue dark). Activated by
   <html data-theme="dark">, which the no-flash boot script in seo_head sets
   before first paint. Light mode is unchanged: --wo-slab / --wo-on-slab alias
   the originals, so flipping the vars below only affects dark.
   ========================================================================= */
html[data-theme="dark"] {
    --wo-paper:        #181009;   /* page background */
    --wo-paper-2:      #20170d;
    --wo-card:         #241a10;   /* cards / sheets */
    --wo-shell:        #1d140a;   /* sunken / grouped */
    --wo-ink:          #f4ecd6;   /* body text + brand-mark -> warm cream */
    --wo-ink-2:        #cdbfa2;   /* secondary text */
    --wo-text-muted:   #a08e72;   /* helper text */
    --wo-line:         #3a2d1e;   /* hairlines */
    --wo-line-soft:    #2c2114;
    --wo-cream-soft:   #3a2d1e;
    --wo-slab:         #2c2013;   /* dark slabs lift slightly so they read on the dark page */
    --wo-on-slab:      #fbf5e8;   /* cream text on slabs (unchanged) */
    --wo-espresso:     #120c06;   /* footers stay deepest */
    --wo-espresso-2:   #0d0904;
    --wo-good:         #5cb97c;   /* lifted greens/reds for dark contrast */
    --wo-bad:          #e08374;
    --wo-shadow-line:  0 0 0 1px var(--wo-line);
    --wo-shadow-sm:    0 1px 0 var(--wo-line);
    --wo-shadow-md:    0 2px 0 var(--wo-line), 0 12px 30px -18px rgba(0,0,0,.55);
    --wo-shadow-pop:   0 2px 0 var(--wo-line), 0 24px 50px -16px rgba(0,0,0,.75);
    color-scheme: dark;
}

/* Honour the OS preference until the visitor makes an explicit choice. */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not([data-theme="dark"]) {
        --wo-paper:#181009; --wo-paper-2:#20170d; --wo-card:#241a10; --wo-shell:#1d140a;
        --wo-ink:#f4ecd6; --wo-ink-2:#cdbfa2; --wo-text-muted:#a08e72;
        --wo-line:#3a2d1e; --wo-line-soft:#2c2114; --wo-cream-soft:#3a2d1e;
        --wo-slab:#2c2013; --wo-on-slab:#fbf5e8; --wo-espresso:#120c06; --wo-espresso-2:#0d0904;
        --wo-good:#5cb97c; --wo-bad:#e08374;
        --wo-shadow-md:0 2px 0 var(--wo-line), 0 12px 30px -18px rgba(0,0,0,.55);
        --wo-shadow-pop:0 2px 0 var(--wo-line), 0 24px 50px -16px rgba(0,0,0,.75);
        color-scheme: dark;
    }
}

/* The toggle control (lives in the header; cream sun in dark, espresso moon in light). */
.wo-theme-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; padding:0; margin:0; line-height:0;
    border:0; border-radius:8px;
    background:transparent; color:var(--wo-ink); cursor:pointer;
    transition:color .15s ease, background .15s ease;
}
.wo-theme-toggle:hover{ color:var(--wo-primary); background:rgba(140,120,90,.14); }
.wo-theme-toggle .bi{ font-size:1.02rem; }
.wo-theme-toggle .wo-tt-sun{ display:none; }
.wo-theme-toggle .wo-tt-moon{ display:inline-block; }
html[data-theme="dark"] .wo-theme-toggle .wo-tt-sun{ display:inline-block; }
html[data-theme="dark"] .wo-theme-toggle .wo-tt-moon{ display:none; }
@media (prefers-color-scheme: dark){
    html:not([data-theme="light"]):not([data-theme="dark"]) .wo-theme-toggle .wo-tt-sun{ display:inline-block; }
    html:not([data-theme="light"]):not([data-theme="dark"]) .wo-theme-toggle .wo-tt-moon{ display:none; }
}

/* ============================================================================
   DARK-MODE-FIX-20260624b
   Surfaces that hardcoded a light bar/panel, plus Bootstrap warm-dark theming
   (the boot script also flips data-bs-theme so Bootstrap components respond).
   ========================================================================= */
html[data-theme="dark"]{
    /* Bootstrap component variables -> warm dark (override Bootstrap's cold default) */
    --bs-body-bg:#181009; --bs-body-color:#f4ecd6;
    --bs-secondary-bg:#241a10; --bs-tertiary-bg:#20170d;
    --bs-secondary-color:#cdbfa2; --bs-tertiary-color:#a08e72;
    --bs-secondary-bg-subtle:#20170d; --bs-tertiary-bg-subtle:#1d140a;
    --bs-border-color:#3a2d1e; --bs-border-color-translucent:rgba(255,245,232,.12);
    --bs-emphasis-color:#fbf5e8; --bs-heading-color:#fbf5e8;
    --bs-light:#241a10; --bs-light-rgb:36,26,16;
}
/* The universal pinned bar hardcodes a translucent cream; flip it warm-dark. */
html[data-theme="dark"] .app-bar{ background:rgba(28,20,12,.92) !important; border-bottom-color:var(--wo-line); }
html[data-theme="dark"] .wrk-header,
html[data-theme="dark"] .wo-header{ background:var(--wo-paper) !important; }
/* Marketing surfaces that hardcoded white/cream. */
html[data-theme="dark"] .mkt-drawer{ background:var(--wo-card); }
html[data-theme="dark"] .mkt-drawer__head{ background:var(--wo-shell); }
html[data-theme="dark"] .mkt-signin{ background:var(--wo-card); color:var(--wo-ink); border-color:var(--wo-line); }
/* Common Bootstrap surfaces -> warm card so nothing stays bright. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item{ background-color:var(--wo-card); color:var(--wo-ink); }
/* Outline buttons are meant to be transparent; in dark they were picking up a card fill. */
html[data-theme="dark"] .btn-outline-primary,
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .wo-mkt .btn-outline-secondary{ background:transparent; }
html[data-theme="dark"] .mkt-signin--mobile,
html[data-theme="dark"] .mkt-signin--full{ background:var(--wo-card); color:var(--wo-ink); border-color:var(--wo-line); }
/* Bootstrap solid buttons that Bootstrap auto-inverts in dark (e.g. reputation
   "Start"/pair btn-dark would wash out). Force our warm, readable treatment. */
html[data-theme="dark"] .btn-dark{ background:var(--wo-slab); border-color:var(--wo-slab); color:var(--wo-on-slab); }
html[data-theme="dark"] .btn-light{ background:var(--wo-card); border-color:var(--wo-line); color:var(--wo-ink); }
html[data-theme="dark"] .btn-warning.text-dark{ color:#261b10 !important; }
/* DARK-MODE-TEXT-CONTRAST-20260624: brown accent text was too dark to read on the
   dark page; brighten --wo-primary-deep + the marketing accent-text to warm amber
   in dark only. Light mode keeps the original browns. */
:root{ --wo-accent-text:#b95400; }
html[data-theme="dark"]{ --wo-primary-deep:#e8a24a; --wo-accent-text:#e8a24a; }
/* DARK-MODE-CLIENT-FIX-20260624: the client-profile CSS references vars that were
   never defined (--wo-ink-1, --wo-orange, --wo-accent, --wo-muted), so they always
   fell back to a hardcoded DARK value -> invisible text on the dark page. Define them
   for real: light values match the old fallbacks (light unchanged); dark values flip. */
:root{
    --wo-ink-1:#3a2412;   /* client-profile primary text (name, stats, titles) */
    --wo-orange:#d65a13;
    --wo-accent:#d97706;
    --wo-muted:#6b7280;
}
html[data-theme="dark"]{
    --wo-ink-1:#f4ecd6;   /* -> warm cream so it reads on the dark page */
    --wo-orange:#f0a24a;
    --wo-accent:#f0a24a;
    --wo-muted:#a08e72;
}
/* The "Make contact" trust card hardcodes a cream base behind its gradient; dark it in dark mode. */
html[data-theme="dark"] .client-card--trust{ background:var(--wo-card); border-color:var(--wo-line); }
html[data-theme="dark"] .client-side--cta{ background:var(--wo-card); }
/* REGISTER-SCROLL-20260624: the signup form (now 4 role cards) can exceed the
   viewport; the desktop split-screen clipped it (overflow:hidden + 100vh). Let the
   right panel scroll internally. Mobile (<=900px) already scrolls via earlier rules. */
@media (min-width: 901px){
    .auth-main{ max-height:100vh; overflow-y:auto; }
}
/* HOMEPAGE-DARK-20260624: the homepage demo/feature cards hardcode light gradients
   (or use vars that don't flip) with a mix of var + hardcoded text, so in dark mode
   they went either bright-white or unreadable (cream text on a light card). Force
   them to the warm dark surface with readable text. Explicit hex + !important so it
   wins regardless of how the gradient resolves. Accent icons/badges/stars keep their colour. */
html[data-theme="dark"] .home-rep__card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .feature-card--new,
html[data-theme="dark"] .rep-how{
    background:#241a10 !important;
    border-color:#3a2d1e !important;
}
html[data-theme="dark"] .feature-card p,
html[data-theme="dark"] .feature-card h2,
html[data-theme="dark"] .feature-card h3,
html[data-theme="dark"] .feature-card li,
html[data-theme="dark"] .feature-card span:not(.feat-badge-new):not(.feat-num),
html[data-theme="dark"] .rep-how p,
html[data-theme="dark"] .rep-how h2,
html[data-theme="dark"] .rep-how h3{
    color:#e4d6bc !important;
}
/* HOMEPAGE-DARK-SECTIONS-20260624: .home-rep + .rep-cta are full-width LIGHT cream
   bands; in dark their text flips to cream -> invisible. Dark the bands (keep the warm
   orange glow) so the cream text reads. */
html[data-theme="dark"] .home-rep,
html[data-theme="dark"] .rep-cta{
    background:
        radial-gradient(circle at 90% 10%, rgba(255,200,80,.10), transparent 45%),
        radial-gradient(circle at 5% 90%, rgba(255,153,0,.07), transparent 55%),
        linear-gradient(180deg, #1d140a 0%, #161009 100%) !important;
    border-top-color: rgba(255,153,0,.18) !important;
    border-bottom-color: rgba(255,153,0,.18) !important;
}
/* FOOTER-DARK-20260624: the footer is always espresso-dark; its light-on-dark text used
   theme vars that flipped dark. Re-pin those vars to light values inside the footer only. */
html[data-theme="dark"] .wo-footer{
    --wo-ink:#fbf5e8; --wo-ink-2:#e4d6bc; --wo-text-muted:#b09a7c;
    --wo-paper:#fbf5e8; --wo-paper-2:#e4d6bc; --wo-cream-soft:#e4d6bc;
    --wo-line:rgba(253,247,232,.14); --wo-line-soft:rgba(253,247,232,.08);
}
/* INVESTOR "coming soon" note on signup - shown only when the Investor option is picked (CSS :has). */
.auth-investor-note{ display:none; margin:.4rem 0 .2rem; font-size:.85rem; line-height:1.45; color:var(--wo-text-muted); }
.auth-investor-note__tag{ display:inline-block; margin-left:.35rem; padding:.08rem .5rem; border-radius:999px; background:var(--wo-primary-soft); color:var(--wo-primary-deep); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.auth-roles:has(input[value="investor"]:checked) + .auth-investor-note{ display:block; }
/* VETTING/ENTERPRISE-DARK-20260624: outline buttons (Hire vetted talent / Apply) kept a
   light fill in dark; force transparent so they read as outline buttons. */
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-primary,
html[data-theme="dark"] .wo-mkt .btn-outline-secondary{ background:transparent !important; }
/* PUBLIC-PAGES-DARK-20260624: remaining light-gradient sections/cards on /about,
   /careers and the apply flow stayed bright (cream text -> invisible) in dark.
   Dark them so the (cream) text reads. */
html[data-theme="dark"] .about-numbers,
html[data-theme="dark"] .about-founder,
html[data-theme="dark"] .careers-card,
html[data-theme="dark"] .apply-gate,
html[data-theme="dark"] .apply-gate__card--gold,
html[data-theme="dark"] .apply-recap,
html[data-theme="dark"] .apply-done-hero,
html[data-theme="dark"] .apply-while__card--gold,
html[data-theme="dark"] .apply-form__drop,
html[data-theme="dark"] .sidebar-card--ring{ background:#241a10 !important; border-color:#3a2d1e !important; }

/* PAYMENT-METHODS-20260903: the standalone card manager at
   /account/payment-methods. Card rows plus the Stripe Elements mount.
   Tokens only - this has to sit correctly in both themes, and a saved card is
   exactly the kind of thing that looks broken if it borrows the wrong ground. */
.pm-list { display: flex; flex-direction: column; gap: .6rem; }

.pm-card {
    display: flex; align-items: center; gap: .9rem;
    padding: .85rem 1rem;
    border: 1px solid var(--wo-line, #e7e0cf);
    border-radius: 12px;
    background: var(--wo-surface, #fff);
}
.pm-card__icon { font-size: 1.5rem; color: var(--wo-text-muted, #78716c); flex: 0 0 auto; }
.pm-card__body { flex: 1 1 auto; min-width: 0; }
.pm-card__line { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pm-card__dots { font-variant-numeric: tabular-nums; color: var(--wo-text-muted, #78716c); }
.pm-card__meta {
    font-size: .8rem; color: var(--wo-text-muted, #78716c);
    margin-top: .15rem; display: flex; gap: .75rem; flex-wrap: wrap;
}
.pm-card__ws { display: inline-flex; align-items: center; gap: .25rem; }
.pm-card__actions { display: flex; align-items: center; gap: .75rem; flex: 0 0 auto; }

.pm-card__badge {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
    padding: .12rem .4rem; border-radius: 5px;
    background: var(--wo-primary, #8a4d00); color: #fff;
}
/* An expired card still renders - hiding it would leave someone wondering
   where their card went. It is marked, and dimmed, but present. */
.pm-card__badge--warn { background: #b45309; }
.pm-card--expired { opacity: .72; }

/* Stripe injects its own iframe here; this is just the visible field. */
.pm-el {
    padding: .7rem .8rem;
    border: 1px solid var(--wo-line, #e7e0cf);
    border-radius: 10px;
    background: var(--wo-surface, #fff);
}
.pm-status { min-height: 1.2em; color: var(--wo-text-muted, #78716c); }

/* ─────────────────────────────────────────────────────────────
   SEC-PANEL-20260903: conversation security panel.

   Uses the brand tokens rather than hard-coded colours so it
   follows dark mode with everything else - a panel that stays
   cream on a dark thread reads as a third-party injection, which
   is the opposite of what a trust surface should look like.
   ───────────────────────────────────────────────────────────── */
.wo-secpanel {
    border-bottom: 1px solid var(--wo-line);
    background: var(--wo-paper-2);
    padding: 14px 18px 16px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--wo-ink-2);
    max-height: 60vh;
    overflow-y: auto;
}
.wo-secpanel__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; color: var(--wo-ink); font-size: 14px;
}
.wo-secpanel__head i { color: var(--wo-primary-deep); margin-right: 6px; }
.wo-secpanel__x {
    background: none; border: 0; font-size: 22px; line-height: 1;
    color: var(--wo-text-muted); cursor: pointer; padding: 0 4px;
}
.wo-secpanel__x:hover { color: var(--wo-ink); }
.wo-secpanel__list { list-style: none; margin: 0; padding: 0; }
.wo-secpanel__list li { display: flex; gap: 10px; margin-bottom: 11px; }
.wo-secpanel__list i {
    color: var(--wo-primary-deep); font-size: 15px; flex: 0 0 18px; margin-top: 2px;
}
.wo-secpanel__list b { color: var(--wo-ink); font-weight: 600; }
.wo-secpanel__verify {
    display: inline-block; margin-top: 6px;
    background: var(--wo-ink); color: var(--wo-paper);
    border: 0; border-radius: 6px; padding: 5px 11px;
    font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.wo-secpanel__verify:disabled { opacity: .6; cursor: default; }
.wo-secpanel__result { display: block; margin-top: 7px; font-size: 12.5px; }
.wo-secpanel__result.is-ok     { color: #1d6b3f; }
.wo-secpanel__result.is-bad    { color: #a32020; font-weight: 600; }
.wo-secpanel__result.is-unknown{ color: var(--wo-text-muted); }
.wo-secpanel__hash {
    display: block; margin-top: 4px; font-size: 11px;
    color: var(--wo-text-muted); word-break: break-all;
}
/* The limits block is deliberately NOT styled as a warning. It is not a
   danger notice, it is the honest other half of the claims above, and
   dressing it in red would make people skip it as boilerplate. */
.wo-secpanel__limits {
    margin-top: 12px; padding-top: 11px;
    border-top: 1px dashed var(--wo-line);
    font-size: 12.5px; color: var(--wo-text-muted);
}
.wo-secpanel__limits b { color: var(--wo-ink-2); }


/* TALENT-TIER-BADGE-20261012: the level badge on /talent cards and the key
   above the results. .tier-medal--sm is the card size of the profile badge. */
.tier-medal--sm { padding: 2px 9px 2px 2px; font-size: .62rem; gap: .3rem; }
.tier-medal--sm .tier-medal__stamp { width: 18px; height: 18px; font-size: 9px; }
.tier-medal--sm .tier-medal__stamp i { font-size: 9px; }
.talent-tier-key {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    padding: 10px 14px; margin: 0 0 16px;
    background: var(--wo-card, #fff); border: 1px solid var(--wo-line, #ecdfc4); border-radius: 12px;
}
.talent-tier-key__label { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #8a6d4c; font-weight: 700; }
.talent-tier-key__item { display: inline-flex; align-items: center; gap: 6px; }
.talent-tier-key__rank { font-size: .78rem; color: #6b4c2b; }
.talent-tier-key__more { margin-left: auto; font-size: .8rem; }
@media (max-width: 575.98px) { .talent-tier-key__more { margin-left: 0; } }

/* TALENT-BADGE-ROW-20261012: one fixed row for the badges under the name, so
   every card puts them in the same place whatever the name's length. */
.talent-card__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 4px; min-height: 22px; }
.talent-card__badges .pill-vet { padding: .16rem .5rem; }

/* PORTFOLIO-DETAIL-20261012: portfolio pieces with several photos. */
.portfolio-card__visual { position:relative; }
.pf-photos-badge { position:absolute; right:8px; bottom:8px; background:rgba(17,24,39,.78); color:#fff; font-size:.75rem; font-weight:600; padding:.18rem .5rem; border-radius:999px; line-height:1.3; pointer-events:none; }
.portfolio-card__visual .pf-photos-badge i { font-size:.8rem; color:#fff; opacity:1; margin-right:2px; }
.pf-gallery__main { position:relative; border-radius:12px; overflow:hidden; background:#f3f4f6; }
.pf-gallery__main img { display:block; width:100%; max-height:70vh; object-fit:contain; background:#f3f4f6; cursor:zoom-in; }
.pf-gallery__nav { position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:0; background:rgba(255,255,255,.92); box-shadow:0 2px 8px rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:#111; }
.pf-gallery__nav--prev { left:10px; } .pf-gallery__nav--next { right:10px; }
.pf-gallery__count { position:absolute; right:10px; bottom:10px; background:rgba(17,24,39,.78); color:#fff; font-size:.78rem; padding:.15rem .55rem; border-radius:999px; }
.pf-gallery__thumbs { display:flex; gap:8px; overflow-x:auto; padding:8px 0 4px; scroll-snap-type:x proximity; }
.pf-gallery__thumb { flex:0 0 84px; height:64px; border-radius:8px; overflow:hidden; border:2px solid transparent; opacity:.75; scroll-snap-align:start; }
.pf-gallery__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.pf-gallery__thumb.is-active, .pf-gallery__thumb:hover, .pf-gallery__thumb:focus-visible { border-color:var(--wo-accent, #d97706); opacity:1; }
.pf-lightbox { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; }
.pf-lightbox[hidden] { display:none; }
.pf-lightbox img { max-width:92vw; max-height:86vh; object-fit:contain; }
.pf-lightbox__close { position:absolute; top:14px; right:14px; width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:1.2rem; }
.pf-lightbox__nav { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:1.3rem; }
.pf-lightbox__nav--prev { left:14px; } .pf-lightbox__nav--next { right:14px; }
.pf-lightbox__count { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); color:#fff; font-size:.85rem; opacity:.85; }
@media (max-width: 575.98px) {
  .pf-gallery__nav { width:34px; height:34px; }
  .pf-gallery__thumb { flex-basis:68px; height:52px; }
  .pf-lightbox__nav { width:40px; height:40px; }
}

/* LEVEL-SHARE-20261012: the share kit page (/freelancer/{handle}/share). */
.lvl-card-img { display:block; width:100%; height:auto; border-radius:14px; box-shadow:0 10px 30px rgba(15,23,42,.18); }
.lvl-eyebrow { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--wo-accent-text, #b95400); }
.lvl-net { color:#fff; border:0; }
.lvl-net:hover, .lvl-net:focus { color:#fff; filter:brightness(1.08); }
.lvl-net--linkedin { background:#0a66c2; } .lvl-net--facebook { background:#1877f2; } .lvl-net--x { background:#111; } .lvl-net--whatsapp { background:#1fa855; }
.lvl-dl { border:1px solid var(--wo-line, rgba(0,0,0,.12)); border-radius:12px; overflow:hidden; height:100%; background:var(--wo-paper, #fff); }
.lvl-dl__thumb { background:#f3f4f6; display:flex; align-items:center; justify-content:center; height:170px; padding:10px; }
.lvl-dl__thumb img { max-width:100%; max-height:100%; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.lvl-dl__body { padding:10px 12px 12px; }
.lvl-cap textarea { font-size:.82rem; resize:vertical; background:var(--wo-paper, #fff); }
.tier-share-link { font-size:.78rem; font-weight:600; text-decoration:none; color:var(--wo-accent-text, #b95400); white-space:nowrap; align-self:center; }
.tier-share-link:hover { text-decoration:underline; }

/* OFFICIALLY-FAMILY-20261013: the sister products under the footer tagline.
   Each name is the WorkOfficially wordmark's own type, declaration for
   declaration (partials/_wo_wordmark.php + the html.os-win overrides above):
   the first word in the wordmark sans at 800 / -0.04em, "Officially" in the
   wordmark's italic serif at 700 / -0.01em nudged down half a pixel, and the
   footer logo's two tones: the first word cream (#fdf7e8), "Officially"
   orange (#ff9900), as .wo-footer-brand in partials/footer.php. */
.wo-footer-family { margin-top: 1.25rem; max-width: 360px; }
.wo-footer-family__label { color: var(--wo-cream-soft, #f4ecd6); font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .18em; margin-bottom: .6rem; }
/* FOOTER-FAMILY-FIX-20261013 (owner: "a line on the right side" on mobile, Mail
   Officially not looking good, a gap between the two words, colour not good).
   THE LINE: the old outlined pills inherited `.wo-footer a:hover`, which forces
   the TOP and BOTTOM border colours faint with !important. A phone keeps :hover
   on whatever was last tapped, so the tapped pill (Mail, the first one) kept a
   bright orange LEFT/RIGHT border and faint top/bottom - a stray vertical line.
   Now: soft filled tiles with no border at all (border: 0 !important beats the
   base rule), the edge drawn by an inset box-shadow that no footer rule touches,
   and the hover lift only on devices that really hover. Each tile carries a
   one-line description under the name, two per row. */
.wo-footer .wo-footer-family ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; max-width: none; }
.wo-footer .wo-footer-family li { margin: 0; }
.wo-footer .wo-footer-family a {
    display: flex; flex-direction: column; gap: .3rem;
    padding: .7rem .8rem .65rem; border: 0 !important; border-radius: 12px;
    background: rgba(253,247,232,.05);
    box-shadow: inset 0 0 0 1px rgba(253,247,232,.07);
    color: #fdf7e8; line-height: 1;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, box-shadow .15s, transform .15s;
}
.wo-footer .wo-footer-family a:active { background: rgba(255,153,0,.12); }
.wo-footer .wo-footer-family a:focus-visible { outline: 2px solid #ff9900; outline-offset: 2px; }
@media (hover: hover) {
    .wo-footer .wo-footer-family a:hover { background: rgba(255,153,0,.10); box-shadow: inset 0 0 0 1px rgba(255,153,0,.38); transform: translateY(-1px); color: #fdf7e8; }
    .wo-footer .wo-footer-family a:hover .wo-footer-family__desc { color: rgba(253,247,232,.78); }
}
.wo-footer-family__wm {
    display: block; white-space: nowrap;
    font-family: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800; font-size: 16px; letter-spacing: -0.04em; line-height: 1;
    color: #fdf7e8;
}
/* Owner: a little space between the word and "Officially", both sitting on
   the same line. A small fixed gap, and no vertical nudge: both words share
   one baseline. */
.wo-footer-family__off {
    font-family: 'Playfair Display', 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    font-style: italic; font-weight: 700; letter-spacing: -0.01em;
    color: #ff9900; margin-left: .14em; vertical-align: baseline;
}
.wo-footer-family__desc {
    display: block; font-family: inherit; font-size: .72rem; font-weight: 500;
    letter-spacing: 0; line-height: 1.2; color: rgba(253,247,232,.55);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.os-win .wo-footer-family__wm { font-family: 'Helvetica Neue Web', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
html.os-win .wo-footer-family__off { font-family: 'Iowan Old Style BT', 'Iowan Old Style', Georgia, serif; font-style: italic; }

/* PORTFOLIO-ZIP-20261013: the project gallery ("light table"), its full-screen
   viewer, the photo manager (member and admin) and the admin ZIP import list.
   Colours are the brand tokens only, so dark mode needs nothing extra: the
   slab, ink and paper variables already flip in the dark-theme blocks above.

   PORTFOLIO-ZIP-20261013c (owner: "the brown background looks bad"): no
   slab behind the work; then "it shows cut ... give border for each"). Every
   image is shown WHOLE, never cropped, inside an equal block: a light card
   with a hairline border (16:10 main view, 4:3 grid tiles and thumbnails).
   The border turns orange on hover and on the image being shown. The
   full-screen viewer is neutral near-black, for looking at work. */
.pfg { --pfg-gap: .75rem; }
.pfg__bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; flex-wrap: wrap; }
.pfg__count { font-variant-numeric: tabular-nums; color: var(--wo-text-muted, #7a6a52); font-size: .9rem; }
.pfg__views { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--wo-paper-2, #f4ecd6); box-shadow: inset 0 0 0 1px var(--wo-line, #d6cdb7); }
.pfg__views[hidden] { display: none; }
.pfg__view { border: 0; background: transparent; color: var(--wo-ink-2, #4a3b29); font-size: .85rem; font-weight: 600; padding: .35rem .85rem; border-radius: 999px; line-height: 1.2; }
.pfg__view[aria-pressed="true"] { background: var(--wo-slab, #261b10); color: var(--wo-on-slab, #fbf5e8); }
.pfg__view:focus-visible { outline: 2px solid var(--wo-primary, #ff9900); outline-offset: 2px; }

.pfg__stage { margin: 0; }
.pfg__stage[hidden] { display: none; }
/* PORTFOLIO-ZIP-20261013b (owner: "the display is not standardised ... the
   images need to have same blocks"). One frame size everywhere: the stage is
   always 16:10, whatever the image, and the image is fitted inside it whole.
   A portrait post and a wide banner now sit in the same block, so moving
   between images never makes the page jump. */
.pfg__table { position: relative; background: var(--wo-card, #fffdf6); box-shadow: inset 0 0 0 1px var(--wo-line, #d6cdb7); border-radius: 16px; aspect-ratio: 16 / 10; max-height: 74vh; width: 100%; display: flex; align-items: center; justify-content: center; padding: clamp(.75rem, 2.2vw, 1.5rem); overflow: hidden; }
.pfg__open { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: zoom-in; border-radius: 6px; }
.pfg__open:focus-visible { outline: 2px solid var(--wo-primary, #ff9900); outline-offset: 4px; }
.pfg__table img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 30px -18px rgba(38,27,16,.45); }
.pfg__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--wo-card, #fffdf6); color: var(--wo-ink, #261b10); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: 0 0 0 1px var(--wo-line, #d6cdb7), 0 6px 16px -8px rgba(38,27,16,.35); z-index: 1; }
.pfg__nav:hover { background: var(--wo-paper-2, #f4ecd6); }
.pfg__nav[hidden] { display: none; }
.pfg__nav--prev { left: .6rem; } .pfg__nav--next { right: .6rem; }
.pfg__nav:focus-visible { outline: 2px solid var(--wo-primary, #ff9900); outline-offset: 2px; }
/* The description always has room for two lines, so the filmstrip below it
   stays put as you move between images with and without one. */
.pfg__caption { margin: .7rem .15rem 0; max-width: 68ch; font-size: 1rem; line-height: 1.55; color: var(--wo-ink-2, #4a3b29); min-height: 3.1em; }
.pfg__caption[data-empty] { min-height: 3.1em; }

/* Filmstrip: identical 4:3 blocks. */
.pfg__strip { list-style: none; margin: .5rem 0 0; padding: 2px 2px 6px; display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x proximity; }
.pfg__strip[hidden] { display: none; }
.pfg__strip li { flex: 0 0 auto; scroll-snap-align: start; }
.pfg__thumb { display: flex; align-items: center; justify-content: center; width: 96px; aspect-ratio: 4 / 3; padding: 4px; border-radius: 8px; overflow: hidden; background: var(--wo-card, #fffdf6); border: 1px solid var(--wo-line, #d6cdb7); opacity: .7; }
.pfg__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; border-radius: 3px; }
.pfg__thumb.is-active { opacity: 1; border-color: var(--wo-primary, #ff9900); box-shadow: 0 0 0 1px var(--wo-primary, #ff9900); }
.pfg__thumb:hover, .pfg__thumb:focus-visible { opacity: 1; outline: none; border-color: var(--wo-primary, #ff9900); }

/* Every image at once: a regular grid of identical blocks, each image fitted
   whole inside its 4:3 frame, each description in a box of the same height
   (two lines, the rest in the full-screen view), so every row lines up. */
.pfg__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--pfg-gap); }
.pfg__grid[hidden] { display: none; }
.pfg__tile { margin: 0; display: flex; flex-direction: column; }
.pfg__tile a { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: .75rem; border-radius: 12px; overflow: hidden; background: var(--wo-card, #fffdf6); border: 1px solid var(--wo-line, #d6cdb7); cursor: zoom-in; transition: border-color .2s ease, box-shadow .2s ease; }
.pfg__tile a:hover { border-color: var(--wo-primary, #ff9900); box-shadow: 0 10px 24px -16px rgba(38,27,16,.35); }
.pfg__tile a:focus-visible { outline: 2px solid var(--wo-primary, #ff9900); outline-offset: 2px; }
.pfg__tile img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; border-radius: 4px; box-shadow: 0 4px 14px -10px rgba(38,27,16,.45); }
.pfg__tile-cap { font-size: .86rem; line-height: 1.45; color: var(--wo-ink-2, #4a3b29); margin: .45rem .1rem 0; height: 2.9em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pfg__tile-cap--empty { visibility: hidden; }

/* Full screen. */
.pfg-lb { position: fixed; inset: 0; z-index: 2000; background: #0e0e0f; color: #fff; display: flex; align-items: center; justify-content: center; padding: 3.5rem 4.25rem 1.5rem; }
.pfg-lb[hidden] { display: none; }
.pfg-lb__top { position: absolute; top: .75rem; left: 1rem; right: .75rem; display: flex; align-items: center; justify-content: space-between; }
.pfg-lb__count { font-variant-numeric: tabular-nums; font-size: .9rem; opacity: .8; }
.pfg-lb__fig { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; }
.pfg-lb__fig img { max-width: 100%; max-height: calc(100vh - 9.5rem); object-fit: contain; border-radius: 4px; }
.pfg-lb__cap { margin-top: .85rem; max-width: 70ch; text-align: center; font-size: 1rem; line-height: 1.5; color: rgba(255,255,255,.86); }
.pfg-lb__cap[hidden] { display: none; }
.pfg-lb__btn { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.pfg-lb__btn:hover { background: rgba(255,255,255,.22); }
.pfg-lb__btn:focus-visible { outline: 2px solid #ff9900; outline-offset: 2px; }
.pfg-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.pfg-lb__nav--prev { left: .75rem; } .pfg-lb__nav--next { right: .75rem; }

@media (max-width: 575.98px) {
  .pfg__table { border-radius: 12px; aspect-ratio: 4 / 3; }
  .pfg__nav { width: 36px; height: 36px; }
  .pfg__thumb { width: 76px; }
  .pfg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pfg-lb { padding: 3.25rem .5rem 1rem; }
  .pfg-lb__nav { top: auto; bottom: .75rem; transform: none; }
  .pfg-lb__fig img { max-height: calc(100vh - 12rem); }
}

/* The photo manager: one card per photo with its description. */
.pp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; }
.pp-card { display: flex; flex-direction: column; gap: .35rem; padding: .5rem; border-radius: 12px; background: var(--wo-card, #fffdf6); box-shadow: inset 0 0 0 1px var(--wo-line, #d6cdb7); }
.pp-card.is-cover { box-shadow: inset 0 0 0 2px var(--wo-primary, #ff9900); }
.pp-card.is-removed { opacity: .45; }
.pp-card.is-removed .pp-card__img img { filter: grayscale(1); }
.pp-card__img { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--wo-paper-2, #f4ecd6); display: flex; align-items: center; justify-content: center; }
.pp-card__img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.pp-card__pos { position: absolute; left: 6px; top: 6px; font-size: .72rem; font-weight: 700; line-height: 1; padding: .25rem .45rem; border-radius: 999px; background: var(--wo-paper, #fbf5e8); color: var(--wo-ink, #261b10); font-variant-numeric: tabular-nums; }
.pp-card.is-cover .pp-card__pos { background: var(--wo-primary, #ff9900); color: #261b10; }
.pp-card__label { font-size: .75rem; color: var(--wo-text-muted, #7a6a52); margin: 0; }
.pp-card__cap { font-size: .82rem; line-height: 1.4; resize: vertical; min-height: 4.6em; }
.pp-card__tools { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.pp-tool { border: 0; background: var(--wo-paper-2, #f4ecd6); color: var(--wo-ink-2, #4a3b29); border-radius: 7px; min-width: 32px; height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: .25rem; font-size: .78rem; padding: 0 .45rem; margin: 0; cursor: pointer; }
.pp-tool:focus-visible, .pp-tool:focus-within { outline: 2px solid var(--wo-primary, #ff9900); outline-offset: 1px; }
.pp-tool input { margin: 0; }
.pp-tool--danger { color: var(--wo-bad, #b42318); }
.pp-empty { color: var(--wo-text-muted, #7a6a52); }
.pf-photos { border-top: 1px solid var(--wo-line, #d6cdb7); padding-top: .9rem; }
.pp-add { margin-top: .25rem; }

/* Admin: the member's project list and the ZIP preview. */
.admin-pf-row form, .admin-pf-row .btn { flex-shrink: 0; }
.admin-pf-thumb { width: 96px; flex: 0 0 96px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #f3f4f6; }
.admin-pf-thumb img, .admin-pf-thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-pz-item { display: flex; gap: 1rem; align-items: flex-start; }
.admin-pz-item__cover { flex: 0 0 160px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #f3f4f6; display: flex; align-items: center; justify-content: center; }
.admin-pz-item__cover img { width: 100%; height: 100%; object-fit: cover; }
.admin-pz-item__body { flex: 1 1 auto; min-width: 0; }
@media (max-width: 575.98px) { .admin-pz-item { flex-direction: column; } .admin-pz-item__cover { flex-basis: auto; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .pfg__strip { scroll-behavior: auto; } .pfg__tile a { transition: none; } }

/* PORTFOLIO-EMAIL-20261013: "tell the member" on a finished import and on the
   member's admin portfolio page. The email itself is shown as it will arrive,
   inside a plain mail-window frame, so what the admin sees is what is sent. */
.pz-mail__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: #fff1e6; color: #d65a13; font-size: 1.25rem; }
.pz-mail__send { padding: .7rem 1.2rem; font-weight: 600; border-radius: 10px; }
.pz-mail__sent { padding: .65rem .8rem; border-radius: 10px; border: 1px solid; font-size: .9rem; }
.pz-mail__sent.is-ok { background: #edf7ef; border-color: #b9dcc1; color: #1f5130; }
.pz-mail__sent.is-warn { background: #fff7e6; border-color: #f0d49a; color: #6b4a0e; }
.pz-mail__frame { border: 1px solid #e3dccd; border-radius: 14px; overflow: hidden; background: #fbf5e8; box-shadow: 0 1px 2px rgba(58, 36, 18, .05), 0 8px 24px rgba(58, 36, 18, .06); }
.pz-mail__head { display: flex; gap: .9rem; align-items: flex-start; padding: .7rem .9rem; background: #fff; border-bottom: 1px solid #ece5d6; font-size: .8rem; color: #3a2412; }
.pz-mail__dots { display: inline-flex; gap: 5px; padding-top: .35rem; flex: 0 0 auto; }
.pz-mail__dots i { width: 9px; height: 9px; border-radius: 50%; background: #e6dcc8; display: block; }
.pz-mail__head dl { flex: 1 1 auto; min-width: 0; }
.pz-mail__head dl > div { display: flex; gap: .5rem; line-height: 1.5; }
.pz-mail__head dt { flex: 0 0 3.6rem; font-weight: 400; color: #8a6d4c; }
.pz-mail__head dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-mail__body { display: block; width: 100%; height: 720px; border: 0; background: #fbf5e8; }
@media (min-width: 992px) { .pz-mail .pz-mail__side { position: sticky; top: 5rem; } }

/* PORTFOLIO-ORDER-20261013: drag to reorder, for the photo grid and the
   member's project cards. The handles take the touch gesture (touch-action:
   none) so dragging from them never scrolls the page; everywhere else on the
   card a finger still scrolls. The placeholder keeps the gap the card left. */
.pp-grip, .pf-order__grip { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.pp-card__img { cursor: grab; }
body.is-sorting, body.is-sorting * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.is-sort-dragging { position: fixed !important; z-index: 2000; margin: 0 !important; opacity: .96; transform: rotate(1.2deg) scale(1.02); box-shadow: 0 18px 40px rgba(38, 27, 16, .22); border-radius: 12px; list-style: none; }
.is-sort-dragging, .is-sort-dragging * { pointer-events: none !important; }   /* incl. the grip inside it, or the pointer finds the card it is carrying */
.is-sort-placeholder { visibility: visible; }
.is-sort-placeholder > * { visibility: hidden; }
.pp-card.is-sort-placeholder { background: transparent; box-shadow: inset 0 0 0 2px var(--wo-primary, #ff9900); border-radius: 12px; opacity: .55; }
.pf-col.is-sort-placeholder { position: relative; }
.pf-col.is-sort-placeholder::after { content: ""; position: absolute; inset: 0 calc(var(--bs-gutter-x, 1rem) * .5); border: 2px dashed var(--wo-primary, #ff9900); border-radius: 12px; background: rgba(255, 153, 0, .05); }
.pf-col .card { position: relative; }
.pf-order { position: absolute; top: .5rem; left: .5rem; right: .5rem; z-index: 2; display: flex; align-items: center; gap: .35rem; pointer-events: none; }
.pf-order > * { pointer-events: auto; }
.pf-order__grip, .pf-order__pos, .pf-order__btn { display: inline-flex; align-items: center; justify-content: center; height: 30px; min-width: 30px; border-radius: 8px; background: rgba(255, 253, 246, .94); color: #3a2412; border: 1px solid rgba(58, 36, 18, .14); box-shadow: 0 1px 2px rgba(38, 27, 16, .08); font-size: .85rem; }
.pf-order__pos { font-weight: 700; padding: 0 .5rem; font-variant-numeric: tabular-nums; }
.pf-order__form { margin: 0 0 0 auto; display: inline-flex; gap: .3rem; }
.pf-order__btn { padding: 0; cursor: pointer; }
.pf-order__btn:hover:not(:disabled) { border-color: var(--wo-primary, #ff9900); }
.pf-order__btn:disabled { opacity: .4; cursor: default; }
.pf-order__btn:focus-visible { outline: 2px solid var(--wo-primary, #ff9900); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .is-sort-dragging { transform: none; } }

/* BRIDGE-SUMMARY-20261013: the figures on a verified import, /reputation/bridge.
   Equal tiles that wrap, the label above the number, an optional source line. */
.bridge-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.bridge-figure { border: 1px solid var(--wo-line, #d6cdb7); border-radius: 10px; padding: .55rem .7rem; background: var(--wo-card, #fffdf6); min-width: 0; }
.bridge-figure__label { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wo-text-muted, #6b5a45); }
.bridge-figure__value { font-weight: 700; font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
.bridge-figure__hint { font-size: .72rem; color: var(--wo-text-muted, #6b5a45); margin-top: .1rem; }

/* ==========================================================================
   MOBILE-NO-SIDEWAYS-20261014 (owner, 14 Oct 2026: "on the phone, if I hold
   and move it a little left, there's a bar on the right side. The page should
   only move up and down, never left and right.")

   Measured on the live site at phone width: 27 of 35 public pages were 12 to
   17 px wider than the screen, so a sideways drag uncovered a strip of
   background on the right. Three causes, each fixed where it starts:

   1. Bootstrap's .row.g-5 has a 3rem gutter, so the row reaches 24px past
      each side of its column while .container-xxl only pads 12px. The extra
      12px stuck out on the right of every section built that way (home,
      about, legal, FAQ blocks...). Below 992px the columns stack, so a 1.5rem
      gutter lands every word in exactly the same place and nothing sticks
      out. From 992px the 3rem gap between side-by-side columns is kept, and
      the container clips the 12px of empty gutter beyond its edge instead
      (overflow-x: clip does not make a scroll box, so sticky still works).
   2. The sign-in shell (see the auth-shell rule above).
   3. The header's full link row needed more than a tablet's 768px, so the
      desktop links now start at 992px (partials/marketing_header.php) and
      tablets get the menu button, like phones.
   Plus a net: the page itself never scrolls sideways. A wide table or code
   block still scrolls inside its own box.
   ========================================================================== */
@media (max-width: 991.98px) {
    .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
}
@media (min-width: 992px) {
    .container-xxl:has(> .row.g-5), .container-xxl:has(> .row.gx-5) { overflow-x: clip; }
}
@supports (overflow-x: clip) {
    html, body { overflow-x: clip; }
}

/* Two more found signed in, at phone width:
   - Edit profile: ".prof-field input { width:100% ... }" outranked the
     visually-hidden file input, which became a 390px invisible box starting
     58px in, so the page was 58px too wide. Two classes beat one class + tag.
   - Talent search: the input had flex:1 but an input's default minimum width,
     so the Search button was pushed 11px off the right edge. */
.wo-file .wo-file__input {
    width: 1px; height: 1px; min-width: 0; max-width: 1px;
    padding: 0; margin: -1px; border: 0;
}
.talent-search-bar input { min-width: 0; }