/* Shared learner hint presentation. Loaded after page-specific styles. */
button.cq-hint-action,
.j223-support button[data-j223-hint],
.hint-stack button[data-unlock-hint] {
    position: relative;
    isolation: isolate;
    display: inline-grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: center;
    justify-content: stretch;
    width: auto;
    max-width: 19rem;
    min-height: 48px;
    padding: .55rem .75rem;
    color: #edf7f8;
    background: linear-gradient(135deg, #10272f 0%, #0a1c22 100%);
    border: 1px solid #35727d;
    border-left: 3px solid #45d8e6;
    border-radius: 3px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    font: inherit;
    font-size: .88rem;
    font-weight: 850;
    letter-spacing: .015em;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

button.cq-hint-action::before,
.j223-support button[data-j223-hint]::before,
.hint-stack button[data-unlock-hint]::before {
    content: "?";
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    color: #07161b;
    background: #c8a8ef;
    border: 1px solid #e0cdf8;
    border-radius: 50%;
    font-size: .86rem;
    font-weight: 950;
}

button.cq-hint-action::after,
.j223-support button[data-j223-hint]::after,
.hint-stack button[data-unlock-hint]::after {
    content: "\2192";
    color: #45d8e6;
    font-size: 1.1rem;
    font-weight: 900;
}

.j223-support { grid-template-columns: minmax(0, 1fr) auto; }
.j223-support button[data-j223-hint] {
    isolation: auto;
    overflow: visible;
    transform: none;
    width: 17rem;
}

button.cq-hint-action:hover,
.j223-support button[data-j223-hint]:hover,
.hint-stack button[data-unlock-hint]:hover {
    color: #f3f7f7;
    background: linear-gradient(135deg, #15333d 0%, #0d242b 100%);
    border-color: #45d8e6;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .24);
    transform: translateY(-1px);
}

button.cq-hint-action:focus-visible,
.j223-support button[data-j223-hint]:focus-visible,
.hint-stack button[data-unlock-hint]:focus-visible {
    outline: 2px solid #c8a8ef;
    outline-offset: 3px;
}

button.cq-hint-action:disabled,
.j223-support button[data-j223-hint]:disabled,
.hint-stack button[data-unlock-hint]:disabled {
    color: #9cb1b6;
    background: #0a1a20;
    border-color: #29444b;
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
}

button.cq-hint-action:disabled::before,
.j223-support button[data-j223-hint]:disabled::before,
.hint-stack button[data-unlock-hint]:disabled::before {
    content: "\2022";
    color: #c8a8ef;
    background: #10272f;
    border-color: #4e6870;
}

button.cq-hint-action.is-complete::before,
.j223-support button[data-j223-hint].is-complete::before,
.hint-stack button[data-unlock-hint].is-complete::before {
    content: "\2713";
    color: #07161b;
    background: #61dca8;
    border-color: #8cebbf;
}

button.cq-hint-action:disabled::after,
.j223-support button[data-j223-hint]:disabled::after,
.hint-stack button[data-unlock-hint]:disabled::after { content: none; }

button.cq-hint-action[aria-busy="true"],
.j223-support button[data-j223-hint][aria-busy="true"],
.hint-stack button[data-unlock-hint][aria-busy="true"] {
    color: #c8a8ef;
    border-color: #6e5d88;
    cursor: progress;
}

.cq-hint-panel {
    display: grid;
    gap: .5rem;
    padding: .9rem 1rem;
    color: #a9b9bd;
    background: #09171c;
    border: 1px solid #29444b;
    border-left: 3px solid #6e5d88;
}

.cq-hint-panel > :first-child { margin-top: 0; }
.cq-hint-panel > :last-child { margin-bottom: 0; }
.cq-hint-panel.is-unlocked,
.cq-hint-panel[data-state="unlocked"] {
    color: #dbe8e9;
    border-left-color: #45d8e6;
    background: #0a1c22;
}

@media (max-width: 560px) {
    .j223-support { grid-template-columns: 1fr; }
    button.cq-hint-action,
    .j223-support button[data-j223-hint],
    .hint-stack button[data-unlock-hint] { width: 100%; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    button.cq-hint-action,
    .j223-support button[data-j223-hint],
    .hint-stack button[data-unlock-hint] { transition: none; }
}