/* Flashcards page: flip card demo of the review loop. LOCAL PREVIEW ONLY. */
.fc-demo{container-type:inline-size;margin:40px 0;padding:24px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg-2)}
.fc-demo [hidden]{display:none!important}
.fc-demo .fc-demo__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px}
.fc-demo .fc-demo__title{margin:0;font-size:17px;line-height:1.3;font-weight:600;color:var(--text)}
.fc-demo .fc-demo__tag{flex:none;font-family:var(--font-mono);font-size:11px;line-height:1;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);padding:6px 8px;border:1px solid var(--line-2);border-radius:6px}
.fc-demo .fc-demo__intro{margin:0 0 22px;font-size:15px;line-height:1.55;color:var(--text-2);max-width:62ch}
.fc-demo__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
@container (max-width:600px){.fc-demo__grid{grid-template-columns:minmax(0,1fr);gap:26px}}
.fc-demo__col{min-width:0}

/* The card */
.fc-card{display:block;width:100%;margin:0;padding:0;border:0;border-radius:var(--r);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;perspective:1200px}
.fc-card:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.fc-card__inner{position:relative;display:block;height:196px;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.fc-card.is-flipped .fc-card__inner{transform:rotateY(180deg)}
.fc-card__face{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;padding:18px 20px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--bg-3);-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:border-color .2s}
.fc-card__face--back{transform:rotateY(180deg);border-color:color-mix(in srgb,var(--accent) 45%,var(--line-2));background:color-mix(in srgb,var(--accent) 6%,var(--bg-3))}
.fc-card:hover .fc-card__face--front{border-color:color-mix(in srgb,var(--accent) 40%,var(--line-2))}
.fc-card__label{font-family:var(--font-mono);font-size:11px;line-height:1.2;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.fc-card__text{flex:1;display:flex;align-items:center;font-size:21px;line-height:1.3;font-weight:600;color:var(--text)}
.fc-card__face--back .fc-card__text{font-size:28px}
.fc-card__hint{font-family:var(--font-mono);font-size:11.5px;line-height:1.2;color:var(--text-3)}

/* Buttons */
.fc-demo__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.fc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--bg-3);color:var(--text);font:600 14px/1.1 var(--font-body);cursor:pointer;transition:background-color .2s,border-color .2s,opacity .2s}
.fc-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fc-btn--hard,.fc-btn--easy{flex:1 1 0;min-width:96px}
.fc-btn--hard{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 10%,var(--bg-3))}
.fc-btn--easy{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 9%,var(--bg-3))}
.fc-btn--hard:not(:disabled):hover{background:color-mix(in srgb,var(--warn) 18%,var(--bg-3))}
.fc-btn--easy:not(:disabled):hover{background:color-mix(in srgb,var(--ok) 16%,var(--bg-3))}
.fc-btn--next{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.fc-btn--next:hover{background:var(--accent-2);border-color:var(--accent-2)}
.fc-btn--ghost{background:transparent;color:var(--text-2)}
.fc-btn--ghost:hover{color:var(--text);border-color:var(--text-3)}
.fc-btn:disabled{opacity:.38;cursor:not-allowed}
.fc-demo .fc-demo__status{margin:12px 0 0;min-height:3em;font-size:14px;line-height:1.5;color:var(--text-2)}

/* What the app remembers */
.fc-demo .fc-demo__sub{margin:0 0 10px;font-family:var(--font-mono);font-size:11px;line-height:1.3;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.fc-facts{display:grid;gap:6px;margin:0 0 24px;padding:0}
.fc-facts__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--bg-3)}
.fc-facts dt{font-size:13.5px;line-height:1.3;color:var(--text-3)}
.fc-facts dd{margin:0;font-size:13.5px;line-height:1.3;font-weight:600;color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
.fc-facts dd.is-hard{color:var(--warn)}
.fc-facts dd.is-easy{color:var(--ok)}
.fc-facts__row.is-flash{animation:fc-flash .9s ease-out}
@keyframes fc-flash{from{border-color:color-mix(in srgb,var(--accent) 60%,var(--line));background:color-mix(in srgb,var(--accent) 10%,var(--bg-3))}}

/* Timeline */
.fc-track{position:relative;height:44px;margin:0 8px}
.fc-track__line{position:absolute;left:0;right:0;top:9px;height:2px;border-radius:2px;background:var(--line-2)}
.fc-track__tick{position:absolute;top:5px;width:1px;height:10px;background:var(--line-2)}
.fc-track__dots{position:absolute;inset:0}
.fc-dot{position:absolute;top:10px;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;transition:left .35s cubic-bezier(.16,1,.3,1)}
.fc-dot b{position:absolute;top:17px;left:50%;transform:translateX(-50%);font:500 11px/1 var(--font-mono);color:var(--text-2);white-space:nowrap}
.fc-dot.is-hard{background:var(--warn)}
.fc-dot.is-easy{background:var(--ok)}
.fc-dot.is-due{background:var(--bg-2);border:2px dashed var(--text-2)}
.fc-dot.is-due.from-hard{border-color:var(--warn)}
.fc-dot.is-due.from-easy{border-color:var(--ok)}
.fc-dot.is-now{background:var(--bg-2);border:2px solid var(--text-2)}
.fc-track__axis{display:flex;justify-content:space-between;margin:2px 0 0;font:11px/1.2 var(--font-mono);color:var(--text-3)}
.fc-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:12.5px;line-height:1.3;color:var(--text-3)}
.fc-legend span{display:inline-flex;align-items:center;gap:7px}
.fc-legend__dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.fc-legend__dot.is-hard{background:var(--warn)}
.fc-legend__dot.is-easy{background:var(--ok)}
.fc-legend__dot.is-due{border:2px dashed var(--text-2)}
.fc-demo .fc-demo__note{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--text-3)}

@media (max-width:600px){
  .fc-demo{padding:18px}
  .fc-card__inner{height:176px}
  .fc-card__text{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .fc-card__inner,.fc-dot,.fc-btn,.fc-card__face{transition:none}
  .fc-facts__row.is-flash{animation:none}
}