/* Immigration Intelligence tools - Draw Tracker, Employer Directory, Insights.
   Builds on public.css design tokens; minimum 15px font sizes throughout. */

/* Hero - centered, constrained lead. */
.wpic-intel-hero { text-align: center; padding-bottom: clamp(18px, 3vw, 30px); }
.wpic-intel-hero .wpic-eyebrow { margin-left: auto; margin-right: auto; }
.wpic-intel-hero .wpic-h1 { margin: 14px 0 12px; }
.wpic-intel-hero .wpic-lead { max-width: 760px; margin-left: auto; margin-right: auto; }

/* Stat cards - public.css scopes .wpic-stat to .wpic-home only, so the
   intel pages need their own card styling (otherwise stats render as plain text). */
.wpic-intel .wpic-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 16px; margin-top: 30px; }
.wpic-intel .wpic-stat { text-align: center; padding: 22px 16px; border-radius: var(--wpic-radius-lg, 16px); background: var(--wpic-surface, #fff); border: 1px solid var(--wpic-line, #e6e9ef); transition: transform .2s ease, box-shadow .2s ease; }
.wpic-intel .wpic-stat:hover { transform: translateY(-3px); box-shadow: var(--wpic-shadow, 0 12px 30px rgba(16,22,29,.1)); }
.wpic-intel .wpic-stat .n { display: block; font-family: var(--wpic-font-display, inherit); font-size: clamp(2rem, 3.6vw, 2.6rem); font-weight: 900; line-height: 1; letter-spacing: -.03em; background: var(--wpic-grad-btn, linear-gradient(90deg, #0000bb, #3a3ad6)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; }
.wpic-intel .wpic-stat .l { display: block; color: var(--wpic-ink-500, #5b6472); font-size: 15px; font-weight: 500; line-height: 1.4; }
.wpic-intel .wpic-stat .l .wpic-muted { display: block; }

/* CTA banner - also home-scoped in public.css; redefine for intel pages. */
.wpic-intel .wpic-cta-banner { position: relative; padding: clamp(32px, 5vw, 52px); border-radius: var(--wpic-radius-xl, 22px); background: var(--wpic-grad-btn, linear-gradient(90deg, #0000bb, #3a3ad6)); color: #fff; overflow: hidden; text-align: center; box-shadow: 0 30px 60px -20px rgba(0,0,187,.45); }
.wpic-intel .wpic-cta-banner::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 15% 30%, rgba(255,255,255,.22), transparent 50%), radial-gradient(circle at 85% 70%, rgba(255,255,255,.16), transparent 55%); }
.wpic-intel .wpic-cta-banner > * { position: relative; z-index: 1; }
.wpic-intel .wpic-cta-banner .wpic-eyebrow { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.3); }
.wpic-intel .wpic-cta-banner h3 { font-family: var(--wpic-font-display, inherit); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin: 14px 0; color: #fff; line-height: 1.2; }
.wpic-intel .wpic-cta-banner p { color: rgba(255,255,255,.95); max-width: 680px; margin: 0 auto 24px; font-size: 17px; line-height: 1.6; }
.wpic-intel .wpic-cta-banner .wpic-btn { background: #fff; color: var(--wpic-ink-900, #11161d); border-color: #fff; box-shadow: 0 8px 20px -6px rgba(0,0,0,.2); }
.wpic-intel .wpic-cta-banner .wpic-btn:hover { transform: translateY(-2px); }
.wpic-intel .wpic-cta-banner .wpic-btn-ghost { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.55); box-shadow: none; }

/* Toolbar / filters */
.wpic-intel-toolbar {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
    margin-bottom: 22px;
}
.wpic-field-inline { display: flex; flex-direction: column; gap: 5px; font-size: 15px; }
.wpic-field-inline > span { font-weight: 600; font-size: 15px; color: var(--wpic-muted, #5b6472); }
.wpic-field-inline select,
.wpic-field-inline input[type="search"] {
    font-size: 15px; padding: 9px 12px; border: 1px solid var(--wpic-border, #d9dde5);
    border-radius: 10px; background: #fff; min-width: 200px;
    line-height: 1.4; height: auto; box-sizing: border-box;
}
/* Native <select> boxes inherit the theme's tight line-height/fixed height,
   which clips descenders (the tails of "regions", "types", "Any"). Give them
   room and swap the theme arrow for a custom caret so nothing gets cut off. */
.wpic-field-inline select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.wpic-field-grow { flex: 1 1 220px; }
.wpic-field-grow input[type="search"] { width: 100%; }

/* Segmented control */
.wpic-seg { display: inline-flex; background: var(--wpic-soft, #eef1f6); border-radius: 12px; padding: 4px; gap: 4px; }
.wpic-seg-btn {
    border: 0; background: transparent; cursor: pointer; font-size: 15px; font-weight: 600;
    padding: 9px 16px; border-radius: 9px; color: var(--wpic-muted, #5b6472); line-height: 1;
}
.wpic-seg-btn.is-active { background: #fff; color: var(--wpic-ink, #11161d); box-shadow: 0 1px 3px rgba(16,22,29,.12); }

/* Charts */
.wpic-intel-charts { margin-bottom: 26px; }
.wpic-chart-box { position: relative; height: 240px; margin-top: 10px; }
.wpic-intel-charts .wpic-card .wpic-muted { font-size: 15px; }

/* Tables */
.wpic-table-wrap { overflow-x: auto; border: 1px solid var(--wpic-border, #e6e9ef); border-radius: 12px; background: #fff; }
.wpic-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.wpic-table thead th {
    text-align: left; font-size: 15px; font-weight: 700; color: var(--wpic-muted, #5b6472);
    padding: 12px 16px; border-bottom: 1px solid var(--wpic-border, #e6e9ef); white-space: nowrap;
}
.wpic-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--wpic-soft, #f0f2f6); }
.wpic-table tbody tr:last-child td { border-bottom: 0; }
.wpic-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.wpic-table tbody tr:hover { background: var(--wpic-soft, #f7f9fc); }

/* Pager */
.wpic-intel-pager { display: flex; align-items: center; gap: 16px; justify-content: center; margin: 20px 0 6px; flex-wrap: wrap; }
.wpic-intel-pager .wpic-muted { font-size: 15px; }
.wpic-intel-source { font-size: 15px; margin-top: 14px; }
.wpic-intel-empty { text-align: center; padding: 40px 24px; }

/* Employer directory - modern grouped filter bar (employers page only) */
.wpic-employers .wpic-intel-toolbar {
    background: var(--wpic-surface, #fff);
    border: 1px solid var(--wpic-line, #e6e9ef);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(16, 22, 29, .04);
}

/* Employer directory - horizontal list of rows */
.wpic-emp-list { display: flex; flex-direction: column; gap: 12px; }

.wpic-emp-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 20px;
    background: var(--wpic-surface, #fff);
    border: 1px solid var(--wpic-line, #e6e9ef);
    border-radius: 16px;
    padding: 15px 20px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wpic-emp-row:hover {
    transform: translateY(-2px);
    border-color: var(--wpic-brand, #0000bb);
    box-shadow: 0 14px 32px -18px rgba(16, 22, 29, .3);
}

.wpic-emp-mono {
    width: 48px; height: 48px; border-radius: 14px;
    display: grid; place-items: center;
    font-family: var(--wpic-font-display, inherit);
    font-size: 19px; font-weight: 800; letter-spacing: -.01em;
    color: var(--wpic-brand, #0000bb);
    background: linear-gradient(135deg, rgba(0,0,187, .12), rgba(58,58,214, .12));
}

.wpic-emp-main { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.wpic-emp-main h3 { font-size: 17px; font-weight: 700; margin: 0; line-height: 1.25; }
.wpic-emp-meta { font-size: 15px; color: var(--wpic-ink-500, #5b6472); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.wpic-emp-meta span { display: inline-flex; align-items: center; gap: 5px; }
.wpic-emp-meta svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .7; }
.wpic-emp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wpic-emp-tag { font-size: 15px; line-height: 1.45; background: var(--wpic-soft, #eef1f6); color: var(--wpic-ink-700, #3a414d); border-radius: 999px; padding: 2px 12px; }

.wpic-emp-aside { display: flex; align-items: center; gap: 20px; }
.wpic-emp-stat { text-align: center; min-width: 70px; }
.wpic-emp-stat .n { display: block; font-family: var(--wpic-font-display, inherit); font-size: 23px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--wpic-ink-900, #11161d); }
.wpic-emp-stat .l { display: block; margin-top: 4px; font-size: 15px; color: var(--wpic-ink-500, #5b6472); }

.wpic-emp-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.wpic-emp-save { border: 0; background: none; cursor: pointer; font-size: 15px; color: var(--wpic-brand, #0000bb); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; padding: 8px 11px; border-radius: 10px; line-height: 1; }
.wpic-emp-save:hover { background: var(--wpic-soft, #eef1f6); }
.wpic-emp-save svg { width: 16px; height: 16px; }
.wpic-emp-save[disabled] { color: var(--wpic-muted, #9aa3b2); cursor: not-allowed; }
.wpic-emp-save.is-saved { color: #16a34a; }

/* Stack the stat + actions below on narrow screens */
@media (max-width: 760px) {
    .wpic-emp-row { grid-template-columns: auto minmax(0, 1fr); row-gap: 12px; }
    .wpic-emp-aside { grid-column: 1 / -1; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--wpic-soft, #f0f2f6); }
    .wpic-emp-stat { display: flex; align-items: baseline; gap: 6px; min-width: 0; text-align: left; }
    .wpic-emp-stat .l { margin-top: 0; }
}

/* Premium lock chip */
.wpic-lock { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; color: var(--wpic-muted, #5b6472); }

/* Insights */
.wpic-insights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.wpic-rank-list { list-style: none; margin: 8px 0 0; padding: 0; }
.wpic-rank-list li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--wpic-soft, #f0f2f6); font-size: 15px; }
.wpic-rank-list li:last-child { border-bottom: 0; }
.wpic-rank-bar { flex: 1; height: 8px; background: var(--wpic-soft, #eef1f6); border-radius: 999px; overflow: hidden; }
.wpic-rank-bar > span { display: block; height: 100%; background: var(--wpic-brand, #0000bb); border-radius: 999px; }
.wpic-rank-val { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 64px; text-align: right; }

@media (max-width: 640px) {
    .wpic-intel-toolbar { gap: 12px; }
    .wpic-field-inline select, .wpic-field-inline input[type="search"] { min-width: 0; width: 100%; }
    /* Stacked responsive table */
    .wpic-draws-table thead { display: none; }
    .wpic-draws-table, .wpic-draws-table tbody, .wpic-draws-table tr, .wpic-draws-table td { display: block; width: 100%; }
    .wpic-draws-table tr { border-bottom: 1px solid var(--wpic-border, #e6e9ef); padding: 8px 0; }
    .wpic-draws-table td { border: 0; padding: 6px 16px; display: flex; justify-content: space-between; gap: 16px; }
    .wpic-draws-table td.num { text-align: right; }
    .wpic-draws-table td::before { content: attr(data-label); font-weight: 600; color: var(--wpic-muted, #5b6472); }
    .wpic-pt-table thead { display: none; }
    .wpic-pt-table, .wpic-pt-table tbody, .wpic-pt-table tr, .wpic-pt-table td { display: block; width: 100%; }
    .wpic-pt-table tr { border-bottom: 1px solid var(--wpic-border, #e6e9ef); padding: 8px 0; }
    .wpic-pt-table td { border: 0; padding: 6px 16px; display: flex; justify-content: space-between; gap: 16px; }
    .wpic-pt-table td::before { content: attr(data-label); font-weight: 600; color: var(--wpic-muted, #5b6472); }
}

/* ---------- Processing-time tracker ---------- */
.wpic-pt-lookup { margin-bottom: 26px; }
.wpic-pt-lookup-label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.wpic-pt-lookup select { width: 100%; max-width: 520px; font-size: 16px; padding: 12px 14px; border: 1px solid var(--wpic-border, #d9dde5); border-radius: 12px; background: #fff; }
.wpic-pt-result { margin-top: 18px; padding: 20px; border-radius: 14px; background: var(--wpic-soft, #f0f6ff); border: 1px solid var(--wpic-line, #e6e9ef); }
.wpic-pt-result-est { font-family: var(--wpic-font-display, inherit); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; line-height: 1; background: var(--wpic-grad-btn, linear-gradient(90deg, #0000bb, #3a3ad6)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wpic-pt-result-meta { margin-top: 8px; font-size: 16px; font-weight: 600; }
.wpic-pt-result-meta .wpic-muted { font-weight: 400; }
.wpic-pt-cat { margin: 26px 0 10px; }

/* ---------- Programs library ---------- */
.wpic-prog-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.wpic-chip { border: 1px solid var(--wpic-line, #e6e9ef); background: #fff; color: var(--wpic-ink-700, #3a414d); font-size: 15px; font-weight: 600; padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: all .15s ease; }
/* Keep the text readable on hover/focus for both states, overriding any theme
   button hover colour (which was darkening the active chip's label). */
.wpic-chip:hover,
.wpic-chip:focus { color: var(--wpic-brand, #0000bb); border-color: var(--wpic-brand, #0000bb); background: #fff; }
.wpic-chip.is-active,
.wpic-chip.is-active:hover,
.wpic-chip.is-active:focus,
.wpic-chip.is-active:active { background: var(--wpic-brand, #0000bb); color: #fff; border-color: var(--wpic-brand, #0000bb); }
.wpic-prog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.wpic-prog-card { display: flex; flex-direction: column; gap: 8px; background: var(--wpic-surface, #fff); border: 1px solid var(--wpic-line, #e6e9ef); border-radius: 16px; padding: 20px; text-decoration: none; color: var(--wpic-ink-900, #11161d); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.wpic-prog-card:hover { transform: translateY(-3px); border-color: var(--wpic-brand, #0000bb); box-shadow: 0 16px 36px -20px rgba(16,22,29,.32); }
.wpic-prog-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--wpic-brand, #0000bb); background: linear-gradient(135deg, rgba(0,0,187,.12), rgba(58,58,214,.12)); }
.wpic-prog-icon svg { width: 22px; height: 22px; }
.wpic-prog-level { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.wpic-prog-card h3 { font-size: 17px; line-height: 1.3; margin: 2px 0 0; }
.wpic-prog-card p { font-size: 15px; color: var(--wpic-ink-500, #5b6472); margin: 0; flex: 1; }
.wpic-prog-more { font-size: 15px; font-weight: 600; color: var(--wpic-brand, #0000bb); display: inline-flex; align-items: center; gap: 5px; }
.wpic-prog-more svg { width: 15px; height: 15px; }
.wpic-prog-crumb { font-size: 15px; margin-bottom: 12px; }
.wpic-prog-crumb a { color: var(--wpic-brand, #0000bb); text-decoration: none; }
.wpic-prog-reqs { list-style: none; margin: 8px 0 0; padding: 0; }
.wpic-prog-reqs li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: 15px; }
.wpic-prog-reqs li svg { width: 18px; height: 18px; color: #16a34a; flex: 0 0 auto; margin-top: 1px; }

/* ---- Global Immigration Updates ---- */
.wpic-chip-sm { padding: 6px 13px; }
.wpic-upd-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: rgba(16,22,29,.08); font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; }
.wpic-chip.is-active .wpic-upd-count { background: rgba(255,255,255,.25); }
.wpic-upd-filters { margin-bottom: 24px; }
.wpic-upd-filters .wpic-prog-filters { margin-bottom: 0; flex: 1; }
.wpic-upd-frow { display: flex; align-items: flex-start; gap: 14px; }
.wpic-upd-frow + .wpic-upd-selects { margin-top: 14px; }
.wpic-upd-flabel { flex: 0 0 64px; padding-top: 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--wpic-ink-500, #5b6472); }
.wpic-upd-selects { display: flex; flex-wrap: wrap; gap: 14px; }
.wpic-upd-field { display: flex; flex-direction: column; gap: 6px; }
.wpic-upd-field > span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--wpic-ink-500, #5b6472); }
.wpic-upd-field select { appearance: none; -webkit-appearance: none; -moz-appearance: none; box-sizing: border-box; height: auto; min-width: 200px; padding: 10px 40px 10px 14px; font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--wpic-ink-900, #11161d); background-color: #fff; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 16px; border: 1px solid var(--wpic-line, #e6e9ef); border-radius: 12px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.wpic-upd-field select:hover { border-color: var(--wpic-brand, #0000bb); }
.wpic-upd-field select:focus { outline: none; border-color: var(--wpic-brand, #0000bb); box-shadow: 0 0 0 3px rgba(0,0,187,.14); }
.wpic-upd-resultbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--wpic-line, #e6e9ef); }
.wpic-upd-resultcount { font-size: 15px; font-weight: 600; color: var(--wpic-ink-700, #3a414d); }
.wpic-upd-clear { border: 1px solid var(--wpic-line, #e6e9ef); background: #fff; color: var(--wpic-brand, #0000bb); font-size: 15px; font-weight: 700; padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: all .15s ease; }
.wpic-upd-clear:hover { border-color: var(--wpic-brand, #0000bb); background: rgba(0,0,187,.06); }
.wpic-upd-search { position: relative; display: flex; align-items: center; max-width: 420px; margin-bottom: 14px; }
.wpic-upd-search .wpic-icon { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--wpic-ink-500, #5b6472); pointer-events: none; }
.wpic-upd-search input { width: 100%; padding: 11px 14px 11px 42px; font-size: 15px; border: 1px solid var(--wpic-line, #e6e9ef); border-radius: 999px; background: var(--wpic-surface, #fff); color: var(--wpic-ink-900, #11161d); transition: border-color .18s ease, box-shadow .18s ease; }
.wpic-upd-search input:focus { outline: none; border-color: var(--wpic-brand, #0000bb); box-shadow: 0 0 0 3px rgba(0,0,187,.14); }

.wpic-upd-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.wpic-upd-card { display: flex; flex-direction: column; gap: 10px; background: var(--wpic-surface, #fff); border: 1px solid var(--wpic-line, #e6e9ef); border-radius: 16px; padding: 20px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.wpic-upd-card:hover { transform: translateY(-3px); border-color: var(--wpic-brand, #0000bb); box-shadow: 0 16px 36px -20px rgba(16,22,29,.32); }
.wpic-upd-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wpic-upd-country { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--wpic-ink-900, #11161d); }
.wpic-upd-flag { font-size: 12px; font-weight: 800; letter-spacing: .04em; padding: 2px 7px; border-radius: 6px; background: linear-gradient(135deg, rgba(0,0,187,.12), rgba(58,58,214,.12)); color: var(--wpic-brand, #0000bb); }
.wpic-upd-cat { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--wpic-ink-500, #5b6472); }
.wpic-upd-cat svg { width: 15px; height: 15px; }
.wpic-upd-title { font-size: 17px; line-height: 1.35; margin: 0; }
.wpic-upd-title a { color: var(--wpic-ink-900, #11161d); text-decoration: none; }
.wpic-upd-title a:hover { color: var(--wpic-brand, #0000bb); }
.wpic-upd-summary { font-size: 15px; line-height: 1.55; color: var(--wpic-ink-500, #5b6472); margin: 0; flex: 1; }
.wpic-upd-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--wpic-line, #e6e9ef); padding-top: 12px; }
.wpic-upd-impact { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 700; }
.wpic-upd-impact svg { width: 16px; height: 16px; }
.wpic-upd-meta { font-size: 13px; color: var(--wpic-ink-500, #5b6472); text-align: right; }
.wpic-upd-empty { text-align: center; font-size: 15px; color: var(--wpic-ink-500, #5b6472); padding: 30px 0; }

/* ---------- Occupation Demand ---------- */
.wpic-occd-list { list-style: none; margin: 0; padding: 0; background: var(--wpic-surface, #fff); border: 1px solid var(--wpic-line, #e6e9ef); border-radius: 16px; overflow: hidden; }
.wpic-occd-row { display: flex; align-items: center; gap: 16px; padding: 13px 20px; border-bottom: 1px solid var(--wpic-soft, #f0f2f6); font-size: 15px; }
.wpic-occd-row:last-child { border-bottom: 0; }
.wpic-occd-row:hover { background: var(--wpic-soft, #f7f9fc); }
.wpic-occd-rank { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--wpic-brand, #0000bb); background: linear-gradient(135deg, rgba(0,0,187,.1), rgba(58,58,214,.1)); }
.wpic-occd-main { flex: 0 1 44%; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wpic-occd-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.wpic-occd-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.wpic-occd-row .wpic-rank-bar { flex: 1; }
@media (max-width: 640px) {
    .wpic-occd-main { flex-basis: 55%; }
    .wpic-occd-row .wpic-rank-bar { display: none; }
}

/* ---------- Jobs feed (Sponsorship Jobs + Global Jobs) ---------- */
.wpic-jobs-list { display: flex; flex-direction: column; gap: 12px; }
.wpic-jobs-row { grid-template-columns: minmax(0, 1fr) auto; }
.wpic-jobs-row.is-sponsor { border-color: rgba(22, 163, 74, .45); }
.wpic-jobs-row h3 a { color: var(--wpic-ink-900, #11161d); text-decoration: none; }
.wpic-jobs-row h3 a:hover { color: var(--wpic-brand, #0000bb); }
.wpic-jobs-excerpt { margin: 2px 0 0; font-size: 15px; line-height: 1.55; color: var(--wpic-ink-500, #5b6472); }
.wpic-jobs-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; line-height: 1.45; font-weight: 600; border-radius: 999px; padding: 2px 12px; }
.wpic-jobs-badge svg { width: 15px; height: 15px; }
.wpic-jobs-badge.is-sponsor { background: rgba(22, 163, 74, .12); color: #15803d; }
@media (max-width: 760px) {
    .wpic-jobs-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Migration Rankings ---------- */
.wpic-mrank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.wpic-mrank-card { display: flex; flex-direction: column; gap: 12px; background: var(--wpic-surface, #fff); border: 1px solid var(--wpic-line, #e6e9ef); border-radius: 16px; padding: 20px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.wpic-mrank-card:hover { transform: translateY(-3px); border-color: var(--wpic-brand, #0000bb); box-shadow: 0 16px 36px -20px rgba(16,22,29,.32); }
.wpic-mrank-head { display: flex; align-items: center; gap: 10px; }
.wpic-mrank-head h3 { flex: 1; min-width: 0; margin: 0; font-size: 18px; line-height: 1.3; }
.wpic-mrank-flag { font-size: 20px; margin-right: 2px; }
.wpic-mrank-rank { flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--wpic-brand, #0000bb); background: linear-gradient(135deg, rgba(0,0,187,.1), rgba(58,58,214,.1)); border-radius: 10px; padding: 5px 10px; font-size: 15px; }
.wpic-mrank-score { flex: 0 0 auto; font-family: var(--wpic-font-display, inherit); font-size: 26px; font-weight: 900; letter-spacing: -.02em; background: var(--wpic-grad-btn, linear-gradient(90deg, #0000bb, #3a3ad6)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wpic-mrank-dims { list-style: none; margin: 0; padding: 0; }
.wpic-mrank-dims li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 15px; }
.wpic-mrank-dim-label { flex: 0 0 44%; color: var(--wpic-ink-500, #5b6472); }
.wpic-mrank-dims .wpic-rank-val { min-width: 34px; }
.wpic-mrank-note { margin: 0; font-size: 15px; line-height: 1.55; color: var(--wpic-ink-500, #5b6472); flex: 1; }
.wpic-mrank-best { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; color: var(--wpic-ink-800, #232933); border-top: 1px solid var(--wpic-soft, #f0f2f6); padding-top: 12px; }
.wpic-mrank-best svg { width: 16px; height: 16px; color: var(--wpic-brand, #0000bb); flex: 0 0 auto; }

/* ---------- Global Opportunities (jobs / study / business / tourism /
   internships / fellowships / partnerships) ---------- */
.wpic-opps-blocktitle { display: flex; align-items: center; gap: 8px; font-size: 18px; margin: 0 0 16px; }
.wpic-opps-blocktitle svg { width: 20px; height: 20px; color: var(--wpic-brand, #0000bb); flex: 0 0 auto; }
.wpic-opps-live { padding-bottom: 0; }
.wpic-opps-toolbar {
    background: var(--wpic-surface, #fff);
    border: 1px solid var(--wpic-line, #e6e9ef);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(16, 22, 29, .04);
}
/* Fields flex to fill the row and shrink evenly instead of each demanding a
   fixed 200px (which forced "Sort" onto its own line and left dead space).
   Scoped to both the catalog toolbar and the jobs live-search toolbar. */
.wpic-opps .wpic-intel-toolbar { align-items: flex-end; }
.wpic-opps .wpic-intel-toolbar .wpic-field-inline { flex: 1 1 160px; min-width: 0; }
.wpic-opps .wpic-intel-toolbar .wpic-field-grow { flex: 2 1 240px; }
.wpic-opps .wpic-intel-toolbar .wpic-field-inline select,
.wpic-opps .wpic-intel-toolbar .wpic-field-inline input[type="search"] { width: 100%; min-width: 0; }
/* Catalog toolbar: keep the search box on its own full-width line so the
   dropdowns (Region / Type / Funding / Sort) share one clean, even row and
   nothing gets orphaned to a stretched second line. */
.wpic-opps-toolbar .wpic-field-grow { flex-basis: 100%; }
.wpic-opps-count { font-size: 15px; font-weight: 600; color: var(--wpic-ink-700, #3a414d); margin: 14px 0 16px; min-height: 15px; }

.wpic-opps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; }
.wpic-opp-card {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--wpic-surface, #fff);
    border: 1px solid var(--wpic-line, #e6e9ef);
    border-radius: 16px; padding: 20px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wpic-opp-card:hover { transform: translateY(-3px); border-color: var(--wpic-brand, #0000bb); box-shadow: 0 16px 36px -20px rgba(16,22,29,.32); }
.wpic-opp-card-top { display: flex; flex-wrap: wrap; gap: 6px; }
.wpic-opp-chip { font-size: 15px; line-height: 1.4; font-weight: 600; border-radius: 999px; padding: 3px 12px; background: var(--wpic-soft, #eef1f6); color: var(--wpic-ink-700, #3a414d); }
.wpic-opp-chip.is-funded { background: rgba(22, 163, 74, .12); color: #15803d; }
.wpic-opp-chip.is-partial { background: rgba(217, 119, 6, .14); color: #b45309; }
.wpic-opp-chip.is-paid { background: rgba(0, 0, 187, .1); color: var(--wpic-brand, #0000bb); }
.wpic-opp-chip.is-self { background: var(--wpic-soft, #eef1f6); color: var(--wpic-ink-700, #3a414d); }
.wpic-opp-title { font-size: 18px; line-height: 1.3; margin: 0; color: var(--wpic-ink-900, #11161d); transition: color .15s ease; }
.wpic-opp-title a { color: var(--wpic-ink-900, #11161d); text-decoration: none; }
.wpic-opp-title a:hover { color: var(--wpic-brand, #0000bb); }
.wpic-opp-org { font-size: 15px; font-weight: 600; color: var(--wpic-ink-700, #3a414d); margin: 0; }
.wpic-opp-regions { font-weight: 400; color: var(--wpic-ink-500, #5b6472); }
.wpic-opp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 15px; color: var(--wpic-ink-500, #5b6472); }
.wpic-opp-meta span { display: inline-flex; align-items: center; gap: 5px; }
.wpic-opp-meta svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .7; }
.wpic-opp-summary { font-size: 15px; line-height: 1.55; color: var(--wpic-ink-500, #5b6472); margin: 0; flex: 1; }
.wpic-opp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wpic-opp-tag { font-size: 15px; line-height: 1.4; background: transparent; color: var(--wpic-ink-500, #5b6472); border: 1px solid var(--wpic-line, #e6e9ef); border-radius: 999px; padding: 1px 11px; }
.wpic-opp-actions { border-top: 1px solid var(--wpic-soft, #f0f2f6); padding-top: 12px; margin-top: 2px; }
.wpic-opp-actions .wpic-btn { width: 100%; justify-content: center; }

.wpic-opps-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--wpic-line, #e6e9ef); }
.wpic-opps-sources .wpic-muted { font-size: 15px; font-weight: 600; }

/* Detail popup - opens on "Read more". Mounted on <body> (dashboard sections
   use transforms that break position:fixed for descendants), so it must not
   rely on any plugin wrapper and is hardened against theme styles. */
.wpic-opp-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
.wpic-opp-modal, .wpic-opp-modal * { box-sizing: border-box; }
.wpic-opp-modal[hidden] { display: none !important; }
body.wpic-opp-modal-open { overflow: hidden; }
.wpic-opp-modal-backdrop { position: absolute; inset: 0; background: rgba(16, 22, 29, .55); backdrop-filter: blur(2px); cursor: pointer; }
.wpic-opp-dialog {
    position: relative; z-index: 1; width: 100%; max-width: 600px; margin: 0;
    max-height: min(86vh, 720px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--wpic-surface, #fff); border-radius: 18px; text-align: left;
    padding: 26px 26px 28px; box-shadow: 0 30px 80px -20px rgba(16, 22, 29, .5);
    animation: wpic-opp-pop .18s ease;
}
@keyframes wpic-opp-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.wpic-opp-modal-x {
    position: sticky; top: 0; float: right; margin: -6px -6px 0 12px;
    width: 34px; height: 34px; z-index: 2;
    display: grid; place-items: center; border: 0; border-radius: 10px;
    background: var(--wpic-soft, #eef1f6); color: var(--wpic-ink-700, #3a414d);
    font-size: 22px; line-height: 1; cursor: pointer; padding: 0;
}
.wpic-opp-modal-x:hover { background: var(--wpic-line, #e6e9ef); }
.wpic-opp-modal-body { display: flex; flex-direction: column; gap: 14px; }
.wpic-opp-modal-title { font-family: var(--wpic-font-display, inherit); font-size: 23px; line-height: 1.25; margin: 0; color: var(--wpic-ink-900, #11161d); }
.wpic-opp-modal-body .wpic-opp-org { margin-top: -8px; }
.wpic-opp-modal-summary { font-size: 16px; line-height: 1.65; color: var(--wpic-ink-700, #3a414d); margin: 0; }
.wpic-opp-modal-lead { font-weight: 600; color: var(--wpic-ink-900, #11161d); }
.wpic-opp-facts {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px;
    margin: 2px 0 0; padding: 16px; border-radius: 14px;
    background: var(--wpic-soft, #f4f6fa); border: 1px solid var(--wpic-line, #e6e9ef);
}
.wpic-opp-fact dt { font-size: 15px; font-weight: 700; color: var(--wpic-ink-500, #5b6472); margin: 0 0 2px; }
.wpic-opp-fact dd { font-size: 15px; line-height: 1.45; color: var(--wpic-ink-900, #11161d); margin: 0; }
.wpic-opp-modal-actions { margin-top: 4px; }
.wpic-opp-modal-actions .wpic-btn { width: 100%; justify-content: center; }
@media (max-width: 520px) {
    .wpic-opp-facts { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .wpic-opps-grid { grid-template-columns: 1fr; }
    .wpic-opp-dialog { padding: 22px 18px 24px; }
}