/* ============================================================================
   TipCardsPanel - the "Exam tip cards" reveal.
   A spring-fanned coverflow of flip cards distilled from a question's ExamTips.
   Palette stays blue / teal / white / slate (no orange-red CTAs). Two shells:
   .tcp--sheet (Exam bottom sheet) and .tcp--inline (Results in-flow panel).
   ========================================================================== */

.tcp { --tcp-teal: #2A9EA6; --tcp-ink: #0f172a; display: block; }

/* ── Trigger: a crafted mini-deck that invites the reveal ───────────────── */
.tcp-trigger {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 12px 16px; margin-top: 6px;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbfb 100%);
    border: 1px solid #d7e8e9;
    border-radius: 16px; cursor: pointer; text-align: left;
    box-shadow: 0 1px 0 #ffffff inset, 0 6px 20px -14px rgba(42, 158, 166, 0.55);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tcp-trigger:hover {
    transform: translateY(-1px);
    border-color: var(--tcp-teal);
    box-shadow: 0 10px 26px -14px rgba(42, 158, 166, 0.7);
}
.tcp-trigger:hover .tcp-trigger__sheet--2 { transform: translate(-9px, -3px) rotate(-8deg); }
.tcp-trigger:hover .tcp-trigger__sheet--3 { transform: translate(-16px, 1px) rotate(-15deg); }

.tcp-trigger__deck { position: relative; width: 46px; height: 46px; flex-shrink: 0; }
.tcp-trigger__sheet {
    position: absolute; inset: 0; border-radius: 11px;
    transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}
.tcp-trigger__sheet--1 {
    display: flex; align-items: center; justify-content: center;
    background: #ffffff; border: 1px solid #dbeced; z-index: 3;
    box-shadow: 0 4px 10px -6px rgba(15, 23, 42, 0.25);
}
.tcp-trigger__sheet--2 { background: #eef7f7; border: 1px solid #d3e9ea; transform: translate(-6px, -2px) rotate(-5deg); z-index: 2; }
.tcp-trigger__sheet--3 { background: #e3f1f2; border: 1px solid #cbe5e7; transform: translate(-11px, 1px) rotate(-10deg); z-index: 1; }

.tcp-trigger__txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.tcp-trigger__title { font-weight: 800; font-size: 0.9375rem; color: var(--tcp-ink); letter-spacing: -0.01em; }
.tcp-trigger__sub { font-size: 0.8125rem; color: #64748b; }
.tcp-trigger__go {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--tcp-teal); color: #fff; font-size: 0.9rem;
    box-shadow: 0 6px 14px -8px rgba(42, 158, 166, 0.9);
}
.tcp-trigger__go .bi-lock-fill { background: #eef2f7; color: #64748b; }
.tcp .tcp-trigger__go:has(.bi-lock-fill) { background: #eef2f7; color: #64748b; box-shadow: none; }

/* ── Shell: bottom sheet (Exam) vs inline (Results) ─────────────────────── */
.tcp-panel { display: flex; flex-direction: column; }

.tcp--inline.is-open .tcp-panel {
    margin-top: 10px; padding: 6px 14px 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%);
    border: 1px solid #e2e8f0; border-radius: 18px;
    box-shadow: 0 18px 40px -28px rgba(15, 23, 42, 0.4);
    animation: tcp-inline-in .38s cubic-bezier(.22, 1, .36, 1);
}
@keyframes tcp-inline-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }

.tcp--sheet.is-open .tcp-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 940;
    width: 100%; max-width: 760px; margin: 0 auto;
    height: min(48vh, 480px); padding: 4px 18px 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f6fafb 100%);
    border: 1px solid #e2e8f0; border-bottom: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -22px 50px -24px rgba(15, 23, 42, 0.4);
    animation: tcp-sheet-up .42s cubic-bezier(.22, 1, .36, 1);
}
@keyframes tcp-sheet-up { from { transform: translateY(102%); } to { transform: translateY(0); } }

.tcp-grip {
    width: 44px; height: 5px; border-radius: 999px; background: #cbd5e1;
    margin: 8px auto 2px; cursor: pointer; flex-shrink: 0;
    transition: background .15s ease, width .15s ease;
}
.tcp-grip:hover { background: #94a3b8; width: 54px; }
.tcp--inline .tcp-grip { display: none; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.tcp-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px 2px; }
.tcp-head__title { display: flex; align-items: center; gap: 10px; }
.tcp-head__badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
    color: #b45309; background: #fffbeb; border: 1px solid #fde68a;
    padding: 4px 9px; border-radius: 999px;
}
.tcp-head__pos { font-size: 0.8125rem; font-weight: 700; color: #94a3b8; font-variant-numeric: tabular-nums; }
.tcp-close {
    width: 30px; height: 30px; border-radius: 9px; border: 1px solid #e2e8f0;
    background: #fff; color: #64748b; cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; transition: all .15s ease;
}
.tcp-close:hover { background: #f1f5f9; color: #0f172a; }

/* ── Coverflow stage ────────────────────────────────────────────────────── */
.tcp-stage {
    position: relative; flex: 1; min-height: 262px;
    display: flex; align-items: center; justify-content: center;
    perspective: 1500px; outline: none; overflow: hidden;
    touch-action: pan-y;
}
.tcp--sheet .tcp-stage { min-height: 238px; }
/* Inline (Results) has no fixed-height panel, so give the stage a definite
   height - otherwise the card's height collapses to a sliver. */
.tcp--inline.is-open .tcp-stage { height: 284px; flex: 0 0 auto; }
.tcp-track {
    position: relative; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    transform-style: preserve-3d;
}

.tcp-card {
    position: absolute; width: min(370px, 86%); height: 224px;
    transform-style: preserve-3d;
    transform:
        translateX(calc(var(--o) * 52% + var(--tcp-drag, 0px)))
        translateY(calc(var(--ao) * 10px))
        scale(calc(1 - var(--ao) * 0.16))
        rotateY(calc(var(--o) * -18deg));
    transition: transform .55s cubic-bezier(.22, 1, .36, 1);
    animation: tcp-deal .55s cubic-bezier(.2, 1.16, .34, 1) backwards;
    animation-delay: calc(var(--ao) * 60ms);
}
@keyframes tcp-deal { from { opacity: 0; translate: 0 34px; } to { opacity: 1; translate: 0 0; } }
.tcp-card.is-hidden { opacity: 0; pointer-events: none; }
.tcp-card.is-active { cursor: pointer; }
.tcp-card:not(.is-active) { cursor: pointer; }

/* Neighbours fade to clean shells so no text ever shows cut off. */
.tcp-card::after {
    content: ''; position: absolute; inset: 0; border-radius: 22px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.4), rgba(226, 232, 240, 0.65));
    opacity: calc(var(--ao) * 0.55); pointer-events: none; transition: opacity .45s ease; z-index: 6;
}

.tcp-card__inner {
    position: relative; width: 100%; height: 100%;
    transition: transform .6s cubic-bezier(.34, 1.2, .4, 1);
    transform-style: preserve-3d;
}
.tcp-card.is-flipped .tcp-card__inner { transform: rotateY(180deg); }

.tcp-card__face {
    position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
    display: flex; flex-direction: column; padding: 20px 22px;
    border-radius: 22px; background: linear-gradient(158deg, #ffffff 0%, #f2fafb 100%);
    border: 1px solid #e5eef0; overflow: hidden;
    box-shadow: 0 12px 30px -20px rgba(15, 23, 42, 0.4);
}
.tcp-card__face--back { transform: rotateY(180deg); background: linear-gradient(158deg, #ffffff 0%, #eef9f4 100%); }
/* Top accent bar - only on the focused card, colour-coded per face. */
.tcp-card.is-active .tcp-card__face::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2;
}
.tcp-card.is-active .tcp-card__face--front::before { background: linear-gradient(90deg, #2A9EA6, #3b82f6); }
.tcp-card.is-active .tcp-card__face--back::before { background: linear-gradient(90deg, #10b981, #2A9EA6); }
.tcp-card.is-active .tcp-card__face {
    border-color: #c4e4e6;
    box-shadow: 0 34px 64px -26px rgba(42, 158, 166, 0.5), 0 6px 18px -10px rgba(15, 23, 42, 0.12);
}

.tcp-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.tcp-card__kick {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--tcp-teal);
}
.tcp-card__kick--a { color: #0e9f6e; }

/* Neighbour placeholder: a big faint mark, never cut-off text. */
.tcp-card__ghost { margin: auto; font-size: 2.6rem; color: #cde4e5; opacity: 0.7; }

.tcp-card__q {
    flex: 1; display: flex; align-items: center;
    font-size: 1.12rem; font-weight: 700; line-height: 1.42; color: var(--tcp-ink);
    letter-spacing: -0.015em; overflow-y: auto;
}
.tcp-card__a {
    flex: 1; display: flex; align-items: center;
    font-size: 0.98rem; line-height: 1.55; color: #334155; font-weight: 500; overflow-y: auto;
}
.tcp-card__flip {
    margin-top: 12px; display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.72rem; font-weight: 700; color: #9fb0bd; text-transform: uppercase; letter-spacing: 0.05em;
}
.tcp-card__flip .bi { color: var(--tcp-teal); animation: tcp-flip-hint 2.6s ease-in-out infinite; }
@keyframes tcp-flip-hint { 0%, 82%, 100% { transform: translateY(0); } 90% { transform: translateY(-3px); } }

.tcp-card__save {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: 999px; cursor: pointer;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.01em;
    background: var(--tcp-teal); color: #fff; border: 1px solid transparent;
    box-shadow: 0 8px 16px -10px rgba(42, 158, 166, 0.95); transition: transform .15s ease, background .15s ease;
}
.tcp-card__save:hover:not(:disabled) { transform: translateY(-1px); }
.tcp-card__save.is-added { background: #ecfdf5; color: #0e9f6e; border-color: #a7f3d0; box-shadow: none; cursor: default; animation: tcp-savepop .45s cubic-bezier(.34, 1.56, .64, 1); }
.tcp-card__save:disabled { cursor: default; }
@keyframes tcp-savepop { 0% { transform: scale(.8); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* ── Arrows + dots ──────────────────────────────────────────────────────── */
.tcp-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.9); border: 1px solid #e2e8f0; color: #334155;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px -8px rgba(15, 23, 42, 0.35); backdrop-filter: blur(4px);
    transition: all .15s ease;
}
.tcp-arrow:hover:not(:disabled) { background: #fff; color: var(--tcp-teal); transform: translateY(-50%) scale(1.08); }
.tcp-arrow:disabled { opacity: 0; pointer-events: none; }
.tcp-arrow--prev { left: 4px; }
.tcp-arrow--next { right: 4px; }

.tcp-dots { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 0 4px; flex-wrap: wrap; }
.tcp-dot {
    width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: #cbd5e1; transition: all .2s ease;
}
.tcp-dot.is-on { background: var(--tcp-teal); width: 22px; border-radius: 999px; }
.tcp-dot.is-added:not(.is-on) { background: #6ee7b7; }

/* ── Footer + walls ─────────────────────────────────────────────────────── */
.tcp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; }
.tcp-foot__meter { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; color: #64748b; }
.tcp-foot__meter .bi { color: var(--tcp-teal); }
.tcp-addall {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
    border-radius: 11px; cursor: pointer; font-size: 0.875rem; font-weight: 750;
    background: var(--tcp-ink); color: #fff; border: 1px solid transparent;
    box-shadow: 0 10px 20px -12px rgba(15, 23, 42, 0.8); transition: all .15s ease;
}
.tcp-addall:hover:not(:disabled) { transform: translateY(-1px); background: #1e293b; }
.tcp-addall:disabled { background: #ecfdf5; color: #0e9f6e; border-color: #a7f3d0; box-shadow: none; cursor: default; }
.tcp-addall--link { text-decoration: none; }
.tcp-addall--link:hover { transform: translateY(-1px); background: #1e293b; color: #fff; }
.tcp-spin { animation: tcp-spin 0.8s linear infinite; }
@keyframes tcp-spin { to { transform: rotate(360deg); } }

.tcp-wall {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-top: 8px; padding: 10px 14px; border-radius: 12px;
    background: #f8fafc; border: 1px solid #e2e8f0;
}
.tcp-wall__txt { font-size: 0.8125rem; font-weight: 600; color: #475569; }
.tcp-wall__txt .bi { color: #94a3b8; }
.tcp-wall__cta { font-size: 0.8125rem; font-weight: 800; color: var(--tcp-teal); text-decoration: none; white-space: nowrap; }
.tcp-wall__cta:hover { text-decoration: underline; }

/* ── Locked state (mirrors the tip-prose paywall) ───────────────────────── */
.tcp-locked {
    margin-top: 10px; padding: 14px 16px; border-radius: 16px;
    background: #fff; border: 1px dashed #cbd5e1;
}
.tcp-locked__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tcp-locked__badge {
    display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.06em; color: #b45309;
}
.tcp-locked__body { font-size: 0.875rem; line-height: 1.55; color: #475569; margin: 0 0 12px; }
.tcp-locked__cta {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 11px;
    background: var(--tcp-teal); color: #fff; font-weight: 750; font-size: 0.875rem; text-decoration: none;
    box-shadow: 0 10px 20px -12px rgba(42, 158, 166, 0.9); transition: transform .15s ease;
}
.tcp-locked__cta:hover { transform: translateY(-1px); }

/* Reduced motion: keep it legible, drop the choreography. */
@media (prefers-reduced-motion: reduce) {
    .tcp-card, .tcp-card__inner, .tcp--sheet.is-open .tcp-panel, .tcp--inline.is-open .tcp-panel { animation: none !important; transition: none !important; }
    .tcp-card__flip .bi { animation: none; }
}

@media (max-width: 640px) {
    .tcp-card { width: min(300px, 86%); }
    .tcp--sheet.is-open .tcp-panel { height: min(52vh, 460px); }
}