/* Career 4B production presentation.
 * Claude Design owns layout, visual language, responsive composition and
 * interaction hierarchy. Career services, markets and lifecycle stay in the
 * existing shared modules. */

:root{
    --career-4b-navy:#0a1526;
    --career-4b-navy-deep:#081326;
    --career-4b-panel:#0c1d34;
    --career-4b-card:#132b4f;
    --career-4b-card-deep:#0d1e3d;
    --career-4b-cyan:#10c4e3;
    --career-4b-cyan-light:#5ef6fb;
    --career-4b-gold:#f2b019;
    --career-4b-workspace:#eef1f7;
    --career-4b-white:#fff;
    --career-4b-ink:#0a1a30;
    --career-4b-muted:#62718a;
    --career-4b-muted-light:#8493a8;
    --career-4b-success:#31d67f;
    --career-4b-danger:#e5484d;
    --career-4b-page-radius:26px;
    --career-4b-card-radius:22px;
    --career-4b-control-radius:13px;
    --career-4b-pill:999px;
}

html,
body{
    min-width:320px;
    background:var(--career-4b-navy-deep);
}

body{
    color:var(--career-4b-ink);
    font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    letter-spacing:0;
}

button,
input,
select,
textarea{
    font:inherit;
    letter-spacing:0;
}

.career-4b-app{
    width:100%;
    min-height:100vh;
    min-height:100dvh;
    display:grid;
    grid-template-columns:250px minmax(0,1fr);
    background:var(--career-4b-workspace);
}

.career-4b-sidebar{
    position:sticky;
    top:0;
    height:100vh;
    height:100dvh;
    z-index:20;
    display:flex;
    flex-direction:column;
    gap:30px;
    overflow:auto;
    border-right:1px solid rgba(255,255,255,.08);
    background:var(--career-4b-navy-deep);
    padding:30px 20px 24px;
    color:var(--career-4b-white);
}

.career-4b-brand{
    min-height:46px;
    display:flex;
    align-items:center;
    gap:11px;
    color:var(--career-4b-white);
    font-family:"Sora",sans-serif;
    font-size:18px;
    font-weight:800;
}

.career-4b-brand img{
    width:36px;
    height:36px;
    border-radius:12px;
    object-fit:contain;
}

.career-4b-sidebar-nav{
    display:grid;
    gap:6px;
}

.career-4b-sidebar-nav a{
    min-height:46px;
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    align-items:center;
    gap:10px;
    border:1px solid transparent;
    border-radius:12px;
    padding:9px 12px;
    color:rgba(255,255,255,.66);
    font-size:13px;
    font-weight:700;
}

.career-4b-sidebar-nav a > span{
    width:28px;
    height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    color:rgba(255,255,255,.74);
    font-size:15px;
}

.career-4b-sidebar-nav a:hover,
.career-4b-sidebar-nav a:focus-visible,
.career-4b-sidebar-nav a.is-active{
    outline:none;
    border-color:rgba(94,246,251,.18);
    background:rgba(16,196,227,.12);
    color:var(--career-4b-white);
}

.career-4b-sidebar-nav a.is-active > span{
    background:var(--career-4b-cyan);
    color:var(--career-4b-navy-deep);
}

.career-4b-sidebar-level{
    min-height:108px;
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    align-items:center;
    gap:10px;
    margin-top:auto;
    border:1px solid rgba(255,255,255,.09);
    border-radius:16px;
    background:rgba(255,255,255,.045);
    padding:14px;
}

.career-4b-sidebar-level-mark{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    background:rgba(242,176,25,.16);
    color:var(--career-4b-gold);
    font-family:"Sora",sans-serif;
    font-size:15px;
    font-weight:800;
}

.career-4b-sidebar-level > span:nth-child(2){
    display:grid;
    gap:3px;
}

.career-4b-sidebar-level strong{
    color:var(--career-4b-white);
    font-size:13px;
}

.career-4b-sidebar-level small{
    color:rgba(255,255,255,.48);
    font-size:12px;
}

.career-4b-sidebar-xp{
    grid-column:1 / -1;
    height:4px;
    overflow:hidden;
    border-radius:var(--career-4b-pill);
    background:rgba(255,255,255,.1);
}

.career-4b-sidebar-xp i{
    width:68%;
    height:100%;
    display:block;
    border-radius:inherit;
    background:var(--career-4b-cyan);
}

.career-4b-content{
    min-width:0;
    min-height:100vh;
    min-height:100dvh;
    background:var(--career-4b-workspace);
}

.career-4b-mobile-header,
.career-4b-telegram-segments,
.career-4b-bottom-nav,
.career-4b-telegram-action{
    display:none;
}

.career-4b-content > .page{
    width:100%;
    max-width:none;
    min-height:100vh;
    margin:0;
    padding:0 0 52px;
    border:0;
    border-radius:0;
    background:var(--career-4b-workspace);
    box-shadow:none;
}

.career-4b-content .top-line,
.career-4b-content .career-title-row{
    display:none;
}

/* The hero is an inset block, not full-bleed chrome: it sits inside the page
 * with padding on every side, so square corners read as a mistake next to the
 * rounded page and cards around it. Same radius token as every other card. */
.career-4b-path-hero{
    min-height:306px;
    position:relative;
    overflow:hidden;
    border-radius:var(--career-4b-card-radius);
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:1fr auto;
    gap:28px 36px;
    background:
        radial-gradient(circle at 72% 22%,rgba(16,196,227,.19),transparent 27%),
        radial-gradient(circle at 37% 110%,rgba(61,95,168,.2),transparent 38%),
        var(--career-4b-navy);
    padding:56px clamp(28px,5vw,72px) 32px;
    color:var(--career-4b-white);
}

/* The dark App Shell band and the dark Career hero read as a single block on
 * mobile and inside Telegram, so the AWARDIQS mark appeared twice on one
 * screen — once in the navigation, once on top of the hero. The navigation
 * keeps the brand; the Career hero carries Career information only.
 * Scoped to Career: career-4b.css is loaded by solo-beta.html alone. */
body.aq2-shell-active .aq2-header-brand,
body.aq2-shell-active .aq2-telegram-brand-logo{
    display:none;
}

@media(max-width:760px){
    body.aq2-shell-active .aq2-header{
        grid-template-columns:minmax(0,1fr);
        grid-template-areas:
            "actions"
            "heading";
    }
}

.career-4b-path-hero::after{
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    width:44%;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--career-4b-cyan-light));
    opacity:.5;
}

.career-4b-hero-summary{
    align-self:center;
    display:grid;
    gap:10px;
}

.career-4b-hero-eyebrow{
    color:var(--career-4b-cyan-light);
    font-size:12px;
    line-height:1.3;
    font-weight:800;
    text-transform:uppercase;
}

.career-4b-hero-summary h1{
    margin:0;
    color:var(--career-4b-white);
    font-family:"Sora",sans-serif;
    font-size:54px;
    line-height:1.05;
    font-weight:800;
    letter-spacing:0;
}

.career-4b-hero-summary p{
    color:rgba(255,255,255,.58);
    font-size:14px;
    line-height:1.45;
    font-weight:600;
}

.career-4b-hero-rating{
    align-self:center;
    display:flex;
    gap:10px;
}

.career-4b-hero-rating > span{
    min-width:96px;
    min-height:72px;
    display:grid;
    align-content:center;
    gap:5px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:15px;
    background:rgba(255,255,255,.07);
    padding:12px 15px;
}

.career-4b-hero-rating small{
    color:rgba(255,255,255,.48);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
}

.career-4b-hero-rating strong{
    color:var(--career-4b-white);
    font-family:"Sora",sans-serif;
    font-size:23px;
    line-height:1;
    font-weight:800;
}

.career-4b-hero-rating .is-level{
    min-width:76px;
    border-color:rgba(242,176,25,.2);
    background:rgba(242,176,25,.09);
}

.career-4b-hero-rating .is-level strong{
    color:var(--career-4b-gold);
}

.career-4b-progress-rail{
    grid-column:1 / -1;
    position:relative;
    display:grid;
    grid-template-columns:repeat(9,minmax(44px,1fr)) 56px;
    align-items:center;
    gap:0;
}

.career-4b-progress-rail::before{
    content:"";
    position:absolute;
    left:17px;
    right:28px;
    top:50%;
    height:2px;
    background:linear-gradient(90deg,var(--career-4b-success) 0 11%,var(--career-4b-cyan) 11% 22%,rgba(255,255,255,.13) 22% 82%,transparent 100%);
    transform:translateY(-50%);
}

.career-4b-progress-rail > button{
    width:44px;
    height:44px;
    padding:0;
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    justify-self:start;
    border:1px solid rgba(255,255,255,.16);
    border-radius:var(--career-4b-pill);
    background:var(--career-4b-panel);
    color:rgba(255,255,255,.42);
    font-size:12px;
    font-weight:800;
    cursor:pointer;
}

.career-4b-progress-rail .is-complete{
    border-color:var(--career-4b-success);
    background:var(--career-4b-success);
    color:var(--career-4b-navy-deep);
}

.career-4b-progress-rail .is-current{
    border:2px solid var(--career-4b-cyan-light);
    background:var(--career-4b-cyan);
    color:var(--career-4b-navy-deep);
    box-shadow:0 0 0 7px rgba(16,196,227,.12),0 0 30px rgba(16,196,227,.35);
}

.career-4b-progress-rail > button[aria-disabled="true"]{
    cursor:not-allowed;
}

.career-4b-progress-rail > button.is-selected{
    box-shadow:0 0 0 3px rgba(94,246,251,.28);
}

.career-4b-progress-rail > button:focus-visible{
    outline:2px solid var(--career-4b-cyan-light);
    outline-offset:3px;
}

.career-4b-progress-rail .is-infinite{
    width:46px;
    border-color:transparent;
    background:transparent;
    color:rgba(94,246,251,.66);
    font-size:22px;
}

.career-4b-content #status{
    max-width:1160px;
    margin:0 auto;
    padding:12px 34px 0;
    color:var(--career-4b-muted);
}

.career-4b-content #status:empty{
    display:none;
}

.career-4b-content #solo-content{
    width:100%;
    max-width:1160px;
    margin:0 auto;
    padding:38px 34px 0;
}

.career-4b-content #solo-content > .career-about,
.career-4b-content #solo-content > .career-top,
.career-4b-content #solo-content > .career-path-panel,
.career-4b-content #solo-content > .career-window-progress{
    display:none;
}

.career-4b-content .career-workspace-v1{
    --aq-surface:var(--career-4b-white);
    --aq-surface-soft:#f5f7fb;
    --aq-ink:var(--career-4b-ink);
    --aq-ink-muted:var(--career-4b-muted);
    --aq-line:#dbe1eb;
    --aq-line-strong:#c5cfdd;
    --aq-primary:var(--career-4b-cyan);
    --aq-primary-soft:#dffaff;
    --aq-live:var(--career-4b-danger);
    --aq-live-soft:#fff0f1;
    --aq-danger:var(--career-4b-danger);
    --aq-danger-soft:#fff0f1;
    --aq-r-card:14px;
    --aq-r-panel:22px;
    --aq-r-pill:999px;
    --aq-shadow:0 18px 42px rgba(12,29,52,.08);
    border:0;
    border-radius:0;
    background:transparent;
    padding:0;
    box-shadow:none;
}

.career-4b-content .career-day-navigation{
    min-width:0;
    border:1px solid rgba(17,17,17,.1);
    border-radius:18px;
    background:#fff;
    padding:8px;
}

.career-4b-content .career-day-list{
    min-width:0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
}

.career-4b-content .career-day-tab{
    min-width:0;
    min-height:76px;
    border:1px solid rgba(17,17,17,.12);
    border-radius:13px;
    background:#f7f7f4;
    color:#111;
    padding:9px 10px;
    display:grid;
    align-content:center;
    gap:3px;
    text-align:left;
    font:inherit;
    cursor:pointer;
}

.career-4b-content .career-day-tab:hover,
.career-4b-content .career-day-tab:focus-visible{
    border-color:rgba(17,17,17,.38);
    background:#fff;
}

.career-4b-content .career-day-tab:focus-visible{
    outline:2px solid rgba(17,17,17,.24);
    outline-offset:2px;
}

.career-4b-content .career-day-tab.is-selected{
    border-color:#111;
    background:#111;
    color:#fff;
}

.career-4b-content .career-day-tab strong,
.career-4b-content .career-day-tab span,
.career-4b-content .career-day-tab small{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
}

.career-4b-content .career-day-tab strong{
    font-size:13px;
    line-height:1.1;
    font-weight:900;
}

.career-4b-content .career-day-tab span{
    font-size:12px;
    line-height:1.15;
    font-weight:780;
}

.career-4b-content .career-day-tab small{
    color:rgba(17,17,17,.58);
    font-size:9px;
    line-height:1.2;
    font-weight:720;
    white-space:nowrap;
}

.career-4b-content .career-day-tab.is-selected small{
    color:rgba(255,255,255,.68);
}

.career-4b-content .career-day-empty{
    min-height:132px;
    border:1px dashed rgba(17,17,17,.2);
    border-radius:18px;
    background:#fff;
    padding:20px;
    display:grid;
    place-content:center;
    gap:6px;
    text-align:center;
}

.career-4b-content .career-day-empty strong{
    font-size:16px;
    line-height:1.2;
}

.career-4b-content .career-day-empty span{
    max-width:420px;
    color:rgba(17,17,17,.62);
    font-size:12px;
    line-height:1.4;
}

/* Slot information is one card, not a stack of loose elements: the same
 * surface, border, radius and padding every other AWARDIQS card uses. */
.career-4b-content .career-slot-summary{
    margin:0 0 18px;
    border:1px solid var(--aq-line,#dbe1eb);
    border-radius:var(--career-4b-card-radius);
    background:var(--career-4b-white);
    padding:20px;
    display:grid;
    gap:8px;
    box-shadow:var(--aq-shadow,0 18px 42px rgba(12,29,52,.08));
}

.career-4b-content .matches-panel-head{
    min-height:44px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin:0;
    padding:0;
}

.career-4b-content .matches-panel-head > span{
    display:flex;
    align-items:baseline;
    gap:12px;
}

.career-4b-content .matches-panel-head h2{
    margin:0;
    color:var(--career-4b-ink);
    font-family:"Sora",sans-serif;
    font-size:25px;
    line-height:1.2;
    font-weight:800;
    text-transform:none;
}

.career-4b-content .matches-panel-head small{
    color:var(--career-4b-muted);
    font-size:12px;
    font-weight:800;
}

.career-4b-content .matches-panel-head .career-summary-open{
    min-height:44px;
    border:1px solid #d8e0eb;
    border-radius:12px;
    background:var(--career-4b-white);
    color:var(--career-4b-ink);
    padding:10px 14px;
}

.career-4b-content #matches-status{
    margin:0;
    color:var(--career-4b-muted);
    font-size:12px;
    line-height:1.4;
}

.career-4b-content .match-list{
    display:grid;
    gap:18px;
}

.career-4b-content .career-slot-navigation{
    display:grid;
    gap:12px;
    border:0;
    border-radius:0;
    background:transparent;
    padding:0;
}

.career-4b-content .career-slot-navigation-head{
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:0;
}

.career-4b-content .career-slot-navigation-head > strong{
    color:var(--career-4b-ink);
    font-family:"Sora",sans-serif;
    font-size:16px;
    font-weight:800;
}

.career-4b-content .career-slot-navigation-actions{
    display:flex;
    gap:8px;
}

.career-4b-content .career-slot-arrow{
    width:44px;
    height:44px;
    min-width:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #d8e0eb;
    border-radius:12px;
    background:var(--career-4b-white);
    color:var(--career-4b-ink);
    font-size:24px;
}

.career-4b-content .career-slot-arrow:disabled{
    opacity:.35;
}

.career-4b-content .career-slot-list{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(176px,1fr);
    gap:10px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    padding:1px 1px 7px;
}

.career-4b-content .career-slot-list::-webkit-scrollbar{
    display:none;
}

.career-4b-content .career-slot-tab{
    min-height:108px;
    display:grid;
    align-content:start;
    gap:10px;
    border:1px solid #dbe1eb;
    border-radius:14px;
    background:rgba(255,255,255,.72);
    color:var(--career-4b-ink);
    padding:12px;
    text-align:left;
}

.career-4b-content .career-slot-tab:hover,
.career-4b-content .career-slot-tab:focus-visible,
.career-4b-content .career-slot-tab.is-selected{
    outline:none;
    border-color:var(--career-4b-cyan);
    background:var(--career-4b-white);
    box-shadow:0 10px 28px rgba(12,29,52,.08);
}

.career-4b-content .career-slot-tab-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
}

.career-4b-content .career-slot-tab-head strong{
    font-family:"Sora",sans-serif;
    font-size:13px;
    font-weight:800;
}

.career-4b-content .career-slot-status{
    min-height:24px;
    display:inline-flex;
    align-items:center;
    border-radius:var(--career-4b-pill);
    background:#edf1f6;
    color:var(--career-4b-muted);
    padding:5px 8px;
    font-size:12px;
    font-weight:700;
}

.career-4b-content .career-slot-status.is-current{
    background:#dffaff;
    color:#067e94;
}

.career-4b-content .career-slot-status.is-completed{
    background:#e6f8ee;
    color:#11814a;
}

.career-4b-content .career-slot-leagues{
    display:grid;
    gap:5px;
}

.career-4b-content .career-slot-league{
    min-width:0;
    display:grid;
    grid-template-columns:21px minmax(0,1fr);
    align-items:center;
    gap:7px;
    color:var(--career-4b-muted);
    font-size:12px;
    line-height:1.3;
    font-weight:650;
}

.career-country-flag{
    width:21px;
    aspect-ratio:4 / 3;
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.16);
    border-radius:3px;
    background:#fff;
    line-height:1;
    flex:0 0 auto;
}

.career-country-flag img{
    width:100%;
    height:100%;
    position:absolute;
    inset:0;
    display:block;
    border-radius:inherit;
    object-fit:contain;
}

.career-country-flag-fallback{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#edf1f6;
    color:var(--career-4b-muted);
    font-size:12px;
    font-weight:800;
}

.career-4b-content .career-slot-position-dots{
    max-width:100%;
    display:flex;
    justify-content:safe center;
    gap:0;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
}

.career-4b-content .career-slot-position-dots::-webkit-scrollbar{display:none}

.career-4b-content .career-slot-position-dots button{
    width:44px;
    height:44px;
    padding:0;
    border:0;
    display:grid;
    place-items:center;
    background:transparent;
    cursor:pointer;
}

.career-4b-content .career-slot-position-dots button::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:var(--career-4b-pill);
    background:#cbd3df;
}

.career-4b-content .career-slot-position-dots button.is-active::before{
    width:22px;
    background:var(--career-4b-cyan);
}

.career-4b-content .career-slot-position-dots button:focus-visible{
    outline:2px solid var(--career-4b-cyan);
    outline-offset:-8px;
}

.career-4b-content .match-day{
    display:grid;
    gap:14px;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}

.career-4b-content .match-day[open]{
    padding:0;
}

.career-4b-content .match-day > summary{
    min-height:102px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 42px;
    align-items:center;
    gap:18px;
    margin:0;
    border:1px solid #dbe1eb;
    border-radius:18px;
    background:var(--career-4b-white);
    padding:17px 20px;
    box-shadow:0 14px 35px rgba(12,29,52,.06);
}

.career-4b-content .match-day[open] > summary{
    margin:0;
}

.career-4b-content .match-day > summary::after{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #dbe1eb;
    border-radius:12px;
    color:var(--career-4b-ink);
}

.career-4b-content .match-day-summary{
    display:grid;
    gap:10px;
}

.career-4b-content .career-slot-panel-topline,
.career-4b-content .career-slot-panel-meta{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.career-4b-content .match-day-kicker{
    color:var(--career-4b-ink);
    font-family:"Sora",sans-serif;
    font-size:16px;
    font-weight:800;
}

.career-4b-content .career-slot-panel-state{
    min-height:26px;
    display:inline-flex;
    align-items:center;
    border-radius:var(--career-4b-pill);
    background:#e0fbff;
    color:#087f94;
    padding:5px 10px;
    font-size:12px;
    font-weight:750;
}

.career-4b-content .career-slot-panel-state.is-completed{
    background:#e8f8ee;
    color:#11814a;
}

.career-4b-content .match-day-title,
.career-4b-content .career-slot-panel-time{
    color:var(--career-4b-muted);
    font-size:12px;
    font-weight:650;
}

.career-4b-content .career-slot-progress{
    min-width:0;
    display:grid;
    grid-template-columns:max-content minmax(140px,1fr);
    align-items:center;
    gap:14px;
}

.career-4b-content .career-slot-progress-label{
    color:var(--career-4b-ink);
    font-size:12px;
    font-weight:750;
}

.career-4b-content .career-slot-progress-bar{
    height:5px;
    overflow:hidden;
    border-radius:var(--career-4b-pill);
    background:#e5eaf1;
}

.career-4b-content .career-slot-progress-bar > span{
    height:100%;
    display:block;
    border-radius:inherit;
    background:var(--career-4b-cyan);
}

.career-4b-content .career-slot-match-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.career-4b-content .match-item{
    min-width:0;
    overflow:hidden;
    border:1px solid #dbe1eb;
    border-radius:16px;
    background:var(--career-4b-white);
    box-shadow:0 12px 30px rgba(12,29,52,.06);
}

.career-4b-content .match-item[open]{
    grid-column:1 / -1;
    border-color:rgba(16,196,227,.32);
    border-radius:var(--career-4b-card-radius);
    background:linear-gradient(145deg,var(--career-4b-card),var(--career-4b-card-deep));
    box-shadow:0 22px 50px rgba(8,19,38,.2);
}

.career-4b-content .match-item > summary{
    min-height:112px;
    display:block;
    border:0;
    background:transparent;
    padding:0;
}

.career-4b-content .match-item > summary.career-match-card-summary{
    min-height:112px;
}

.career-4b-content .match-item > summary::after{
    display:none;
}

.career-4b-content .match-item[open] > summary{
    min-height:0;
}

.career-4b-content .match-item[open] > summary.career-match-card-summary{
    min-height:0;
}

.career-4b-content .career-match-card{
    min-width:0;
    min-height:0;
    width:100%;
    display:grid;
    gap:12px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    padding:14px;
    color:var(--career-4b-ink);
}

.career-4b-content .match-item[open] .career-match-card{
    gap:16px;
    padding:20px 20px 16px;
    color:var(--career-4b-white);
}

.career-4b-content .career-match-card-header{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.career-4b-content .career-match-card-league{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    color:var(--career-4b-muted);
    font-size:12px;
}

.career-4b-content .career-competition-logo,
.career-4b-content .career-competition-logo-fallback{
    width:26px;
    height:26px;
    min-width:26px;
    border-radius:8px;
}

.career-4b-content .career-competition-logo{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#fff;
}

.career-4b-content .career-competition-logo img,
.career-4b-content .career-competition-logo-fallback{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.career-4b-content .career-competition-logo img{
    object-fit:contain;
}

.career-4b-content .career-competition-logo-fallback{
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(17,17,17,.12);
    color:rgba(17,17,17,.72);
    font-size:8px;
    line-height:1;
    font-weight:900;
}

.career-4b-content .career-match-card-competition-copy{
    min-width:0;
    display:grid;
    gap:2px;
}

.career-4b-content .career-match-card-competition-copy small{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:rgba(255,255,255,.58);
    font-size:9px;
    line-height:1.1;
    font-weight:680;
}

.career-4b-content .career-match-card-league strong{
    min-width:0;
    overflow:hidden;
    color:var(--career-4b-ink);
    font-size:12px;
    font-weight:750;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.career-4b-content .match-item[open] .career-match-card-league{
    color:rgba(255,255,255,.55);
}

.career-4b-content .match-item[open] .career-match-card-league strong{
    color:rgba(255,255,255,.76);
}

.career-4b-content .career-match-card-header-meta{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
}

.career-4b-content .career-match-card-kickoff{
    grid-area:auto;
    justify-self:auto;
    color:var(--career-4b-muted);
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}

.career-4b-content .match-item[open] .career-match-card-kickoff{
    color:rgba(255,255,255,.52);
}

.career-4b-content .career-match-card-status{
    min-height:24px;
    max-width:112px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--career-4b-pill);
    background:#edf1f6;
    color:var(--career-4b-muted);
    padding:5px 9px;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
}

.career-4b-content .match-item[open] .career-match-card-status{
    background:rgba(255,255,255,.09);
    color:rgba(255,255,255,.7);
}

.career-4b-content .career-match-card-status.is-live{
    background:var(--career-4b-danger);
    color:var(--career-4b-white);
    box-shadow:0 0 0 4px rgba(229,72,77,.14);
}

.career-4b-content .career-match-card-status.is-finished,
.career-4b-content .career-match-card-status.is-settled{
    background:#dfe5ed;
    color:var(--career-4b-ink);
}

.career-4b-content .career-match-card-body{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:stretch;
    gap:12px;
}

.career-4b-content .career-match-card-main{
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(70px,max-content) minmax(0,1fr);
    grid-template-areas:none;
    align-items:center;
    gap:12px;
}

.career-4b-content .career-match-card-team.is-home,
.career-4b-content .career-match-card-team.is-away,
.career-4b-content .career-match-card-center{
    grid-area:auto;
}

.career-4b-content .career-match-card-team{
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
}

.career-4b-content .career-match-card-team.is-away{
    flex-direction:row-reverse;
    justify-content:flex-start;
    text-align:right;
}

.career-4b-content .career-match-card-team-text{
    min-width:0;
    display:-webkit-box;
    overflow:hidden;
    color:var(--career-4b-ink);
    font-family:"Sora",sans-serif;
    font-size:14px;
    line-height:1.25;
    font-weight:700;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow-wrap:anywhere;
}

.career-4b-content .match-item[open] .career-match-card-team-text{
    color:var(--career-4b-white);
    font-size:18px;
    font-weight:800;
}

.career-4b-content .career-match-card-team-media{
    width:32px;
    height:32px;
    min-width:32px;
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.career-4b-content .match-item[open] .career-match-card-team-media{
    width:54px;
    height:54px;
    min-width:54px;
}

.career-4b-content .career-match-card-flag{
    width:100%;
    height:100%;
    min-width:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #dbe1eb;
    border-radius:12px;
    background:var(--career-4b-white);
    color:var(--career-4b-muted);
    object-fit:contain;
    padding:3px;
}

.career-4b-content .match-item[open] .career-match-card-flag{
    border-color:rgba(255,255,255,.14);
    border-radius:16px;
    background:rgba(255,255,255,.08);
}

.career-4b-content .career-match-card-team-media > img{
    position:absolute;
    inset:0;
}

.career-4b-content .career-match-card-flag.is-code{
    font-family:"Sora",sans-serif;
    font-size:12px;
    font-weight:800;
}

.career-4b-content .career-match-card-center{
    min-width:70px;
    display:grid;
    justify-items:center;
    gap:5px;
}

.career-4b-content .career-match-card-score{
    color:var(--career-4b-ink);
    font-family:"Sora",sans-serif;
    font-size:20px;
    line-height:1;
    font-weight:800;
    white-space:nowrap;
}

.career-4b-content .match-item[open] .career-match-card-score{
    color:var(--career-4b-white);
    font-size:24px;
}

.career-4b-content .career-match-card-score.is-empty{
    color:var(--career-4b-muted-light);
    font-size:16px;
}

.career-4b-content .match-item[open] .career-match-card-score.is-empty{
    color:rgba(255,255,255,.36);
    font-size:18px;
}

.career-4b-content .career-match-card-clock{
    color:var(--career-4b-danger);
    font-size:12px;
    font-weight:800;
}

.career-4b-content .career-match-card-prediction,
.career-4b-content .career-match-card-action{
    min-height:44px;
    justify-self:stretch;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px dashed #cbd4e0;
    border-radius:11px;
    background:#f7f9fc;
    color:var(--career-4b-muted);
    padding:8px 10px;
    font-size:12px;
    font-weight:700;
    text-align:center;
}

.career-4b-content .career-match-card-prediction{
    border-style:solid;
    border-color:#bfeff6;
    background:#eafcff;
    color:#087f94;
}

.career-4b-content .career-match-card-prediction strong{
    color:inherit;
}

/* The eight settlement states, told apart (TASK-163 PHASE G).
 *
 * They already had six tones and eight labels in the view model, and Career 4B
 * threw all of them away: the rule above sets border, background and colour on
 * every prediction pill at the same specificity as `.is-resolved` and later in
 * the cascade, so a win, a loss, a push, a void and an unsettled forecast all
 * rendered as the same flat cyan. The Designer finding that PUSH and VOID were
 * indistinguishable was closed in the database and left open on the screen.
 *
 * Each tone is distinguishable without colour as well as with it — border style
 * carries the distinction a monochrome screen or a colour-blind reader gets,
 * exactly as `is-missing` has always done with its dashed edge. A push returned
 * the stake and a void never happened, so they are not allowed to look alike:
 * one is solid and neutral, the other is dashed.
 *
 * Placed after the base rule and matched at the same specificity plus the state
 * class, so the state always wins without an `!important`. */
.career-4b-content .career-match-card-prediction.is-resolved{
    border-color:var(--career-4b-success);
    background:rgba(49,214,127,.12);
    color:#0f7a49;
}

.career-4b-content .career-match-card-prediction.is-lost{
    border-color:var(--career-4b-danger);
    background:rgba(229,72,77,.1);
    color:#a8272b;
}

/* Ровно по линии. The stake came back because the fact landed on the line —
 * an event, so the border is solid, and a neutral one because nothing was won
 * or lost. */
.career-4b-content .career-match-card-prediction.is-push{
    border-color:var(--career-4b-gold);
    background:rgba(242,176,25,.12);
    color:#8a6206;
}

/* Рынок не состоялся. Nothing happened at all, so the edge is open — the same
 * grammar `is-missing` uses for «прогноз не был сделан». */
.career-4b-content .career-match-card-prediction.is-void{
    border-style:dashed;
    border-color:var(--career-4b-gold);
    background:transparent;
    color:#8a6206;
}

.career-4b-content .career-match-card-prediction.is-pending{
    border-style:solid;
    border-color:#cbd4e0;
    background:#f7f9fc;
    color:var(--career-4b-muted);
}

.career-4b-content .career-match-card-prediction.is-missing{
    border-style:dashed;
    border-color:#cbd4e0;
    background:transparent;
    color:var(--career-4b-muted);
}

.career-4b-content .match-item[open] .career-match-card-prediction,
.career-4b-content .match-item[open] .career-match-card-action{
    display:none;
}

.career-4b-content .career-match-card-runtime{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}

.career-4b-content .career-match-card-runtime-side{
    display:flex;
    align-items:center;
    gap:4px;
    flex-wrap:wrap;
}

.career-4b-content .career-match-card-runtime-side.is-away{
    justify-content:flex-end;
}

.career-4b-content .career-match-card-stat{
    min-height:24px;
    display:inline-flex;
    align-items:center;
    gap:4px;
    border:1px solid #dbe1eb;
    border-radius:var(--career-4b-pill);
    background:#f7f9fc;
    color:var(--career-4b-muted);
    padding:4px 7px;
    font-size:12px;
    font-weight:700;
}

.career-4b-content .match-item[open] .career-match-card-stat{
    border-color:rgba(255,255,255,.1);
    background:rgba(255,255,255,.05);
    color:rgba(255,255,255,.62);
}

.career-4b-content .career-match-card-markets,
.career-4b-content .career-match-card-meta{
    color:var(--career-4b-muted);
    font-size:12px;
    font-weight:650;
}

.career-4b-content .career-match-card-markets{
    justify-self:center;
}

.career-4b-content .match-item[open] .career-match-card-markets,
.career-4b-content .match-item[open] .career-match-card-meta{
    display:none;
}

.career-4b-content .match-card.match-action-area{
    display:grid;
    gap:16px;
    margin:0;
    border:0;
    border-radius:0;
    background:transparent;
    padding:0 20px 22px;
    color:var(--career-4b-white);
    box-shadow:none;
}

/* The row adapts to what is in it.
 *
 * It was a two-column grid built for the role tile plus AI Lab. TASK-150
 * removed the role tile — it led nowhere — and the single remaining child
 * inherited the wide first column: on desktop AI Lab stretched to 835px of a
 * 1027px row and read as an empty bar with a label in it, while the 180px
 * column beside it stayed empty. Sizing by content keeps the control the size
 * of a control however many of them the card has. */
.career-4b-content .career-match-card-tools{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-items:stretch;
    gap:12px;
}

.career-4b-content .career-match-card-tools > *{
    flex:0 1 auto;
    min-width:180px;
}

.career-4b-content .career-match-card-role{
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px dashed rgba(255,255,255,.2);
    border-radius:14px;
    color:rgba(255,255,255,.5);
    padding:10px 14px;
    font-size:12px;
    font-weight:650;
}

.career-4b-content .career-ai-lab{
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:1px solid rgba(94,246,251,.46);
    border-radius:14px;
    background:linear-gradient(135deg,rgba(16,196,227,.22),rgba(94,246,251,.05));
    color:var(--career-4b-white);
    padding:9px 15px;
    box-shadow:inset 0 0 24px rgba(16,196,227,.08);
}

.career-4b-content .career-ai-lab:hover,
.career-4b-content .career-ai-lab:focus-visible{
    outline:none;
    border-color:var(--career-4b-cyan-light);
    background:linear-gradient(135deg,rgba(16,196,227,.32),rgba(94,246,251,.09));
}

.career-4b-content .career-ai-lab.is-disabled{
    opacity:.5;
}

.career-4b-content .career-ai-lab-mark{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    background:linear-gradient(135deg,var(--career-4b-cyan),var(--career-4b-cyan-light));
    color:var(--career-4b-navy-deep);
    font-family:"Sora",sans-serif;
    font-size:12px;
    font-weight:800;
    box-shadow:0 0 18px rgba(16,196,227,.4);
}

.career-4b-content .career-ai-lab > span:last-child{
    display:grid;
    gap:2px;
}

.career-4b-content .career-ai-lab strong{
    font-family:"Sora",sans-serif;
    font-size:13px;
    font-weight:800;
}

.career-4b-content .career-ai-lab small{
    color:rgba(255,255,255,.55);
    font-size:12px;
}

.career-4b-content .market-list{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
}

.career-4b-content .market-category-shell{
    display:grid;
    gap:12px;
}

.career-4b-content .market-primary{
    display:grid;
    gap:10px;
    border:0;
    background:transparent;
    padding:0;
}

.career-4b-content .market-line-row{
    display:grid;
    gap:8px;
    border:0;
    border-radius:14px;
    background:rgba(255,255,255,.035);
    padding:0;
}

.career-4b-content .market-result-row{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
}

.career-4b-content .market-result-row .market-outcome-control{
    align-items:center;
    justify-items:center;
    text-align:center;
}

.career-4b-content .market-result-row .market-outcome-label,
.career-4b-content .market-result-row .market-outcome-bottom{
    width:100%;
    justify-self:stretch;
    text-align:center;
}

.career-4b-content .market-result-row .market-outcome-bottom{
    justify-content:center;
}

.career-4b-content .market-line-track{
    display:grid;
    grid-template-columns:44px minmax(120px,1fr) minmax(72px,max-content) minmax(120px,1fr) 44px;
    align-items:stretch;
    gap:8px;
}

.career-4b-content .market-line-ai-slot{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    pointer-events:none;
    transform:translateY(4px);
    transition:opacity .18s ease,transform .18s ease;
}

.career-4b-content .market-line-ai-slot.is-contextual-visible{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
}

.career-4b-content .market-outcome-control{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    min-height:64px;
    display:grid;
    grid-template-rows:auto 1px auto;
    align-content:center;
    gap:6px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    background:rgba(255,255,255,.055);
    color:var(--career-4b-white);
    padding:9px 12px;
    text-align:center;
}

.career-4b-content .market-outcome-control > *{
    position:relative;
    z-index:1;
}

.career-4b-content button.market-outcome-control{
    cursor:pointer;
}

.career-4b-content button.market-outcome-control:hover,
.career-4b-content button.market-outcome-control:focus-visible{
    outline:none;
    border-color:var(--career-4b-cyan);
    background:rgba(16,196,227,.12);
}

.career-4b-content .market-outcome-control.is-selected{
    border-color:var(--career-4b-cyan-light);
    background:var(--career-4b-cyan);
    color:var(--career-4b-navy-deep);
    box-shadow:0 0 0 3px rgba(16,196,227,.14);
}

.career-4b-content .market-outcome-control.is-selected.ai-with{
    background:var(--career-4b-cyan);
}

.career-4b-content .market-outcome-control.is-selected.ai-with::before{
    content:"";
    position:absolute;
    inset:-18px -12px -18px 42%;
    z-index:0;
    background:url("design/awardiqs-canonical-logo.png?v=1.1.346") left center / 132px auto no-repeat;
    opacity:.13;
    pointer-events:none;
}

.career-4b-content .market-outcome-control.is-selected.ai-against{
    border-color:var(--career-4b-gold);
    background:var(--career-4b-gold);
}

.career-4b-content .market-outcome-control.is-selected.ai-against::before{
    content:"";
    position:absolute;
    inset:-40% auto -40% -34%;
    z-index:0;
    width:24%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.36),transparent);
    transform:skewX(-14deg);
    animation:career4bAiDecisionSweep 3.4s ease-in-out infinite;
    pointer-events:none;
}

.career-4b-content .market-outcome-control.is-selected .ai-outcome-marker{
    border-color:rgba(8,19,38,.24);
    background:rgba(8,19,38,.1);
    color:var(--career-4b-navy-deep);
}

@keyframes career4bAiDecisionSweep{
    0%,52%{left:-34%;opacity:0}
    62%{opacity:1}
    82%,100%{left:118%;opacity:0}
}

.career-4b-content .market-outcome-divider{
    display:block;
    width:34px;
    height:1px;
    justify-self:center;
    background:rgba(255,255,255,.18);
}

.career-4b-content .market-outcome-control.is-selected .market-outcome-divider{
    background:rgba(8,19,38,.22);
}

.career-4b-content .market-outcome-label{
    color:rgba(255,255,255,.65);
    font-size:12px;
    font-weight:700;
}

.career-4b-content .market-outcome-control.is-selected .market-outcome-label{
    color:rgba(8,19,38,.68);
}

.career-4b-content .market-line-odds{
    color:var(--career-4b-white);
    font-family:"Sora",sans-serif;
    font-size:19px;
    line-height:1;
    font-weight:800;
}

.career-4b-content .market-outcome-control.is-selected .market-line-odds{
    color:var(--career-4b-navy-deep);
}

.career-4b-content .market-line-center{
    min-height:48px;
    align-self:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.1);
    border-radius:var(--career-4b-pill);
    background:rgba(255,255,255,.04);
    color:rgba(255,255,255,.7);
    padding:8px 10px;
    font-size:12px;
    font-weight:700;
}

.career-4b-content .market-line-center-title,
.career-4b-content .market-line-center-subtitle{
    font-size:12px;
}

.career-4b-content .market-tabs{
    display:flex;
    gap:8px;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:2px;
}

.career-4b-content .market-tabs::-webkit-scrollbar{
    display:none;
}

.career-4b-content .market-tab{
    min-width:max-content;
    min-height:44px;
    flex:1 0 auto;
    border:1px solid rgba(255,255,255,.11);
    border-radius:12px;
    background:rgba(255,255,255,.05);
    color:rgba(255,255,255,.68);
    padding:9px 14px;
    font-size:12px;
    font-weight:750;
}

.career-4b-content .market-tab:hover:not(:disabled),
.career-4b-content .market-tab:focus-visible,
.career-4b-content .market-tab.is-active{
    outline:none;
    border-color:rgba(94,246,251,.4);
    background:rgba(16,196,227,.13);
    color:var(--career-4b-white);
}

.career-4b-content .market-tab:disabled{
    cursor:not-allowed;
    color:rgba(255,255,255,.35);
}

.career-4b-content .market-category-panel{
    display:grid;
    gap:9px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    background:rgba(3,11,24,.18);
    padding:12px;
}

.career-4b-content .market-category-panel[hidden]{
    display:none;
}

.career-4b-content .market-subgroup{
    display:grid;
    gap:9px;
}

.career-4b-content .market-subgroup-title{
    margin:0;
    color:rgba(255,255,255,.56);
    font-size:11px;
    line-height:1.2;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.career-4b-content .market-line-ai{
    width:44px;
    min-width:44px;
    min-height:44px;
    border:1px solid rgba(94,246,251,.42);
    border-radius:12px;
    background:rgba(16,196,227,.14);
    color:var(--career-4b-cyan-light);
    font-family:"Sora",sans-serif;
    font-size:12px;
    font-weight:800;
}

.career-4b-content .market-line-ai:hover,
.career-4b-content .market-line-ai:focus-visible{
    outline:none;
    border-color:var(--career-4b-cyan-light);
    background:var(--career-4b-cyan);
    color:var(--career-4b-navy-deep);
}

.career-4b-content .market-line-ai.ai-with{
    border-color:var(--career-4b-cyan-light);
    background:var(--career-4b-cyan);
    color:var(--career-4b-navy-deep);
}

.career-4b-content .market-line-ai.ai-against{
    border-color:var(--career-4b-gold);
    background:var(--career-4b-gold);
    color:var(--career-4b-navy-deep);
}

.career-4b-content .match-save-status{
    min-height:20px;
    margin:0;
    color:rgba(255,255,255,.65);
    font-size:12px;
    line-height:1.4;
}

.career-4b-content .match-save-status.error{
    color:#ff9da1;
}

.career-4b-content .prediction-status-pick,
.career-4b-content .prediction-fact{
    border:1px solid rgba(255,255,255,.1);
    border-radius:14px;
    background:rgba(255,255,255,.05);
    color:var(--career-4b-white);
}

.career-4b-content .career-action-info,
.career-4b-content .career-next-stage-preview,
.career-4b-content .career-lifecycle-overview{
    border:1px solid #dbe1eb;
    border-radius:16px;
    background:rgba(255,255,255,.72);
    color:var(--career-4b-ink);
    box-shadow:none;
}

.career-4b-content .quick-ai-overlay{
    background:rgba(8,19,38,.72);
    backdrop-filter:blur(12px);
}

.career-4b-content .quick-ai-panel{
    border:1px solid #dbe1eb;
    border-radius:22px;
    background:var(--career-4b-white);
    color:var(--career-4b-ink);
    box-shadow:0 26px 80px rgba(8,19,38,.28);
}

.career-4b-content .quick-ai-option{
    min-height:72px;
    border-color:#dbe1eb;
    border-radius:14px;
    background:#f6f8fb;
    color:var(--career-4b-ink);
}

.career-4b-content .quick-ai-option.is-primary{
    border-color:var(--career-4b-cyan);
    background:#e4fbff;
    color:var(--career-4b-ink);
}

@media(min-width:901px){
    .career-4b-content .career-slot-list{
        grid-auto-columns:minmax(190px,1fr);
    }
}

@media(max-width:900px){
    .career-4b-app{
        display:block;
    }

    .career-4b-sidebar{
        display:none;
    }

    .career-4b-mobile-header{
        min-height:64px;
        display:grid;
        grid-template-columns:44px minmax(0,1fr) 44px;
        align-items:center;
        gap:10px;
        background:var(--career-4b-navy-deep);
        padding:10px 18px;
        color:var(--career-4b-white);
    }

    .career-4b-mobile-header strong{
        text-align:center;
        font-family:"Sora",sans-serif;
        font-size:15px;
        font-weight:800;
    }

    .career-4b-mobile-header a{
        width:44px;
        height:44px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:12px;
        color:var(--career-4b-white);
        font-size:22px;
    }

    .career-4b-path-hero{
        min-height:252px;
        padding:32px 24px 26px;
    }

    .career-4b-hero-summary h1{
        font-size:36px;
    }

    .career-4b-content #solo-content{
        padding:28px 20px 96px;
    }

    .career-4b-bottom-nav{
        min-height:68px;
        position:fixed;
        right:16px;
        bottom:14px;
        left:16px;
        z-index:40;
        display:grid;
        grid-template-columns:repeat(5,minmax(0,1fr));
        gap:2px;
        border:1px solid rgba(255,255,255,.1);
        border-radius:18px;
        background:rgba(10,21,38,.96);
        padding:7px;
        box-shadow:0 18px 46px rgba(8,19,38,.28);
        backdrop-filter:blur(18px);
    }

    .career-4b-bottom-nav a{
        min-width:0;
        min-height:52px;
        display:grid;
        place-items:center;
        align-content:center;
        gap:3px;
        border-radius:12px;
        color:rgba(255,255,255,.55);
        font-size:12px;
        font-weight:650;
    }

    .career-4b-bottom-nav a span{
        font-size:16px;
    }

    .career-4b-bottom-nav a.is-active{
        background:rgba(16,196,227,.14);
        color:var(--career-4b-cyan-light);
    }
}

@media(max-width:640px){
    .career-4b-path-hero{
        min-height:230px;
        grid-template-columns:minmax(0,1fr) auto;
        gap:20px 12px;
        padding:28px 18px 24px;
    }

    .career-4b-hero-eyebrow{
        font-size:12px;
    }

    .career-4b-hero-summary h1{
        font-size:29px;
    }

    .career-4b-hero-summary p{
        font-size:12px;
    }

    .career-4b-hero-rating{
        gap:6px;
    }

    .career-4b-hero-rating > span{
        min-width:65px;
        min-height:62px;
        padding:10px;
    }

    .career-4b-hero-rating small{
        font-size:12px;
    }

    .career-4b-hero-rating strong{
        font-size:18px;
    }

    .career-4b-progress-rail{
        grid-template-columns:repeat(9,44px) 48px;
        overflow-x:auto;
        scrollbar-width:none;
        padding:7px 4px;
    }

    .career-4b-progress-rail::-webkit-scrollbar{
        display:none;
    }

    .career-4b-progress-rail::before{
        width:390px;
        right:auto;
    }

    .career-4b-content #status{
        padding:10px 16px 0;
    }

    .career-4b-content #solo-content{
        padding:22px 14px 96px;
    }

    .career-4b-content .career-slot-summary{
        margin-bottom:14px;
        padding:14px;
    }

    .career-4b-content .matches-panel-head h2{
        font-size:19px;
    }

    .career-4b-content .matches-panel-head > span{
        gap:8px;
    }

    .career-4b-content .career-slot-navigation{
        gap:9px;
    }

    .career-4b-content .career-slot-list{
        grid-auto-columns:minmax(154px,78vw);
    }

    .career-4b-content .career-slot-tab{
        min-height:104px;
    }

    .career-4b-content .match-day > summary{
        min-height:98px;
        grid-template-columns:minmax(0,1fr) 40px;
        gap:10px;
        border-radius:16px;
        padding:15px;
    }

    .career-4b-content .career-slot-panel-topline,
    .career-4b-content .career-slot-panel-meta{
        align-items:flex-start;
        gap:10px;
    }

    .career-4b-content .career-slot-panel-meta{
        flex-wrap:wrap;
    }

    .career-4b-content .career-slot-progress{
        grid-template-columns:max-content minmax(80px,1fr);
        gap:10px;
    }

    .career-4b-content .career-slot-match-grid{
        grid-template-columns:1fr;
    }

    .career-4b-content .match-item[open]{
        grid-column:1;
    }

    .career-4b-content .career-match-card{
        padding:12px;
    }

    .career-4b-content .match-item[open] .career-match-card{
        padding:16px 14px 14px;
    }

    .career-4b-content .career-match-card-header{
        align-items:flex-start;
    }

    .career-4b-content .career-match-card-header-meta{
        flex-wrap:wrap;
    }

    .career-4b-content .career-match-card-main{
        grid-template-columns:minmax(0,1fr) minmax(62px,max-content) minmax(0,1fr);
        gap:7px;
    }

    .career-4b-content .career-match-card-team{
        flex-direction:column;
        gap:6px;
        text-align:center;
    }

    .career-4b-content .career-match-card-team.is-away{
        flex-direction:column;
        justify-content:center;
        text-align:center;
    }

    .career-4b-content .career-match-card-team-text{
        font-size:12px;
    }

    .career-4b-content .match-item[open] .career-match-card-team-text{
        font-size:14px;
    }

    .career-4b-content .match-item[open] .career-match-card-team-media{
        width:46px;
        height:46px;
        min-width:46px;
    }

    .career-4b-content .career-match-card-tools{
        gap:8px;
    }

    .career-4b-content .career-match-card-tools > *{
        min-width:142px;
    }

    .career-4b-content .career-match-card-role,
    .career-4b-content .career-ai-lab{
        min-height:48px;
        padding:8px 10px;
    }

    .career-4b-content .career-match-card-role{
        justify-content:flex-start;
    }

    .career-4b-content .career-ai-lab-mark{
        width:30px;
        height:30px;
    }

    .career-4b-content .market-line-track{
        grid-template-columns:44px minmax(86px,1fr) minmax(60px,max-content) minmax(86px,1fr) 44px;
        gap:5px;
    }

    .career-4b-content .market-outcome-control{
        min-height:58px;
        padding:8px 7px;
    }

    .career-4b-content .market-line-odds{
        font-size:17px;
    }

    .career-4b-content .market-tabs{
        margin-right:-6px;
    }
}

body.is-awardiqs-telegram{
    background:var(--career-4b-navy-deep);
}

body.is-awardiqs-telegram .telegram-shell-nav{
    min-height:60px!important;
    border:0!important;
    background:var(--career-4b-navy-deep)!important;
    box-shadow:none!important;
    color:var(--career-4b-white)!important;
}

body.is-awardiqs-telegram .telegram-shell-back,
body.is-awardiqs-telegram .telegram-shell-home{
    min-height:44px!important;
    border-color:rgba(255,255,255,.12)!important;
    background:rgba(255,255,255,.05)!important;
    color:var(--career-4b-white)!important;
}

body.is-awardiqs-telegram .telegram-shell-title{
    color:var(--career-4b-white)!important;
    font-family:"Sora",sans-serif!important;
    font-size:14px!important;
}

body.is-awardiqs-telegram .career-4b-mobile-header,
body.is-awardiqs-telegram .career-4b-bottom-nav{
    display:none;
}

body.is-awardiqs-telegram .career-4b-telegram-segments{
    min-height:56px;
    display:grid;
    grid-template-columns:repeat(4,minmax(max-content,1fr));
    gap:6px;
    overflow-x:auto;
    background:var(--career-4b-navy-deep);
    padding:8px 12px 10px;
}

body.is-awardiqs-telegram .career-4b-telegram-segments a{
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--career-4b-pill);
    background:rgba(255,255,255,.055);
    color:rgba(255,255,255,.65);
    padding:8px 12px;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}

body.is-awardiqs-telegram .career-4b-telegram-segments a.is-active{
    border-color:rgba(16,196,227,.35);
    background:rgba(16,196,227,.18);
    color:var(--career-4b-white);
}

body.is-awardiqs-telegram .career-4b-path-hero{
    min-height:206px;
    padding-top:24px;
}

body.is-awardiqs-telegram .career-4b-content #solo-content{
    padding-bottom:102px;
}

body.is-awardiqs-telegram .career-4b-telegram-action{
    min-height:54px;
    position:fixed;
    right:12px;
    bottom:calc(var(--awardiqs-tg-safe-bottom,10px) + 10px);
    left:12px;
    z-index:45;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:14px;
    background:var(--career-4b-cyan);
    color:var(--career-4b-navy-deep);
    padding:12px 18px;
    font-family:"Sora",sans-serif;
    font-size:13px;
    font-weight:800;
    box-shadow:0 12px 34px rgba(16,196,227,.32);
}

body.is-awardiqs-telegram.has-telegram-main-button .career-4b-telegram-action{
    display:none;
}

@media(max-width:420px){
    .career-4b-content .career-day-navigation{
        padding:6px;
    }

    .career-4b-content .career-day-list{
        gap:5px;
    }

    .career-4b-content .career-day-tab{
        min-height:72px;
        padding:7px 6px;
        text-align:center;
    }

    .career-4b-content .career-day-tab strong{
        font-size:11px;
    }

    .career-4b-content .career-day-tab span{
        font-size:10px;
    }

    .career-4b-content .career-day-tab small{
        font-size:8px;
    }

    .career-4b-content .career-match-card-tools > *{
        flex:1 1 100%;
    }

    .career-4b-content .market-line-track{
        grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);
        grid-template-areas:
            "left center right"
            "ai-left . ai-right";
        gap:6px;
    }

    .career-4b-content .market-line-outcome-slot.is-left{
        grid-area:left;
    }

    .career-4b-content .market-line-outcome-slot.is-right{
        grid-area:right;
    }

    .career-4b-content .market-line-center{
        grid-area:center;
    }

    .career-4b-content .market-line-ai-slot.is-left{
        grid-area:ai-left;
    }

    .career-4b-content .market-line-ai-slot.is-right{
        grid-area:ai-right;
    }

    .career-4b-content .market-line-ai-slot{
        min-height:44px;
    }

    .career-4b-content .market-line-ai-slot.is-left{
        justify-content:flex-start;
    }

    .career-4b-content .market-line-ai-slot.is-right{
        justify-content:flex-end;
    }

    .career-4b-content .market-result-row{
        gap:6px;
    }

    .career-4b-content .market-tab{
        min-height:44px;
        padding-inline:12px;
    }
}

@media(prefers-reduced-motion:reduce){
    .career-4b-content .market-line-ai-slot{
        transition:none;
    }
}

/* ============================================================
 * TASK-124 · Universal market card
 *
 * The markup these style is produced by career-universal-market-renderer.js,
 * which is typed by outcome schema and knows no market. So these rules are
 * typed the same way: there is no selector here for corners, cards, handicaps
 * or anything else a catalog might add later. A new supported market inherits
 * this appearance without a line of CSS.
 *
 * The ОДИН УРОВЕНЬ level map the renderer documents is what the visual weight
 * follows. Level 1, the category, is a quiet heading. Level 2, the market and
 * its line, describes and does not act. Level 3, the outcomes, is the only
 * thing that looks pressable. The state caption is a detail under level 3 and
 * must never compete with a price.
 * ============================================================ */

/* Vertical rhythm, rescaled with the controls (TASK-154).
 *
 * Spacing separates by contrast with what it surrounds, not by an absolute
 * number. Once the outcome came down from 48px to 30px, an 8px gap between rows
 * read as the same distance a 12px gap used to — the rows started grouping with
 * the wrong neighbours. So the whole scale steps down together: 8 → 6
 * between siblings of different kinds, 6 → 4 between siblings of the same kind.
 * The hierarchy is the ratio, and the ratio is what is preserved here. */
.career-4b-content .aq-market-category{
    display:grid;
    gap:6px;
    margin-block:16px 0;
}

/* Level 1 — summary. */
.career-4b-content .aq-market-category-title{
    margin:0;
    color:var(--career-4b-muted-light);
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.career-4b-content .aq-market-row{
    display:grid;
    gap:4px;
}

/* A two-sided market reads across: «Меньше» — what is forecast — «Больше».
 *
 * The line used to sit in a heading above the outcomes and cost the row an
 * extra 26px for one number. In the middle it costs nothing and says the same
 * thing, in the shape a scoreboard already taught the user (TASK-151).
 *
 * That centre reserves 44px rather than 56 (TASK-154). It only ever holds a
 * line — «2.5», «7.5», «12.5» — which needs 27px at its own size, so the extra
 * 12px were paid by the two controls beside it. At 390 those 12px are the
 * difference between «Меньше 1.89» on one line and on two. */
.career-4b-content .aq-market-row.is-centred > .aq-market-outcomes{
    grid-template-columns:minmax(0,1fr) minmax(44px,max-content) minmax(0,1fr);
    align-items:center;
}

.career-4b-content .aq-market-center{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    padding:0 4px;
    color:var(--career-4b-muted-light);
    font-size:12px;
    font-weight:700;
    text-align:center;
}

/* The line keeps its container's 12px rather than overriding to 13 (TASK-154
 * review). Inside a centred row the line sits between two 14px prices, and 13
 * against 14 is not a step the eye can read as hierarchy — it reads as one of
 * them being wrong. Weight already says «this is the subject»; the size step
 * down to 12 is what says it is not the answer. It also returns the markets
 * zone to a 10 / 12 / 14 ladder in the one place that broke it. */
.career-4b-content .aq-market-center .aq-market-line{
    background:none;
    padding:0;
    color:inherit;
    font-weight:800;
}

/* Level 2 — detail. The line is its own element (Checkpoint C1), so 8.5 and
 * 12.5 lay out identically and every point-based market shares one schema. */
.career-4b-content .aq-market-heading{
    display:flex;
    align-items:baseline;
    gap:8px;
    min-width:0;
}

.career-4b-content .aq-market-title{
    color:rgba(255,255,255,.72);
    font-size:13px;
    font-weight:700;
    min-width:0;
    overflow-wrap:anywhere;
}

.career-4b-content .aq-market-line{
    flex:none;
    padding:2px 8px;
    border-radius:999px;
    background:rgba(255,255,255,.07);
    color:var(--career-4b-white);
    font-size:12px;
    font-weight:800;
    font-variant-numeric:tabular-nums;
}

/* Level 3 — action. Equal columns rather than a fixed count: a two-way market
 * and a three-way one are the same rule, which is what keeps the renderer free
 * of a branch per schema. */
.career-4b-content .aq-market-outcomes{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(0,1fr));
    gap:6px;
}

/* Denser by design (TASK-151, tightened by TASK-154).
 *
 * Two storeys were what the height cost. Stacking the label over the price
 * bought two text boxes, a gap and symmetric padding for a control that says
 * one thing — «П1, 2.45» — and the 48px that produced is a number no padding
 * change could have reached. Laid out on one line the same statement fits 30px,
 * measured across 320, 390, 430 and desktop.
 *
 * One line is the rule, not a guarantee the geometry can always keep. At 320
 * the column is 57px and the price alone is 32 of them, so no label fits beside
 * it at any legible size — measured, not assumed. Hence the wrap: where the
 * width is there the control reads across, and where it is not the label steps
 * onto a second line by itself, per control, with no breakpoint deciding it.
 *
 * That second line costs nothing, which is the whole point. The 48px this rule
 * replaces came from padding and a gap around two loose text boxes, not from
 * the two lines themselves; with the padding gone and the line heights pinned,
 * 10px over 14px measures 27px and the control still lands on its 30px floor.
 * So the compaction holds at every width, and only the reading direction gives
 * way at the narrowest one. */
.career-4b-content .aq-market-outcome{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    align-content:center;
    justify-content:center;
    column-gap:4px;
    row-gap:0;
    min-height:30px;
    min-width:0;
    /* The visual box IS the tap target, and that was measured rather than
     * assumed (TASK-154, Product Review).
     *
     * Extending it into the 4px between rows was tried and removed. The gap
     * gives each neighbour 2px, so they meet exactly — in theory. In the
     * browser, rows land on fractional pixels and the lower control paints its
     * extension over the upper control's, which measured 32px instead of 34px
     * and, at 390px and in Telegram, took the extension away from ten controls
     * entirely. A tap area that exists at some widths and not others is worse
     * than none: it makes the control's edge unpredictable, and an overlap
     * hands the press to the wrong market.
     *
     * What holds instead is the geometry: 30px clears the WCAG 2.2 AA §2.5.8
     * minimum of 24px, and the target is a full grid column wide — 57px on a
     * 320px phone, 253px on desktop. Fitts's law is about area, and this
     * control has more of it than the 44px square the old floor imagined.
     *
     * 4px of side padding, not 6, and the reason is the 320px column (TASK-154
     * review). The price never shrinks and never wraps, by design — so the inner
     * box has to hold the widest one the market can produce. At 320 that box was
     * 42.7px against a five-character «26.00» measuring 42.7px: an outsider
     * price did not break the control, it silently ate the whole padding, and a
     * six-character one overran the inner box by 9.5px. Two pixels a side buy
     * 4px of inner width at every viewport and cost nothing anywhere, because
     * the content is centred and the tap target is the grid column. */
    padding:0 4px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:10px;
    background:rgba(255,255,255,.055);
    color:var(--career-4b-white);
    text-align:center;
    cursor:pointer;
}

.career-4b-content .aq-market-outcome:hover:not(:disabled),
.career-4b-content .aq-market-outcome:focus-visible{
    outline:none;
    border-color:var(--career-4b-cyan);
    background:rgba(16,196,227,.12);
}

.career-4b-content .aq-market-outcome:focus-visible{
    outline:2px solid var(--career-4b-cyan-light);
    outline-offset:2px;
}

/* Armed, not saved (TASK-156).
 *
 * Outline, never fill. The fill is the saved forecast's entire vocabulary on a
 * 30px control — it is how «this is mine» reads at a glance — so an unsaved
 * position that borrowed it would be claiming a forecast the server does not
 * hold. What is left is the edge, and one 1px border is not enough to survive
 * on this background, so the ring is doubled inward and echoed outward: the
 * inset stroke thickens the outline without moving the box, the outer glow
 * separates it from the neighbouring controls.
 *
 * Both halves are box-shadow rather than border width or padding, and that is
 * the point: the control's 30px floor and its grid column width are load-bearing
 * measurements, and a shadow paints outside layout entirely — it cannot grow the
 * control, shift the row, or push the card sideways at 320px.
 *
 * Declared before `.is-selected` so that, at equal specificity, the saved state
 * wins if the two ever meet. They do not meet by design — the card clears the
 * armed position the moment a save lands — but the ordering makes that a
 * cosmetic detail rather than a dependency. */
.career-4b-content .aq-market-outcome.is-preselected{
    border-color:var(--career-4b-cyan-light);
    box-shadow:inset 0 0 0 1px var(--career-4b-cyan-light),0 0 0 2px rgba(16,196,227,.16);
}

/* The label lifts out of its resting 62% grey. Colour alone would be a weak
 * signal on a dark card; combined with the ring it makes the armed control
 * legible as a state rather than as a hover that stayed behind. */
.career-4b-content .aq-market-outcome.is-preselected .aq-market-outcome-label{
    color:rgba(255,255,255,.86);
}

/* The chosen outcome on a 30px control.
 *
 * A fill states «this one» through area, and the compaction took 37% of that
 * area away — so the ring around it is what carries the difference now, and it
 * is deliberately stronger than it was at 48px rather than merely inherited. */
.career-4b-content .aq-market-outcome.is-selected{
    border-color:var(--career-4b-cyan-light);
    background:var(--career-4b-cyan);
    color:var(--career-4b-navy-deep);
    box-shadow:0 0 0 2px rgba(16,196,227,.30);
}

/* A control that cannot be pressed must not look pressable. */
.career-4b-content .aq-market-outcome:disabled{
    cursor:default;
    opacity:.55;
}

/* Pinned line heights, because the 30px floor is only reachable while the two
 * lines stay tight: at the browser's default leading the same two texts measure
 * 31px and every control on a 320 screen would sit a pixel over its target.
 *
 * The label yields width before the price does, and yields it by clipping — a
 * shortened «Меньше» still reads, a «Меньше» broken across lines does not.
 * The whole label moving to its own line is the wrap's job; breaking one word
 * across two is nobody's. */
.career-4b-content .aq-market-outcome-label{
    flex:0 1 auto;
    min-width:0;
    overflow:hidden;
    color:rgba(255,255,255,.62);
    font-size:10px;
    line-height:1.1;
    font-weight:700;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.career-4b-content .aq-market-outcome.is-selected .aq-market-outcome-label{
    color:rgba(8,19,38,.78);
}

/* 14px against a 10px label. The price stays what the eye lands on through the
 * 1.4× size step and the heavier weight, not through absolute size — and the
 * two pixels given up here are what let «Меньше 1.89» hold one line at 390
 * instead of two. It never shrinks and never yields width, because the label
 * losing a character is a cosmetic loss and the price losing one is a wrong
 * number. */
.career-4b-content .aq-market-outcome-odds{
    flex:0 0 auto;
    font-size:14px;
    line-height:1.15;
    font-weight:800;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

.career-4b-content .aq-market-outcome-odds.is-unavailable{
    color:var(--career-4b-muted-light);
}

/* Detail — state. Sits under the outcomes, never beside the market title. */
.career-4b-content .aq-market-odds-note{
    margin:0;
    color:var(--career-4b-muted-light);
    font-size:11px;
    font-weight:600;
}

/* «Коэффициент пока не пришёл» is a different statement from «коэффициент на
 * момент прогноза», so it does not read as the same quiet aside: it explains a
 * row the user cannot press, and a caption the same weight as the frozen-price
 * note would leave the dash unexplained again. */
.career-4b-content .aq-market-odds-note.is-unavailable{
    /* Lighter than the note beside it, not darker. The first attempt reached
     * for `--career-4b-muted` to make the caption more prominent and produced
     * 2.86:1 against the open card's navy — measured in the browser, not
     * guessed. The card is dark, so prominence runs towards white; this is
     * 7.8:1, and the italic carries the distinction that the colour alone
     * should never have had to. */
    color:#b6c2d4;
    font-style:italic;
}

/* «Ещё» expands inside its own category and never opens another screen
 * (Checkpoint B1). */
.career-4b-content .aq-market-more{
    display:grid;
    gap:6px;
}

/* One height at every width — a control that is a touch target on a phone is one
 * on a tablet too, and the old narrow-only override left every width above 520
 * below the minimum (TASK-150 Э2, defect D13).
 *
 * That height is 30px, not 44 (TASK-154 review). When the outcomes came down to
 * 30 and the family pill to 30, this stayed behind and became the tallest thing
 * in the markets zone: a control that only reveals rows stood taller than the
 * rows it reveals and taller than the family pill that leads to it. That is the
 * same inversion the rail was corrected for — navigation outweighing the answer
 * — and it is corrected the same way, by matching the outcome. Full width at
 * 30px clears WCAG 2.2 AA §2.5.8 by area, as the outcome beside it does. */
.career-4b-content .aq-market-more-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:0 12px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    color:var(--career-4b-cyan-light);
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    list-style:none;
}

.career-4b-content .aq-market-more-toggle::-webkit-details-marker{
    display:none;
}

/* 6px, the gap the same relationship gets outside «Ещё» (TASK-154 review). The
 * rhythm ladder stepped 8 → 6 and 6 → 4 across the card; this one rule kept 12,
 * so revealed rows sat three times further apart than identical rows one level
 * up, and opening «Ещё» changed the density of the list instead of extending
 * it. */
.career-4b-content .aq-market-more-body{
    display:grid;
    gap:6px;
}

/* ============================================================
 * Family axis (TASK-150 Э2)
 *
 * The card the Product Owner approved on 2026-08-08: «Исход» open always, the
 * pinned forecast under it, then a rail of families with their market counts,
 * then one open family at a time.
 *
 * The level map extends by exactly one step and no more. Level 0 — the family:
 * a navigational surface that carries a count and no price. Level 1 — the
 * market: a title over its own lines, which is what turns five corner lines
 * from five unrelated rows into one market. Levels 2 and 3 are untouched, so
 * every existing row keeps the appearance it already had.
 *
 * Nothing here is per-market. A family, a subfamily and a period are drawn from
 * the model's own labels and counts, so a market added later inherits this
 * appearance without a line of CSS — the same rule the category axis follows.
 * ============================================================ */

.career-4b-content .aq-market-family{
    display:grid;
    gap:6px;
}

.career-4b-content .aq-market-family-title{
    margin:0;
    color:var(--career-4b-muted-light);
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

/* Level 0 — the rail. Horizontal because the families are few, homogeneous and
 * predictable; the last item is deliberately allowed to bleed past the edge, so
 * the row announces that it continues instead of relying on a scrollbar nobody
 * sees. */
.career-4b-content .aq-family-rail{
    display:flex;
    gap:6px;
    margin-block:10px 0;
    padding-bottom:4px;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}

.career-4b-content .aq-family-rail::-webkit-scrollbar{
    display:none;
}

/* 30px, the same height as the outcome it leads to. The rail is navigation and
 * the outcome is the answer; when the two disagreed by 14px the rail read as
 * the heavier of the pair, which is backwards. */
.career-4b-content .aq-family-tab{
    display:inline-flex;
    align-items:center;
    gap:6px;
    flex:0 0 auto;
    min-height:30px;
    padding:0 12px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;
    background:rgba(255,255,255,.04);
    color:var(--career-4b-text-light,#fff);
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
    cursor:pointer;
}

.career-4b-content .aq-family-tab.is-active{
    border-color:var(--career-4b-cyan-light);
    background:rgba(34,211,238,.16);
    color:var(--career-4b-cyan-light);
}

/* The family holding the user's forecast says so while closed — otherwise a
 * card opened on «Исход» gives no hint that the answer lives three tabs away. */
.career-4b-content .aq-family-tab.has-selection::after{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--career-4b-cyan-light);
}

/* 16px inside a 30px pill. The badge is a footnote on the family name; sized to
 * 20px it took two thirds of the pill's height and started to look pressable in
 * its own right. */
.career-4b-content .aq-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:16px;
    height:16px;
    padding:0 5px;
    border-radius:999px;
    background:rgba(255,255,255,.10);
    font-size:10px;
    font-weight:800;
    font-variant-numeric:tabular-nums;
}

.career-4b-content .aq-family-panel:empty{
    display:none;
}

.career-4b-content .aq-family-panel{
    display:grid;
    gap:4px;
    margin-block:10px 0;
}

/* The period is a filter inside an open family, not a level of its own — which
 * is why it is styled as a switch and never as a heading. */
.career-4b-content .aq-period-switch,
.career-4b-content .aq-subfamily-switch{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
}

/* The shortest control on the card, and correctly so: a filter that only
 * reorders what is already on screen should cost less height than the family
 * that put it there and less than the outcome it filters towards. */
.career-4b-content .aq-period-tab,
.career-4b-content .aq-subfamily-tab{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:28px;
    padding:0 10px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    background:transparent;
    color:var(--career-4b-muted-light);
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}

.career-4b-content .aq-period-tab.is-active,
.career-4b-content .aq-subfamily-tab.is-active{
    border-color:var(--career-4b-cyan-light);
    color:var(--career-4b-cyan-light);
}

/* Level 1 — the market. One title over its own lines. */
.career-4b-content .aq-market-group{
    display:grid;
    gap:4px;
    margin-block:6px 0;
}

.career-4b-content .aq-market-group-title{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin:0;
    font-size:14px;
    font-weight:800;
}

/* Whose market this is (TASK-163 PHASE G).
 *
 * Beside the title and quieter than it, because it qualifies the market rather
 * than naming a second one. Allowed to wrap and to be long: a Russian club name
 * is routinely longer than the market it qualifies, and truncating the subject
 * of an individual total would leave two identical controls on the card. */
.career-4b-content .aq-market-group-subject{
    min-width:0;
    color:var(--career-4b-cyan-light);
    font-size:12px;
    font-weight:700;
    overflow-wrap:anywhere;
}

/* The line rail (TASK-163 PHASE G).
 *
 * A market priced on more than three lines stops reading as one market once
 * every line is a row: six stacked rows at 320px are most of the card for a
 * single decision. The lines become a rail and the outcomes belong to the line
 * on screen.
 *
 * It scrolls rather than wraps. Wrapping a rail of eight lines costs two rows
 * of height on the narrowest viewport, and the lines are ordered, so scrolling
 * preserves the one thing a user reads them by. */
.career-4b-content .aq-line-rail{
    display:flex;
    gap:4px;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}

.career-4b-content .aq-line-rail::-webkit-scrollbar{
    display:none;
}

.career-4b-content .aq-line-tab{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:48px;
    min-height:32px;
    padding:0 10px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    background:transparent;
    color:var(--career-4b-muted-light);
    font-size:12px;
    font-weight:800;
    font-variant-numeric:tabular-nums;
    cursor:pointer;
}

.career-4b-content .aq-line-tab.is-active{
    border-color:var(--career-4b-cyan-light);
    color:var(--career-4b-cyan-light);
}

/* The line a user already holds, marked while its rail is on another line —
 * the same reason the family rail marks a closed family carrying a forecast. */
.career-4b-content .aq-line-tab.has-selection::after{
    content:"";
    width:5px;
    height:5px;
    margin-left:5px;
    border-radius:50%;
    background:var(--career-4b-cyan-light);
}

/* The composite picker (TASK-163 PHASE G).
 *
 * Twenty scorelines are not a market drawn as a list and not a bookmaker's
 * grid: they are one decision made in two steps, which is what the position
 * already is. The steps read like the line rail because they do the same job —
 * choose which subset of one market's positions is on screen. */
.career-4b-content .aq-composite-steps{
    display:flex;
    gap:4px;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}

.career-4b-content .aq-composite-steps::-webkit-scrollbar{
    display:none;
}

.career-4b-content .aq-composite-step{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:32px;
    padding:0 10px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    background:transparent;
    color:var(--career-4b-muted-light);
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
    cursor:pointer;
}

.career-4b-content .aq-composite-step.is-active{
    border-color:var(--career-4b-cyan-light);
    color:var(--career-4b-cyan-light);
}

.career-4b-content .aq-composite-step.has-selection::after{
    content:"";
    width:5px;
    height:5px;
    margin-left:5px;
    border-radius:50%;
    background:var(--career-4b-cyan-light);
}

/* The second step wraps rather than scrolls: its values are unordered — «2:0»
 * is not before «2:1» in any sense a user reads — so nothing is lost by
 * rearranging them, and a wrapped block shows all of them at once. */
.career-4b-content .aq-market-outcomes.is-composite{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
}

.career-4b-content .aq-market-outcomes.is-composite .aq-market-outcome{
    flex:0 0 auto;
    min-width:72px;
}

/* The line inside a handicap control (TASK-163 PHASE G). It belongs to the
 * outcome because the two sides of a handicap carry different lines, so it is
 * set beside the label rather than above both controls. */
.career-4b-content .aq-market-outcome-line{
    font-variant-numeric:tabular-nums;
    font-weight:800;
    opacity:.85;
}

/* The forecast, pinned above the rail. It answers the question a returning user
 * asks first, and it used to sit below the entire market list — roughly 800px
 * under the tap that produced it on a rich card. */
.career-4b-content .aq-selection{
    display:grid;
    gap:2px;
    margin-block:10px 0;
    padding:8px 12px;
    border:1px solid rgba(34,211,238,.35);
    border-radius:14px;
    background:rgba(34,211,238,.08);
}

.career-4b-content .aq-selection[hidden],
.career-4b-content .aq-selection.is-empty{
    display:none;
}

.career-4b-content .aq-selection-label{
    color:var(--career-4b-muted-light);
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.career-4b-content .aq-selection-target{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    min-height:44px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--career-4b-text-light,#fff);
    font-size:14px;
    font-weight:800;
    text-align:left;
    cursor:pointer;
}

.career-4b-content .aq-selection-odds{
    color:var(--career-4b-cyan-light);
    font-variant-numeric:tabular-nums;
}

/* The card with nothing to offer (TASK-151).
 *
 * Quiet by construction: no border that suggests a control, no dashes that
 * suggest a price. It states what is true and offers nothing to press, which is
 * the whole difference from the skeleton of four empty categories it replaces. */
.career-4b-content .aq-market-empty{
    display:grid;
    gap:4px;
    padding:16px 12px;
    border-radius:14px;
    background:rgba(255,255,255,.04);
    text-align:center;
}

.career-4b-content .aq-market-empty-title{
    margin:0;
    font-size:13px;
    font-weight:800;
}

.career-4b-content .aq-market-empty-note{
    margin:0;
    color:var(--career-4b-muted-light);
    font-size:12px;
    line-height:1.35;
}

/* The replacement, said out loud. A silent swap is indistinguishable from a
 * save that did not happen. */
.career-4b-content .aq-selection-change{
    margin:0;
    color:var(--career-4b-cyan-light);
    font-size:12px;
    font-weight:700;
}

.career-4b-content .aq-selection-change[hidden]{
    display:none;
}