/* Achievement toasts */
#achievement-toasts {
    position: fixed;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}

.achievement-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 6px 10px 12px;
    background: var(--ocean-deep);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lift);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.achievement-toast.is-visible { opacity: 1; transform: none; }

.toast-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    background: var(--plumeria);
    color: var(--ocean-deep);
}
.toast-icon svg { width: 24px; height: 24px; }

.toast-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.toast-label { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--plumeria); }
.toast-title { font-size: 1.05rem; font-weight: 700; }

.toast-dismiss {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;            /* global button padding would push the icon off-center */
    box-shadow: none;
    background: none;
    border: 0;
    border-radius: var(--radius-pill);
    color: #fff;
    cursor: pointer;
    transition: background-color var(--dur-fast) ease;
}
.toast-dismiss svg { display: block; }
.toast-dismiss:hover { background: rgba(255, 255, 255, .16); }
.toast-dismiss:focus-visible { outline: 2px solid var(--plumeria); outline-offset: 2px; }

@media (max-width: 760px) {
    #achievement-toasts {
        top: calc(var(--header-height) + 8px);
        bottom: auto;
        left: 16px;
        right: 16px;
        max-width: none;
    }
    .achievement-toast { transform: translateY(-12px); }
    .achievement-toast.is-visible { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .achievement-toast, .achievement-toast.is-visible { transition: none !important; transform: none; animation: none !important; }
}

/* Logged-out hint on practice pages */
.save-progress-note,
.api-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0 0 8px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--terracotta-dark);
    background: var(--plumeria-soft);
    border-radius: var(--radius-pill);
    padding: 0 6px 0 18px;
}
.api-notice { color: var(--danger); background: var(--danger-soft); }
.save-progress-note[hidden],
.api-notice[hidden] { display: none; }
.save-progress-note > span,
.api-notice > span { padding-block: 6px; }

/* Dismiss (x) on the notes above: 44px target inside a slim pill */
.note-close {
    flex: none;
    width: 44px;
    height: 44px;
    margin-block: -6px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s;
}
.note-close:hover { background: rgba(58, 36, 24, .1); }
.note-close:focus-visible { outline: 2px solid var(--terracotta); outline-offset: -2px; }

/* Quick way back to the last set on flashcards, writing and quiz */
.resume-link {
    margin: 4px 0 12px;
    text-align: center;
    font-size: 0.95rem;
}
.resume-link[hidden] { display: none; }
.resume-link a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1.5px solid var(--ocean);
    border-radius: var(--radius-pill);
    color: var(--ocean-deep);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.3s var(--spring, ease-out);
}
.resume-link a:hover { background: var(--ocean-mist); transform: translateY(-2px); }
.resume-link a:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .resume-link a:hover { transform: none; } }
.save-progress-note a { color: var(--terracotta-dark); text-decoration: underline; font-weight: 600; }
.save-progress-note a:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }

.fullscreen .api-notice,
.fullscreen .resume-link { display: none; }