/* "Your syllabus, in the real world": subject tabs and tap-to-reveal flip cards */
.ftabs{display:flex;gap:10px;overflow-x:auto;padding:6px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.ftabs::-webkit-scrollbar{display:none}
@media(min-width:760px){.ftabs{justify-content:center}}
.ftab{flex:none;scroll-snap-align:center;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px 0 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--mute);font:500 .98rem var(--sans);cursor:pointer;transition:all .3s var(--ease);-webkit-tap-highlight-color:transparent}
.ftab .ic{width:22px;height:22px;stroke:currentColor}
.ftab:hover{border-color:rgba(201,168,76,.55);color:var(--ink)}
.ftab[aria-selected=true]{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#141008;border-color:transparent;font-weight:600;box-shadow:0 12px 28px -12px rgba(201,168,76,.7)}

.fgrid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:720px){.fgrid{grid-template-columns:repeat(2,1fr);gap:20px}}
.fpanels.switched .fgrid:not([hidden]) .fact{animation:cardin .6s var(--ease) both}
.fpanels.switched .fgrid:not([hidden]) .fact:nth-child(2){animation-delay:.07s}
.fpanels.switched .fgrid:not([hidden]) .fact:nth-child(3){animation-delay:.14s}
.fpanels.switched .fgrid:not([hidden]) .fact:nth-child(4){animation-delay:.21s}
@keyframes cardin{from{opacity:0;transform:translateY(22px) scale(.98)}}

.fact{appearance:none;-webkit-appearance:none;display:block;width:100%;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;perspective:1400px;-webkit-tap-highlight-color:transparent}
.fact-in{display:grid;transition:transform .8s var(--ease);transform-style:preserve-3d}
.fact.open .fact-in{transform:rotateY(180deg)}
.face{grid-area:1/1;display:flex;flex-direction:column;gap:14px;min-height:268px;padding:clamp(22px,3vw,30px);border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,#171613,#0f0f0e);-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;position:relative}
.face.back{transform:rotateY(180deg);background:linear-gradient(180deg,#24200f,#131108);border-color:rgba(201,168,76,.5)}
.face .tag{font:500 .78rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.face .q{font:700 clamp(1.2rem,2.8vw,1.5rem)/1.3 var(--serif)}
.face .a{font-size:1rem;line-height:1.62;color:var(--ink)}
.face .chap{margin-top:auto;padding-top:6px;font-size:.86rem;color:var(--gold2);letter-spacing:.02em}
.face .hint{margin-top:auto;display:flex;align-items:center;gap:9px;font-size:.84rem;color:var(--gold2)}
.face .hint::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--gold);animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(201,168,76,.6)}80%,100%{box-shadow:0 0 0 12px rgba(201,168,76,0)}}
.face.front::after{content:'';position:absolute;right:-30px;bottom:-30px;width:130px;height:130px;border-radius:50%;background:radial-gradient(closest-side,rgba(201,168,76,.16),transparent);pointer-events:none}
@media(hover:hover){.fact:not(.open):hover .face.front{border-color:rgba(201,168,76,.5)}.fact:not(.open):hover .fact-in{transform:rotateY(-8deg)}}

@media(prefers-reduced-motion:reduce){
  .fact-in,.fact.open .fact-in{transform:none!important;transition:none}
  .face.back{transform:none}
  .fact:not(.open) .face.back{display:none}
  .fact.open .face.front{display:none}
  .fpanels.switched .fgrid .fact{animation:none}
}
@media(max-width:560px){.face{min-height:0}}
/* Balanced front face: tag on top, question centred, hint at the bottom */
.face.front .q{margin:auto 0}
.face.front .hint{margin-top:0}