/* Flash cards. Tokens only; see ../styles.css and docs/design-system.md. */
#progress { font: 500 .8rem/1.3 var(--mono); letter-spacing: .04em; color: var(--muted); }
.card { background: var(--surface); border-radius: var(--r-panel); padding: 2.2rem 1.5rem; min-height: 13rem; text-align: center; display: flex; flex-direction: column; justify-content: center; box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--border); }
.card .front { font: 400 clamp(1.9rem, 6vw, 2.6rem)/1.15 var(--serif); }
.card .pt { font: 400 clamp(2.1rem, 7vw, 3rem)/1.1 var(--serif); color: var(--primary); }
.card .back { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); text-align: left; }
.card .back .pt { text-align: center; margin-bottom: 1rem; }
.forms { border-collapse: collapse; width: 100%; margin: .3rem 0; }
.forms th, .forms td { padding: .5rem .5rem; text-align: left; border-bottom: 1px solid var(--border); }
.forms tr:last-child > * { border-bottom: 0; }
.forms th { font: 500 .8rem/1.3 var(--mono); color: var(--muted); width: 32%; }
.forms td.form { font: 400 1.35rem/1.3 var(--serif); }
.forms .alt { font: 400 1rem var(--sans); color: var(--muted); }
.forms button, .example button, .back .hear-all { min-height: 2rem; padding: .3rem .75rem; font-size: .8rem; margin: 0 0 0 .5rem; }
.back .hear-all { margin: .6rem 0 0; }
.example { margin: 1.1rem 0 .2rem; font-size: 1.05rem; }
.example .en { display: block; color: var(--muted); font-size: .9rem; margin-top: .15rem; }
.note { color: var(--on-accent-soft); background: var(--accent-soft); border-radius: var(--r-field); padding: .7rem .95rem; font-size: .92rem; margin: 1rem 0 0; }
.actions { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.actions button { margin: 0; }
#knew { background: var(--success); color: var(--surface); box-shadow: none; }
@media (prefers-color-scheme: dark) { #knew { color: var(--on-primary); } }
#summary { background: var(--surface); border-radius: var(--r-panel); padding: 1.5rem; box-shadow: inset 0 0 0 1px var(--border); }
#summary h2 { margin-top: 0; }
@media (max-width: 34rem) { .forms th { width: 38%; } }
.progress-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; margin: 1.25rem 0 .5rem; }
.progress-row #progress { margin: 0; }
.progress-row .keys { margin: 0; }
.bar { height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; margin-bottom: .9rem; }
#bar-fill { display: block; height: 100%; width: 0; background: var(--primary); border-radius: 2px; transition: width .25s; }
@media (hover: none) { .progress-row .keys { display: none; } }