/* Package 4: AWARDIQS 2.0 Career Match Card presentation.
 * Runtime data, actions and lifecycle stay in existing Career services. */

.career-4b-content .match-item > summary.career-match-card-summary{
    cursor:pointer;
    outline:none;
}

.career-4b-content .match-item > summary.career-match-card-summary:focus-visible{
    border-radius:16px;
    box-shadow:inset 0 0 0 2px var(--career-4b-cyan);
}

.career-4b-content .match-item[open] > summary.career-match-card-summary:focus-visible{
    border-radius:var(--career-4b-card-radius) var(--career-4b-card-radius) 0 0;
}

.career-4b-content .career-match-card{
    container-type:inline-size;
}

.career-4b-content .career-match-card-header,
.career-4b-content .career-match-card-main,
.career-4b-content .career-match-card-body{
    min-width:0;
}

.career-4b-content .career-match-card-league,
.career-4b-content .career-match-card-kickoff,
.career-4b-content .career-match-card-status,
.career-4b-content .career-match-card-clock,
.career-4b-content .career-match-card-prediction,
.career-4b-content .career-match-card-action,
.career-4b-content .career-match-card-stat,
.career-4b-content .career-match-card-markets,
.career-4b-content .career-match-card-meta{
    font-size:12px;
    letter-spacing:0;
}

.career-4b-content .career-match-card-status{
    min-height:28px;
}

.career-4b-content .career-match-card-status.is-live::before{
    width:7px;
    height:7px;
    flex:0 0 7px;
    border-radius:50%;
    background:currentColor;
    content:"";
    box-shadow:0 0 0 4px rgba(255,255,255,.14);
}

.career-4b-content .career-match-card-prediction,
.career-4b-content .career-match-card-action,
.career-4b-content .market-tab,
.career-4b-content .market-outcome-control,
.career-4b-content .market-line-ai,
.career-4b-content .market-line-ai-slot,
.career-4b-content .career-match-status-action{
    min-height:44px;
}

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

/* ── AI Lab strip (TASK-154) ────────────────────────────────────────────────
 * AI Lab is an action on the match, not a market inside it. As a 52px two-line
 * tile under the markets it took a market row on a phone and competed with the
 * prices for the same attention; as a strip above the card it states where deep
 * analysis lives in one line and then gets out of the way.
 *
 * Nothing below declares a width. The strip is a sibling of `.match-item` in
 * the card's own parent, so the layout hands it the card's width; a width here
 * would be a second source of truth that drifts the moment the card changes.
 *
 * The rgba channels are `--career-4b-cyan` (16,196,227) held at low alpha —
 * the same idiom career-4b.css uses for tinted cyan surfaces. This is the top
 * accent of the pair, so it stays quieter than the odds it sits above.
 *
 * The border is teal ink, not tinted cyan (TASK-154 review), and that is the
 * one place the idiom had to give way. Every other tinted-cyan surface in the
 * card sits on the dark card, where a light tint separates by luminance. This
 * strip is the only one on the `#eef1f7` workspace, and there cyan is a hue
 * shift with almost no luminance in it: the fill measured 1.09:1 against the
 * page and the border 1.26:1, so the strip had no identifiable boundary at all
 * — it read as a pale band rather than the entry point it is. Raising the fill
 * does not fix that; only ink does. At .72 the hairline measures 3.02:1, the
 * WCAG 2.2 AA §1.4.11 floor for identifying a component, and stays a hairline. */
.career-4b-content .aq-ai-lab-strip{
    min-height:30px;
    /* The strip is a grid item in the slot host, and a grid item's automatic
     * minimum is its min-content width. With a nowrap caption inside, that
     * minimum is the caption's full 194px, so a long line does not ellipsize —
     * it widens the track, and the card it belongs to widens with it. Measured
     * at 320px: 240px became 245.6px. `min-width:0` is what makes the ellipsis
     * on `.aq-ai-lab-strip-line` reachable at all. */
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:1px solid rgba(10,113,134,.72);
    /* The card's radius is 22px; on a 30px box that clamps to a pill and reads
     * as a button, which is what this deliberately is not. 12px keeps it a
     * strip and still rhymes with the card under it. */
    border-radius:12px;
    background:rgba(16,196,227,.12);
    padding:4px 12px;
    /* 5.85:1 on the tinted fill, where `#0a7186` measured 4.59 — AA, but with
     * nothing left over for a 12px label that is the only text on the strip. */
    color:#075c6d;
    font-family:"Sora",sans-serif;
    font-size:12px;
    font-weight:800;
    line-height:1;
    text-decoration:none;
    transition:background .16s ease,border-color .16s ease,color .16s ease;
}

/* The body column exists in both states so the strip has one face to build. With
 * only the label inside it is a single 12px line, shorter than the 19px mark, so
 * the neutral strip is still decided by its own `min-height` and still measures
 * 30px. */
.career-4b-content .aq-ai-lab-strip-body{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2px;
    min-width:0;
}

/* TASK-156 — the strip with a preselected line.
 *
 * Neutral, the strip is an offer: «there is deep analysis for this match», and
 * it is centred because it addresses the card as a whole. With a line chosen it
 * is no longer an offer but a destination — analysis of THAT line — so it stops
 * being centred and starts at the mark, reading left to right like the sentence
 * it now is.
 *
 * The two states are told apart by four things at once, and only one of them is
 * colour (baseline § 6): a second line of text that the neutral strip does not
 * have, the caption naming the line, the change from centred to leading, and the
 * border going from a .72-alpha hairline to solid ink. */
.career-4b-content .aq-ai-lab-strip.has-line{
    justify-content:flex-start;
    /* 3.03:1 → 6.72:1 against the `#eef1f7` page. The neutral hairline is set at
     * the WCAG 2.2 AA §1.4.11 floor because a neutral entry should not shout;
     * this one is the live entry into a chosen line and can afford to. */
    border-color:#075c6d;
    background:rgba(16,196,227,.18);
}

.career-4b-content .aq-ai-lab-strip.has-line .aq-ai-lab-strip-body{
    flex:1 1 auto;
}

/* 11px/600 under a 12px/800 label: the label names the tool, the caption is the
 * content, and the content carries the darkest ink on the strip — 8.61:1 on the
 * .18 fill, against 5.92:1 for the label above it.
 *
 * 13px of line-height is what sets the box: 12px label + 2px gap + 13px caption
 * = 27px of body, past the 19px mark, so the strip measures 27 + 8 padding + 2
 * border = 37px. Three under the 40px ceiling.
 *
 * The caption never wraps. A second caption line would put the strip at 50px,
 * which is a card and not a strip; ellipsis is the honest failure for the one
 * catalog label that does not fit at 320px. */
.career-4b-content .aq-ai-lab-strip-line{
    font-size:11px;
    font-weight:600;
    line-height:13px;
    color:#04424f;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.career-4b-content a.aq-ai-lab-strip:hover{
    border-color:#075c6d;
    background:rgba(16,196,227,.2);
    color:#04424f;
}

/* The line state rests where the neutral state hovers, so its own hover has to
 * move further or the control stops answering the pointer. 9.78:1 on the page. */
.career-4b-content a.aq-ai-lab-strip.has-line:hover{
    border-color:#04424f;
    background:rgba(16,196,227,.26);
}

/* Teal ink, not `--career-4b-cyan` (TASK-154 review). The offset puts the ring
 * on the workspace itself, and cyan measured 1.85:1 there — a focus indicator
 * below the 3:1 WCAG 2.2 AA §1.4.11 requires. The cyan ring is right everywhere
 * else in the card because everywhere else in the card is dark; this is the one
 * control that lives on the light page, and it needs the opposite ink. 6.73:1. */
.career-4b-content a.aq-ai-lab-strip:focus-visible{
    outline:2px solid #075c6d;
    outline-offset:2px;
}

.career-4b-content a.aq-ai-lab-strip:active{
    background:rgba(16,196,227,.28);
}

.career-4b-content a.aq-ai-lab-strip.has-line:active{
    background:rgba(16,196,227,.34);
}

/* An unavailable analysis keeps the strip's box, so the card below never moves
 * between states; only the ink drops. */
.career-4b-content .aq-ai-lab-strip.is-disabled{
    opacity:.5;
}

.career-4b-content .aq-ai-lab-strip-mark{
    width:19px;
    height:19px;
    flex:0 0 19px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    background:linear-gradient(135deg,var(--career-4b-cyan),var(--career-4b-cyan-light));
    color:var(--career-4b-navy-deep);
    font-size:9px;
    font-weight:800;
}

/* Both hosts are grids with a rhythm of their own — 14px between the rows of a
 * day, 12px between slot cards. The strip belongs to the card under it, so the
 * pair has to read as one unit: pull the inherited gap back to 5px instead of
 * letting the grid space them as two unrelated blocks. In the slot grid the
 * open card spans every column, and so must its strip. */
.career-4b-content .match-day > .aq-ai-lab-strip{
    margin-bottom:-9px;
}

.career-4b-content .career-slot-match-grid > .aq-ai-lab-strip{
    grid-column:1 / -1;
    margin-bottom:-7px;
}

.career-4b-content .career-match-card-empty{
    min-height:88px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:7px;
    border:1px dashed rgba(255,255,255,.2);
    border-radius:14px;
    background:rgba(255,255,255,.04);
    padding:18px;
    color:rgba(255,255,255,.58);
    text-align:center;
}

.career-4b-content .career-match-card-empty > span{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.07);
    color:var(--career-4b-cyan-light);
    font-family:"Sora",sans-serif;
    font-size:18px;
    font-weight:800;
}

.career-4b-content .career-match-card-empty strong{
    font-size:12px;
    line-height:1.4;
    font-weight:700;
}

.career-match-card-skeleton-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-top:18px;
}

.career-match-card-skeleton{
    min-width:0;
    min-height:156px;
    display:grid;
    align-content:center;
    gap:18px;
    overflow:hidden;
    border:1px solid #dbe1eb;
    border-radius:16px;
    background:#fff;
    padding:18px;
}

.career-match-card-skeleton.is-featured{
    grid-column:1 / -1;
    min-height:188px;
    border-color:rgba(16,196,227,.22);
    border-radius:var(--career-4b-card-radius);
    background:linear-gradient(145deg,var(--career-4b-card),var(--career-4b-card-deep));
}

.career-match-card-skeleton-line,
.career-match-card-skeleton-team i,
.career-match-card-skeleton-team b,
.career-match-card-skeleton-score{
    display:block;
    overflow:hidden;
    border-radius:999px;
    background:#e8edf4;
}

.career-match-card-skeleton.is-featured .career-match-card-skeleton-line,
.career-match-card-skeleton.is-featured .career-match-card-skeleton-team i,
.career-match-card-skeleton.is-featured .career-match-card-skeleton-team b,
.career-match-card-skeleton.is-featured .career-match-card-skeleton-score{
    background:rgba(255,255,255,.12);
}

.career-match-card-skeleton-line::after,
.career-match-card-skeleton-team i::after,
.career-match-card-skeleton-team b::after,
.career-match-card-skeleton-score::after{
    width:45%;
    height:100%;
    display:block;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
    content:"";
    animation:careerMatchCardSkeleton 1.35s ease-in-out infinite;
}

.career-match-card-skeleton-line.is-meta{
    width:42%;
    height:12px;
}

.career-match-card-skeleton-line.is-action{
    width:62%;
    height:44px;
    justify-self:center;
}

.career-match-card-skeleton-teams{
    display:grid;
    grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);
    align-items:center;
    gap:14px;
}

.career-match-card-skeleton-team{
    min-width:0;
    display:flex;
    align-items:center;
    gap:9px;
}

.career-match-card-skeleton-team.is-away{
    flex-direction:row-reverse;
}

.career-match-card-skeleton-team i{
    width:44px;
    height:44px;
    flex:0 0 44px;
    border-radius:14px;
}

.career-match-card-skeleton-team b{
    width:70%;
    height:13px;
}

.career-match-card-skeleton-score{
    width:52px;
    height:18px;
    justify-self:center;
}

@keyframes careerMatchCardSkeleton{
    from{transform:translateX(-120%)}
    to{transform:translateX(240%)}
}

@media(max-width:720px){
    .career-match-card-skeleton-grid{
        grid-template-columns:1fr;
    }

    .career-match-card-skeleton.is-featured{
        grid-column:1;
    }

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

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

@media(max-width:420px){
    .career-match-card-skeleton{
        min-height:148px;
        padding:15px;
    }

    .career-match-card-skeleton.is-featured{
        min-height:172px;
    }

    .career-match-card-skeleton-teams{
        grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);
        gap:8px;
    }

    .career-match-card-skeleton-team,
    .career-match-card-skeleton-team.is-away{
        flex-direction:column;
    }

    .career-match-card-skeleton-team i{
        width:40px;
        height:40px;
        flex-basis:40px;
    }
}

@media(prefers-reduced-motion:reduce){
    .career-match-card-skeleton-line::after,
    .career-match-card-skeleton-team i::after,
    .career-match-card-skeleton-team b::after,
    .career-match-card-skeleton-score::after{
        animation:none;
    }
}