/* The Talent Poll v105+ design layer for the two public landing pages (landing.html, seeker_landing.html).
   Loaded only when Super-admin > Global settings > "New design" is ON. Same family as the app and the HRMS:
   Inter, indigo, navy. Dark by default (data-theme="dark" set in <head>); the sun/moon button switches to light
   and the choice is remembered ("tp-theme", shared with the app). */

/* ── Light tokens ── */
html.ui-v2{
  --ink:#101828; --ink-2:#344054; --muted:#667085; --paper:#F5F6F8; --white:#FFFFFF; --line:#E4E7EC;
  --brand:#4F46E5; --brand-deep:#4338CA; --brand-wash:#EEF2FF; --coral:#E0603F;
  --green:#067647; --green-wash:#ECFDF3;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 4px 14px rgba(16,24,40,.06), 0 24px 60px rgba(16,24,40,.07);
  --ai-a:#6366F1; --ai-b:#F2876E;
  --page:#FFFFFF; --glass:rgba(255,255,255,.72); --glass-line:rgba(16,24,40,.08);
  --btn:#4F46E5; --btn-hover:#4338CA; --hero-glow:rgba(99,102,241,.12); --night:#0B1220;
}
/* ── Dark tokens (default) ── */
html.ui-v2[data-theme="dark"]{
  --ink:#EEF1F8; --ink-2:#B6C0D6; --muted:#8A96B2; --paper:#0E1528; --white:#111A2E; --line:#222D47;
  --brand:#8B93F8; --brand-deep:#A5ABFA; --brand-wash:rgba(129,140,248,.14); --coral:#F2876E;
  --green:#3FCB93; --green-wash:rgba(63,203,147,.14);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --page:#0B1220; --glass:rgba(17,26,46,.66); --glass-line:rgba(148,163,184,.16);
  --btn:#6366F1; --btn-hover:#7C7FF4; --hero-glow:rgba(99,102,241,.28);
  color-scheme:dark;
}

/* ── Type ── */
html.ui-v2 body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--page);color:var(--ink)}
html.ui-v2 h1, html.ui-v2 h2, html.ui-v2 h3, html.ui-v2 .display, html.ui-v2 .logo, html.ui-v2 .btn, html.ui-v2 summary,
html.ui-v2 .plan .pn, html.ui-v2 .plan .pp, html.ui-v2 .card .av, html.ui-v2 .cand .av{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
html.ui-v2 [style*="Plus Jakarta"]{font-family:Inter,system-ui,sans-serif!important}
html.ui-v2 h1{font-weight:800;letter-spacing:-.035em}
html.ui-v2 h2{letter-spacing:-.025em}
html.ui-v2 .lede, html.ui-v2 .sec-head p{color:var(--ink-2)}

/* ── Nav and strips ── */
html.ui-v2 nav{background:color-mix(in srgb,var(--page) 82%,transparent);border-bottom-color:var(--line)}
html.ui-v2 .navlinks{color:var(--ink-2)}
html.ui-v2 .logo i{background:linear-gradient(135deg,var(--ai-a),#4338CA)}
html.ui-v2 .audience{background:var(--night);color:#C9D1E6;border-bottom:1px solid rgba(148,163,184,.12)}
.tp-navr{display:flex;align-items:center;gap:10px}
.tp-theme{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--white);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;padding:0}
.tp-theme:hover{border-color:var(--brand);color:var(--brand)}
.tp-theme svg{width:18px;height:18px}
.tp-theme .sun{display:none}
html[data-theme="dark"] .tp-theme .sun{display:block}
html[data-theme="dark"] .tp-theme .moon{display:none}

/* ── Buttons ── */
html.ui-v2 .btn{font-weight:600;border-radius:8px}
html.ui-v2 .btn-lg{border-radius:10px}
html.ui-v2 .btn-primary{background:var(--btn);color:#fff}
html.ui-v2 .btn-primary:hover{background:var(--btn-hover);color:#fff}
html.ui-v2 .btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
html.ui-v2 .btn-ghost:hover{border-color:var(--brand);color:var(--brand)}

/* ── Hero ── */
html.ui-v2 .hero{background:radial-gradient(900px 480px at 85% 0%, var(--hero-glow) 0%, transparent 62%),radial-gradient(600px 360px at 5% 10%, rgba(242,135,110,.07) 0%, transparent 60%)}
html.ui-v2 .eyebrow{background:var(--brand-wash);color:var(--brand)}
html.ui-v2 h1 .u{background:linear-gradient(transparent 68%, rgba(242,135,110,.35) 68%)}
html.ui-v2[data-theme="dark"] h1 .u{background:linear-gradient(transparent 70%, rgba(242,135,110,.28) 70%)}
html.ui-v2 .cta-note b{color:var(--ink)}

/* the sorting stack becomes glass over the talent field, so the field reads as one layer behind all cards
   (before, the opaque cards hid it and it only peeked out between them) */
html.ui-v2 .stage, html.ui-v2 .tp-hero-wrap{position:relative;isolation:isolate}
.tp-hero-field{position:absolute;inset:-70px -50px;width:calc(100% + 100px);height:calc(100% + 140px);z-index:-1;pointer-events:none}
html.ui-v2 .card{background:var(--glass);border-color:var(--glass-line);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);box-shadow:var(--shadow-sm)}
html.ui-v2 .card .av, html.ui-v2 .cand .av{background:var(--brand-wash);color:var(--brand)}
html.ui-v2 .card .who, html.ui-v2 .cand .who{display:flex;flex-direction:column;line-height:1.35}
html.ui-v2 .divider-tag{background:transparent;padding:2px 8px 2px 0}
html.ui-v2 .divider-line{background:var(--glass-line)}
html.ui-v2 .stage-label{color:var(--muted)}

/* ── Sections ── */
html.ui-v2 .paper{background:var(--paper)}
html.ui-v2 .kicker{color:var(--brand)}
html.ui-v2 .prob, html.ui-v2 .step, html.ui-v2 .feat, html.ui-v2 .plan, html.ui-v2 .panel{background:var(--white);border-color:var(--line)}
html.ui-v2 .steps{background:var(--line);border-color:var(--line)}
html.ui-v2 .step .num{background:var(--brand-wash);border-color:transparent;color:var(--brand)}
html.ui-v2 .feat .ic{background:var(--brand-wash)}
html.ui-v2 .feat svg{stroke:var(--brand)}
html.ui-v2 .panel{box-shadow:var(--shadow)}
html.ui-v2 .panel-top{border-color:var(--line)}
html.ui-v2 .tag.top{background:var(--green-wash);color:var(--green)}
html.ui-v2 .tag.no{background:var(--paper);color:var(--muted)}
html.ui-v2 .checks .tick{background:var(--green-wash);color:var(--green)}
html.ui-v2 .plan.pop{border-color:var(--btn);box-shadow:0 8px 30px rgba(99,102,241,.22)}
html.ui-v2 .ribbon{background:var(--btn)}
html.ui-v2 summary:after{color:var(--brand)}
html.ui-v2 details{border-color:var(--line)}
html.ui-v2 footer{border-color:var(--line);color:var(--muted)}

/* closing call-to-action: always a night panel, in both themes */
html.ui-v2 .final{background:var(--night);border:1px solid rgba(148,163,184,.14);color:#fff;
  background-image:radial-gradient(700px 300px at 50% -30%, rgba(99,102,241,.5), transparent 70%)}
html.ui-v2 .final h2{color:#fff}
html.ui-v2 .final p{color:#B6C0D6}
html.ui-v2 .final .btn-primary[style]{background:#fff!important;color:#101828!important}

@media(prefers-reduced-motion:reduce){ .tp-hero-field{opacity:.7} }
@media(max-width:940px){ .tp-hero-field{inset:-30px -10px;width:calc(100% + 20px);height:calc(100% + 60px)} }

/* ── v107 hero: the talent field on its own panel with live counters (as agreed in the design plan) ── */
.tp-fieldp{position:relative;border:1px solid var(--line);border-radius:22px;overflow:hidden;min-width:0;
  background:radial-gradient(circle at 50% 46%, var(--hero-glow), transparent 64%), var(--white);box-shadow:var(--shadow)}
.tp-fieldp canvas{display:block;width:100%;height:440px}
.tp-fieldp-tag{position:absolute;top:14px;left:16px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px;z-index:1}
.tp-fieldp-tag .live{width:8px;height:8px;border-radius:50%;background:#12B76A;box-shadow:0 0 0 4px rgba(18,183,106,.18);animation:tpLive 2s ease-in-out infinite}
.tp-legend{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:13px 18px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.tp-legend span{display:inline-flex;align-items:center;gap:7px}
.tp-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
.tp-legend i.no{background:var(--muted);opacity:.6}
.tp-legend b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
@keyframes tpLive{50%{opacity:.45}}
@media(max-width:940px){ .tp-fieldp canvas{height:340px} }
@media(prefers-reduced-motion:reduce){ .tp-fieldp-tag .live{animation:none} }