/* One-tap "which form are you in" card (partials/grade-prompt.blade.php).
   Floats near the top so it never covers the chat input or the dock; no
   backdrop, the page stays usable around it. Macaron tints match me.css. */
.gp-card {
    position: fixed;
    z-index: 900;
    top: 72px;
    right: 24px;
    width: min(340px, calc(100vw - 32px));
    padding: 18px 18px 16px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #ececec;
    color: #111;
    font-family: var(--font-sans);
    opacity: 0;
    transform: translateY(-24px) scale(0.92);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
/* Entrance: drops in with a small spring overshoot, then the text and the
   three choices follow one after another. Leaving just fades back up. */
.gp-card.show { opacity: 1; transform: none; animation: gp-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.gp-card.show .gp-title,
.gp-card.show .gp-sub { animation: gp-rise 0.4s ease both; animation-delay: 0.12s; }
.gp-card.show .gp-sub { animation-delay: 0.18s; }
.gp-card.show .gp-option { animation: gp-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.gp-card.show .gp-option:nth-child(1) { animation-delay: 0.24s; }
.gp-card.show .gp-option:nth-child(2) { animation-delay: 0.31s; }
.gp-card.show .gp-option:nth-child(3) { animation-delay: 0.38s; }
.gp-card.show .gp-option:nth-child(4) { animation-delay: 0.45s; }
.gp-done:not([hidden]) { animation: gp-rise 0.35s ease both; }
.gp-done:not([hidden]) .material-symbols-outlined { animation: gp-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

@keyframes gp-in {
    0%   { opacity: 0; transform: translateY(-24px) scale(0.92); }
    100% { opacity: 1; transform: none; }
}
@keyframes gp-rise {
    0%   { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: none; }
}
@keyframes gp-pop {
    0%   { opacity: 0; transform: scale(0.7); }
    100% { opacity: 1; transform: none; }
}
.gp-card[hidden] { display: none; }

.gp-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9a9a9a;
    cursor: pointer;
}
.gp-close .material-symbols-outlined { --icon-size: 18px; font-size: 18px; }
.gp-close:hover { background: #f5f5f5; color: #111; }

.gp-title { margin: 0 32px 4px 0; font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.gp-sub { margin: 0 0 14px; color: #8e8e8e; font-size: 12.5px; line-height: 1.5; }

.gp-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gp-option {
    min-height: 44px;
    padding: 8px 6px;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.15s ease;
}
.gp-option:hover { filter: brightness(0.97); }
.gp-option:active { transform: scale(0.96); }
.gp-option:disabled { cursor: default; opacity: 0.6; }
.gp-option[data-tint="peach"]    { background: #ffe9de; color: #a4532d; }
.gp-option[data-tint="sky"]      { background: #e2f0fa; color: #3a6f96; }
.gp-option[data-tint="mint"]     { background: #e1f4ea; color: #3a7d5c; }
.gp-option[data-tint="lavender"] { background: #eee8fb; color: #6b55b0; }

.gp-done { display: flex; align-items: center; gap: 8px; padding: 4px 28px 2px 0; color: #3a7d5c; font-size: 13.5px; font-weight: 500; }
.gp-done[hidden] { display: none; }
.gp-done .material-symbols-outlined { --icon-size: 20px; font-size: 20px; }

@media (max-width: 720px) {
    .gp-card { top: calc(64px + env(safe-area-inset-top, 0px)); right: 16px; left: 16px; width: auto; margin: 0 auto; max-width: 420px; }
}

@media (prefers-reduced-motion: reduce) {
    .gp-card, .gp-option { transition: none; }
    .gp-card.show, .gp-card.show *, .gp-done, .gp-done * { animation: none !important; }
}