/* Student favorites, using the existing Hazel palette. */
.short-study { margin-top:8px; }
.short-study button { min-height:44px; }
.study-storage-note { margin:2px 0 12px; font-size:11px; color:#74686a; line-height:1.7; }
.study-empty { text-align:center; padding:38px 18px 44px; border:1px solid #ead7df; border-radius:24px; background:#fffdfa; }
.study-empty h3 small,.study-empty p small { display:block; font-size:12px; font-weight:400; line-height:1.5; }
.study-empty p { margin:12px 0 24px; color:#74666e; font-size:14px; line-height:1.8; }
.study-empty button { padding:9px 16px; border:1px solid #dec5cf; border-radius:16px; background:#fffdfa; color:#75334c; font-size:14px; font-weight:700; line-height:1.5; }
.study-empty button small { display:block; font-size:11px; font-weight:400; }
.favorites-empty { padding:16px 12px 24px; border:0; background:transparent; }
.favorites-empty p { margin:0 0 18px; }
.is-empty-favorites .browse-controls { margin-bottom:8px; }
.is-empty-favorites .study-area { margin-top:0; padding-top:0; border-top:0; }
.is-empty-favorites .short-study { margin-top:0; }

/* A personal collection above, separate from the learning menu grid. */
.learning-navigation { min-width:0; position:sticky; top:20px; }
.learning-navigation .collection-menu { position:static; }
.favorites-entry { padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.favorites-button { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; width:100%; min-height:54px; padding:10px 16px; border:1px solid var(--line); border-radius:14px; background:#fffdf9; color:var(--hazel-ink); font-size:13px; font-weight:700; line-height:1.4; }
.favorites-button small { padding-left:20px; font-size:11px; color:var(--muted); font-weight:400; }
.favorites-button[aria-pressed=true] { background:var(--hazel-pink); border-color:#ce95a6; }
.favorites-star { display:inline-block; width:1em; color:var(--hazel-rose); text-align:center; }
.favorites-count { font-size:11px; margin-left:4px; font-weight:400; color:#59616a; font-variant-numeric:tabular-nums; }
.favorites-filters { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 20px; }
.favorites-filters button { min-height:48px; padding:8px 12px; border:1px solid var(--line); border-radius:12px; color:var(--hazel-ink); background:#fffdf9; font-size:12px; line-height:1.5; }
.favorites-filters small { display:block; font-size:11px; color:var(--muted); }
.favorites-filters [aria-pressed=true] { background:#f9e6ec; border-color:#cd98a9; }
.favorites-grid { --favorite-card-min-height:176px; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
.favorites-card-actions { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 12px; }
.favorite-source { display:inline-flex; justify-content:center; align-items:center; min-height:44px; padding:7px 8px; border-radius:10px; color:#82445c; font-size:11px; line-height:1.5; text-align:center; text-decoration:underline; text-underline-offset:3px; white-space:pre; }
.favorite-source:hover { background:#f8f0f2; }
.favorites-tools { align-items:flex-start; gap:8px; margin:12px 0 8px; }
.favorites-tools .cue-toggle { margin-left:0; }
.favorites-help { margin-left:auto; min-width:0; color:var(--muted); font-size:12px; }
.favorites-help summary { padding:10px 8px; }
.favorites-tools .favorites-help[open] { flex-basis:100%; padding:0 14px 8px; border-radius:14px; background:#f5eee9; }
.favorites-help p { font-size:12px; line-height:1.7; }
.favorites-button:focus-visible,.favorites-filters button:focus-visible,.study-save:focus-visible,.favorite-source:focus-visible { outline:2px solid #9d4566; outline-offset:3px; }
@media(max-width:760px) {
 .learning-navigation { position:static; }
 .favorites-entry { display:flex; justify-content:flex-end; padding-bottom:0; margin-bottom:12px; border:0; }
 .favorites-button { align-items:center; width:auto; min-width:130px; min-height:52px; padding:8px 14px; }
 .favorites-button small { padding-left:0; }
 .favorites-grid { grid-template-columns:1fr; }
}
@media(max-width:600px) {
 .favorites-filters { gap:6px; }
 .favorites-filters button { flex:0 1 auto; padding:8px 10px; }
 .favorites-card-actions { column-gap:4px; }
 .favorites-card-actions .listen-button { padding-left:8px; padding-right:8px; }
}

/* Save is a separate, fixed control above both faces, never inside the flip button. */
.card-surface { position:relative; display:flex; flex:1; min-width:0; }
.card-surface>.study-card { flex:1; }
.short-study .card-surface .study-card .card-face { padding-top:52px; }
.short-study .card-surface .study-save { position:absolute; z-index:2; top:4px; right:4px; display:grid; place-items:center; width:44px; min-width:44px; max-width:44px; height:44px; min-height:44px; padding:0; border:0; border-radius:12px; background:transparent; color:#82445c; font-size:22px; font-weight:400; line-height:1; }
.short-study .card-surface .study-save:hover { background:#f8e9ef; }
.short-study .card-surface .study-save[aria-pressed=true] { color:#8d3e5b; }
.short-study .card-surface .study-save>span { display:block; line-height:1; }
.card-surface .new-card-badge { top:12px; left:12px; right:auto; min-width:48px; height:24px; padding:0 8px; }
.card-surface .lesson-card .front-word[lang=ko],.card-surface .lesson-card .back-word[lang=ko] { max-width:100%; word-break:keep-all; overflow-wrap:normal; }
.card-surface .lesson-card .front-word[lang=en],.card-surface .lesson-card .back-word[lang=en] { max-width:100%; word-break:normal; overflow-wrap:anywhere; }
.deck-intro>p>.save-hint { display:block; margin:5px 0 0; color:#82445c; }
@media(max-width:600px) {
 .short-study .card-surface .study-save { font-size:20px; }
 .short-study .card-surface .lesson-card .card-face { padding-left:6px; padding-right:6px; }
}
/* Give narrow screens room to keep Korean words intact at the existing font size. */
@media(max-width:383px) {
 .short-study .picture-grid { grid-template-columns:minmax(0,1fr); }
}
/* The filled star and collection count show the result; announce it without moving cards. */
.favorites-entry .study-announcement { position:absolute; width:1px; height:1px; min-height:0; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

/* Only the visible face sets a saved card's height. Long explanations can grow
   after a turn, without making the unopened front equally tall. */
.favorites-grid .card-surface { flex:none; }
.favorites-grid .study-card { min-height:0; height:auto; }
.favorites-grid .card-inner { position:relative; display:block; height:auto; }
.favorites-grid .card-surface .study-card .card-face { position:relative; min-height:var(--favorite-card-min-height); height:auto; padding:52px 18px 20px; overflow:visible; }
.favorites-grid .card-surface .study-card .card-face[aria-hidden=true] { position:absolute; inset:0; min-height:0; height:100%; overflow:hidden; pointer-events:none; }
.favorites-grid .lesson-word-icon { margin-bottom:0; }
@media(max-width:600px) {
 .favorites-grid { --favorite-card-min-height:160px; }
 .favorites-grid .card-surface .study-card .card-face { padding:52px 12px 18px; }
}

.favorite-sync-status { display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:#82445c; font-size:12px; line-height:1.6; }
.favorite-sync-status:empty { display:none; }
.favorite-sync-status button { min-height:44px; padding:6px 12px; border:1px solid #dec5cf; border-radius:12px; background:#fffdfa; color:#75334c; }
.favorite-sync-status button small { display:block; }

.song-deck-content { min-width:0; }

/* Explicit pending feedback fits in the reserved top strip without growing a card. */
.song-card .song-save-control { flex-basis:74px; justify-content:flex-end; }
.short-study .card-surface .study-save[aria-busy=true],.song-card .study-save[aria-busy=true] { width:74px; min-width:74px; max-width:74px; height:44px; min-height:44px; padding:4px; border:1px solid #dfb8c6; background:#f8e9ef; color:#75334c; font-size:10px; cursor:progress; opacity:1; }
.short-study .card-surface .study-save[aria-busy=true]>.save-progress,.song-card .study-save[aria-busy=true]>.save-progress { display:flex; align-items:center; justify-content:center; gap:4px; width:100%; line-height:1.2; }
.save-progress-label { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px; font-weight:700; white-space:nowrap; }
.save-progress-label small { font-size:10px; font-weight:600; }
.save-spinner { flex:none; display:block; box-sizing:border-box; width:12px; height:12px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:favorite-save-spin .8s linear infinite; }
@keyframes favorite-save-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .save-spinner { animation:none; } }