/* Talent module — partner portal (talent host), learner Career profile, staff Talent pages. Tokens only (app.css). */
.talent .tl-tag, .tl-tag { background: var(--grad); color: #fff; }
.tl-eyebrow { font: 700 var(--fs-2xs, .72rem)/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin: 0 0 .35rem; }
.tl-page { max-width: 1240px; }
body.talent.has-tabbar .tl-page { padding-bottom: 5.5rem; }
.tl-foot { text-align: center; font-size: .8rem; color: var(--ink-3); padding: 1.5rem 16px 6rem; }
.tl-foot a { color: var(--ink-3); }
@media (min-width: 900px) { .tl-foot { padding-bottom: 2rem; } }

/* forms */
.tl-form { display: grid; gap: .25rem; }
.tl-form fieldset { border: 0; padding: 0; margin: .5rem 0; min-width: 0; }
.tl-form legend { font-weight: 700; margin-bottom: .5rem; }
.tl-form .form-grid { display: grid; gap: 0 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .tl-form .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tl-form .chips-pick { display: flex; flex-wrap: wrap; gap: .4rem; }
.tl-form .chip-check { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: .85rem; cursor: pointer; }
.tl-form .chip-check:has(input:checked) { border-color: var(--brand); background: var(--brand-softer); color: var(--brand-ink); }
.tl-form .check { display: flex; gap: .55rem; align-items: flex-start; margin: .5rem 0; font-size: .9rem; }
.auth-card.tl-wide { max-width: 640px; }

/* board */
.tl-board-hero { padding: 1.25rem 0 .75rem; }
.tl-board-hero h1 { margin: 0; }
.tl-filters { display: grid; gap: .75rem; margin: .5rem 0 1rem; }
.tl-q { width: 100%; }
.tl-more > summary { list-style: none; width: max-content; }
.tl-more > summary::-webkit-details-marker { display: none; }
.tl-fgrid { display: grid; gap: .25rem 1rem; grid-template-columns: minmax(0, 1fr); margin-top: .75rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); }
@media (min-width: 640px) { .tl-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tl-fgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tl-active { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.tl-active .chip { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .65rem; border-radius: var(--radius-pill); background: var(--brand-softer); color: var(--brand-ink); font-size: .8rem; text-decoration: none; }
.tl-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 680px) { .tl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tl-card { position: relative; display: grid; gap: .75rem; align-content: start; padding: 1.1rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-s), var(--highlight, 0 0 0 transparent); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2); min-width: 0; }
.tl-card:hover, .tl-card:focus-within { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-soft); }
.tl-card-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: center; }
.tl-card-who h3 { margin: 0; font-size: 1.05rem; }
.tl-card-link { color: var(--ink); text-decoration: none; }
.tl-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tl-card-link:focus-visible { outline: none; }
.tl-card:has(.tl-card-link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.tl-star { position: relative; z-index: 1; }
.tl-star[aria-pressed="true"], [data-shortlist][aria-pressed="true"] { color: var(--brand); }
.tl-star[aria-pressed="true"] svg { fill: currentColor; }
.tl-headline { margin: .15rem 0 0; color: var(--ink-2); font-size: .9rem; overflow-wrap: anywhere; }
.tl-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.tl-mono { display: grid; place-items: center; background: var(--grad); color: #fff; font: 800 1.05rem/1 var(--font-display); }
.tl-meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .82rem; color: var(--ink-2); }
.tl-meta > span { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; }
.tl-avail { padding: .15rem .55rem; border-radius: var(--radius-pill); background: var(--ok-soft); color: var(--ok-ink); font-weight: 600; }
.tl-avail.is-not_available { background: var(--bg-sunken); color: var(--ink-3); }
.tl-chips { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.tl-chips li { padding: .22rem .6rem; border-radius: var(--radius-pill); background: var(--bg-sunken); font-size: .78rem; color: var(--ink-2); }
.tl-card-f { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .78rem; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: .65rem; }
.tl-card-f span { display: inline-flex; align-items: center; gap: .3rem; }

/* profile */
.tl-profile { display: grid; gap: 1.25rem; }
.tl-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 1rem; grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 1.5rem; border-radius: var(--radius-l); background: var(--night, #1c1a1c); color: #fff; }
.tl-hero::before { content: ""; position: absolute; inset: auto -10% -60% 40%; height: 140%; background: radial-gradient(closest-side, rgba(204, 0, 204, .35), transparent); z-index: -1; }
.tl-hero h1 { color: #ff47ff; margin: 0; overflow-wrap: anywhere; }
.tl-hero .tl-eyebrow { color: rgba(255, 255, 255, .7); }
.tl-hero .tl-headline, .tl-hero .tl-meta { color: rgba(255, 255, 255, .85); }
.tl-hero .tl-photo { width: 84px; height: 84px; }
.tl-hero-act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tl-hero .btn-ghost { color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .35); }
.tl-hero .btn-ghost:hover { background: rgba(255, 255, 255, .16); }
@media (min-width: 800px) { .tl-hero { grid-template-columns: auto minmax(0, 1fr) auto; } .tl-hero-act { grid-column: auto; justify-content: flex-end; } }
.tl-cols { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .tl-cols { grid-template-columns: minmax(0, 1fr) 320px; } }
.tl-main, .tl-side { display: grid; gap: 1rem; min-width: 0; }
.tl-summary { white-space: pre-line; overflow-wrap: anywhere; }
.tl-courses, .tl-certs, .tl-links, .tl-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.tl-courses li, .tl-certs li, .tl-rows li { display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--line); min-width: 0; }
.tl-courses li:last-child, .tl-certs li:last-child, .tl-rows li:last-child { border-bottom: 0; }
.tl-rows li > :first-child { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.tl-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: 0; font-size: .9rem; }
.tl-dl dt { color: var(--ink-3); }
.tl-dl dd { margin: 0; overflow-wrap: anywhere; }
.tl-preview { border: 2px dashed var(--line-strong); border-radius: var(--radius-l); padding: 1rem; }
.tl-preview-wrap { margin-top: 1.5rem; }
.tl-status, .tl-consent, .tl-legacy { margin-bottom: 1rem; }
.tl-consent { border-left: 4px solid var(--brand); }

/* onboarding steps */
.tl-steps { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .75rem; max-width: 720px; }
.tl-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); }
.tl-step h3 { margin: 0 0 .25rem; font-size: 1rem; }
.tl-step-n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--bg-sunken); color: var(--ink-2); }
.tl-step.is-done .tl-step-n { background: var(--ok-fill); color: #fff; }
.tl-step.is-now { border-color: var(--brand); box-shadow: var(--shadow-s); }
.tl-step.is-now .tl-step-n { background: var(--brand-fill); color: #fff; }

/* lists (intros, staff) */
.tl-list { display: grid; gap: .75rem; }
.tl-intro h3 { margin: 0; }
.tl-msg { white-space: pre-line; background: var(--bg-sunken); padding: .75rem; border-radius: var(--radius-s); }
.tl-contact { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-weight: 600; overflow-wrap: anywhere; }
.tl-staff-filters { gap: .5rem; margin-bottom: 1rem; align-items: center; }
.tl-bulk { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tl-bulk input, .tl-bulk select { width: auto; min-width: 0; }
.tl-note { border-top: 1px solid var(--line); padding-top: .5rem; margin-top: .5rem; }
.tl-note p { margin: 0; white-space: pre-line; }
@media (prefers-reduced-motion: reduce) { .tl-card { transition: none; } .tl-card:hover { transform: none; } }
.tl-staff-filters > select, .tl-staff-filters > .search { width: auto; flex: 1 1 200px; max-width: 320px; }
