.topic-peek-headline {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.topic-peek-back { flex: 0 0 auto; }
.topic-peek-back[hidden] { display: none; }
.topic-peek-titles { min-width: 0; }
.topic-peek-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent-strong, #0066cc);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topic-peek-title {
margin: 3px 0 0;
font-size: 19px;
font-weight: 750;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--text, #111318);
overflow-wrap: anywhere;
}
.topic-peek-body {
background: linear-gradient(180deg, #fbfcfe 0%, var(--bg, #f2f4f7) 100%);
}
.topic-peek-overview {
margin: 14px 14px 0;
padding: 14px 16px;
border-radius: 16px;
background: #ffffff;
border: 1px solid rgba(10, 132, 255, 0.16);
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}
.topic-peek-overview[hidden] { display: none; }
.topic-peek-overview p {
margin: 0;
font-size: 14.5px;
line-height: 1.6;
color: var(--text, #111318);
}
.topic-peek-note {
margin: 14px 14px 0;
padding: 14px 16px;
border-radius: 16px;
background: var(--accent-soft, rgba(10, 132, 255, 0.10));
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.topic-peek-note[hidden] { display: none; }
.topic-peek-note p {
margin: 0;
font-size: 14px;
font-weight: 600;
}
.topic-peek-note-close {
min-height: 40px;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid rgba(10, 132, 255, 0.3);
background: #ffffff;
color: var(--accent-strong, #0066cc);
font: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.topic-peek-content {
display: grid;
gap: 18px;
padding: 14px 14px 22px;
container-type: inline-size;
container-name: topic-peek;
}
.topic-peek-content:empty { display: none; }
.topic-peek-content .tpager { display: none; }
@container topic-peek (max-width: 560px) {
.topic-peek-content .mk-grid--2,
.topic-peek-content .mk-grid--3,
.topic-peek-content .mk-grid--4 { grid-template-columns: minmax(0, 1fr); }
}
.topic-peek .fp-foot { justify-content: space-between; }
.topic-peek-hint {
margin: 0;
font-size: 12.5px;
color: var(--muted, #667085);
min-width: 0;
}
.topic-peek-open {
flex: 0 0 auto;
min-height: 42px;
padding: 10px 18px;
border: none;
border-radius: 999px;
background: var(--accent, #0a84ff);
color: #ffffff;
font: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 8px 18px rgba(10, 132, 255, 0.25);
transition: background 0.15s ease, transform 0.05s ease;
}
@media (hover: hover) and (pointer: fine) {
.topic-peek-open:hover { background: var(--accent-strong, #0066cc); }
}
.topic-peek-open:active { transform: translateY(1px); }
.topic-peek-open[hidden] { display: none; }
.topic-peek-open:focus-visible {
outline: 3px solid rgba(10, 132, 255, 0.35);
outline-offset: 2px;
}
@container topic-peek (max-width: 460px) {
.topic-peek-hint { display: none; }
}
@media (max-width: 520px) {
.topic-peek-hint { display: none; }
.topic-peek .fp-foot { justify-content: stretch; }
.topic-peek-open { flex: 1 1 auto; }
}
.topic-return {
position: fixed;
left: 50%;
bottom: calc(22px + env(safe-area-inset-bottom, 0px));
z-index: 1340;
display: flex;
align-items: center;
gap: 4px;
max-width: min(560px, calc(100vw - 32px));
padding: 5px;
border-radius: 999px;
background: rgba(17, 19, 24, 0.92);
color: #ffffff;
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.28);
transform: translateX(-50%);
animation: topic-return-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.topic-return[hidden] { display: none; }
@keyframes topic-return-in {
from { opacity: 0; transform: translate(-50%, 14px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
.topic-return-go {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
min-height: 40px;
padding: 8px 14px 8px 12px;
border: none;
border-radius: 999px;
background: transparent;
color: inherit;
font: inherit;
font-size: 14px;
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.topic-return-go:hover { background: rgba(255, 255, 255, 0.12); }
}
.topic-return-text {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topic-return-label { opacity: 0.75; }
.topic-return strong { font-weight: 700; }
.topic-return-dismiss {
flex: 0 0 auto;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
border-radius: 999px;
background: rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.85);
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.topic-return-dismiss:hover { background: rgba(255, 255, 255, 0.2); }
}
.topic-return button:focus-visible {
outline: 3px solid rgba(10, 132, 255, 0.6);
outline-offset: 1px;
}
@media (pointer: coarse) {
.topic-return-go { min-height: 44px; }
.topic-return-dismiss { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
.topic-return { animation: none; }
}
body:has(#assessment-session-page.show) .topic-return,
body:has(#assessment-session-page.show) .fp-overlay--topic-peek:not(.fp-overlay--over-exam) { display: none !important; }
.topic-peek-content .cpa-locator-card,
.topic-peek-content .phxfp__bugs { top: 8px; }
.topic-peek-return {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 34px;
padding: 0 12px 0 8px;
border-radius: 999px;
border: 1px solid rgba(10, 132, 255, 0.28);
background: var(--accent-soft, rgba(10, 132, 255, 0.10));
color: var(--accent-strong, #0066cc);
font: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.topic-peek-return[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
.topic-peek-return:hover { background: rgba(10, 132, 255, 0.18); }
}
@media (pointer: coarse) {
.topic-peek-return { min-height: 44px; }
}
.topic-peek-hit {
border-radius: 8px;
animation: topic-peek-hit 2.6s ease-out;
}
@keyframes topic-peek-hit {
0%, 35% { background-color: rgba(253, 222, 88, 0.55); box-shadow: 0 0 0 4px rgba(253, 222, 88, 0.55); }
100% { background-color: transparent; box-shadow: 0 0 0 4px transparent; }
}
@media (prefers-reduced-motion: reduce) {
.topic-peek-hit { animation: none; outline: 3px solid rgba(250, 204, 21, 0.8); outline-offset: 2px; }
}