/* Hallmark ? component: flashcard session ? genre: editorial ? theme: Japanese notebook
 * Existing tokens ? pre-emit critique: P4 H5 E5 S4 R5 V4 */
.flashcard-workspace{max-width:760px;margin:24px auto 0;min-width:0}
.flashcard-context{display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;margin:0 0 16px;flex-wrap:wrap;font-size:var(--text-sm)}
.flashcard-context>a:first-child{min-width:0;overflow-wrap:anywhere}
.flashcard-context>a:last-child{flex-shrink:0;color:var(--color-muted)}
.flashcard-session{border:1px solid var(--color-rule);border-radius:6px;background:var(--color-surface);padding:28px;min-width:0}
.flashcard-session{scroll-margin-top:calc(var(--header-height) + 16px)}
.flashcard-session [hidden]{display:none!important}
.flashcard-session-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;min-width:0}
.flashcard-session-head h3{font-size:18px;font-weight:600;min-width:0}
.flashcard-session-head [data-card-progress]{font-size:14px;font-variant-numeric:tabular-nums;color:var(--color-muted);white-space:nowrap;flex-shrink:0}
.flashcard-session progress{display:block;width:100%;height:4px;margin:16px 0 28px;appearance:none;border:0;background:var(--color-rule);color:var(--color-accent);border-radius:2px;overflow:clip}
.flashcard-session progress::-webkit-progress-bar{background:var(--color-rule);border-radius:2px}
.flashcard-session progress::-webkit-progress-value{background:var(--color-accent);border-radius:2px}
.flashcard-session progress::-moz-progress-bar{background:var(--color-accent);border-radius:2px}
.flashcard-setup h4{font-size:20px;line-height:1.5;margin:0 0 20px}
.flashcard-groups{border:0;padding:0;margin:0 0 24px;min-width:0}
.flashcard-groups legend{font-size:15px;font-weight:600;padding:0;margin-bottom:6px}
.flashcard-setup-hint{font-size:13px;line-height:1.6;color:var(--color-muted);margin:0 0 12px}
.flashcard-group-toggle{display:flex;flex-direction:row;align-items:center;gap:12px;padding:14px 0;min-height:68px;border-bottom:1px solid var(--color-rule);cursor:pointer}
.flashcard-group-symbol{font:500 24px/1.4 var(--font-japanese);color:var(--color-ink);width:48px;flex-shrink:0;text-align:center}
.flashcard-group-name{min-width:0;flex:1;overflow-wrap:anywhere}
.flashcard-group-name strong{display:block;font-size:14px;font-weight:500;line-height:1.6}
.flashcard-group-name small{display:block;font-size:12px;line-height:1.6;color:var(--color-muted);margin-top:2px}
.flashcard-group-toggle:has(:checked) strong{font-weight:600}
.flashcard-group-toggle.is-unavailable{opacity:.55;cursor:not-allowed}
.flashcard-count-setting{display:grid;grid-template-columns:minmax(0,1fr) 96px;align-items:center;gap:6px 20px;margin:0 0 24px}
.flashcard-count-setting label{font-size:15px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.flashcard-count-setting input{font-size:16px;font-variant-numeric:tabular-nums;text-align:center}
.flashcard-count-setting input:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.flashcard-count-setting input:active{background:var(--color-paper-2)}
.flashcard-count-setting small{grid-column:1/-1;font-size:13px;line-height:1.6;color:var(--color-muted)}
.flashcard-setup-error{font-size:13px;line-height:1.6;margin:0 0 16px;padding:12px;border:1px solid var(--color-error);border-radius:4px;background:var(--color-accent-soft);color:var(--color-error)}
.flashcard-question-toggle{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:24px;min-height:88px;padding:18px 0;border-top:1px solid var(--color-rule);border-bottom:1px solid var(--color-rule);margin:0 0 24px;cursor:pointer}
.flashcard-question-toggle>span{min-width:0;flex:1}
.flashcard-question-toggle strong{display:block;font-size:15px;color:var(--color-ink);font-weight:600}
.flashcard-question-toggle small{display:block;font-size:13px;margin-top:6px;line-height:1.6}
.flashcard-question-toggle input,.flashcard-group-toggle input{appearance:none;position:relative;width:44px;height:26px;border:0;border-radius:20px;background:var(--color-rule);padding:4px;flex-shrink:0;cursor:pointer}
.flashcard-question-toggle input::before,.flashcard-group-toggle input::before{content:'';display:block;width:18px;height:18px;border-radius:50%;background:var(--color-surface)}
.flashcard-question-toggle input:checked,.flashcard-group-toggle input:checked{background:var(--color-accent)}
.flashcard-question-toggle input:checked::before,.flashcard-group-toggle input:checked::before{transform:translateX(18px)}
.flashcard-question-toggle input:focus-visible,.flashcard-group-toggle input:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}
.flashcard-question-toggle input:active,.flashcard-group-toggle input:active{background:var(--color-muted)}
.flashcard-question-toggle input:disabled,.flashcard-group-toggle input:disabled{opacity:.5;cursor:not-allowed}
.flashcard{min-width:0;overflow-wrap:anywhere}
.flashcard-session[data-phase=browse] .flashcard{touch-action:pan-y pinch-zoom;transform:translate3d(var(--flashcard-drag,0),0,0);backface-visibility:hidden}
.flashcard-session[data-phase=browse] .flashcard:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}
.flashcard-session[data-phase=browse] :is(.flashcard.is-swiping,.is-card-moving,.is-departing-card){will-change:transform,opacity}
.flashcard-session .is-departing-card{pointer-events:none;z-index:1}
.flashcard-session[data-phase=browse] .flashcard.is-swiping,.flashcard-session[data-phase=browse] .flashcard.is-swiping [data-read-content]{-webkit-user-select:none;user-select:none}
.flashcard-swipe-hint{text-align:center;font-size:13px;line-height:1.6;color:var(--color-muted);margin:16px 0 0;padding-inline:16px}
.flashcard-display{text-align:center;padding:24px;border:1px solid var(--color-rule);border-radius:4px;background:var(--color-paper-2);min-height:200px;display:flex;flex-direction:column;justify-content:center}
.flashcard-prompt{font-size:13px;line-height:1.5;color:var(--color-muted)}
.flashcard-front{font:500 clamp(48px,6vw,80px)/1.4 var(--font-japanese);color:var(--color-ink);margin:18px 0 12px;min-width:0;overflow-wrap:anywhere}
.flashcard-front-word{font-size:clamp(32px,4.5vw,56px)}
.flashcard-front-long{font-size:clamp(22px,3vw,34px);font-family:var(--font-body);line-height:1.55}
.flashcard-display [data-card-answer]{margin-top:16px;padding-top:20px;border-top:1px solid var(--color-rule)}
.flashcard-reading{font-size:20px;font-weight:600;line-height:1.6;color:var(--color-ink)}
.flashcard-meaning{font-size:18px;line-height:1.6;color:var(--color-ink);margin:6px 0 16px}
.flashcard-display [data-card-answer]>.btn{margin-top:12px}
.flashcard-image{display:block;max-width:100%;height:auto;max-height:240px;object-fit:contain;margin:16px auto}
.flashcard-question{margin-top:24px;text-align:left}
.flashcard-question h4{font-size:16px;font-weight:600;line-height:1.6;margin:0 0 14px}
.flashcard-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.flashcard-option{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;min-height:52px;padding:12px 16px;border:1px solid var(--color-rule);border-radius:4px;background:var(--color-surface);color:var(--color-ink);font-size:15px;font-weight:500;line-height:1.5;text-align:left}
.flashcard-option>span{min-width:0;overflow-wrap:anywhere}
.flashcard-option svg{display:none;width:16px;height:16px;flex-shrink:0}
.flashcard-option:focus-visible,.flashcard-option.is-focus{outline:2px solid var(--color-focus);outline-offset:2px}
.flashcard-option:active:not(:disabled),.flashcard-option.is-active{background:var(--color-paper-3)}
.flashcard-option.is-wrong{border-color:var(--color-error);background:var(--color-accent-soft);color:var(--color-error)}
.flashcard-option.is-wrong .flashcard-option-cross{display:block}
.flashcard-option.is-correct{border-color:var(--color-success);background:var(--color-success-soft);color:var(--color-success)}
.flashcard-option.is-correct .flashcard-option-check{display:block}
.flashcard-option:disabled{cursor:not-allowed;opacity:.55}
.flashcard-option.is-wrong:disabled,.flashcard-option.is-correct:disabled{opacity:1}
.flashcard-option[aria-busy=true]{cursor:wait;border-style:dotted}
.flashcard-feedback{font-size:13px;line-height:1.6;margin:14px 0 0;color:var(--color-error)}
.flashcard-feedback:empty{display:none}
.flashcard-feedback.is-correct{color:var(--color-success)}
.flashcard-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px;align-items:stretch}
.flashcard-actions .btn{min-width:0;min-height:48px;padding:12px 8px;font-size:14px;white-space:nowrap}
.flashcard-actions [data-card-next]{grid-column:1/-1}
.flashcard-session[data-phase=question] .flashcard-actions{display:flex;justify-content:flex-end}
.flashcard-session[data-phase=question] .flashcard-actions [data-card-skip]{padding-inline:24px}
.flashcard-session[data-phase=question] .flashcard-actions [data-card-next]{width:100%}
.flashcard-actions .btn[aria-busy=true]{cursor:wait}
.flashcard-status{min-height:24px;margin-top:10px;font-size:13px;line-height:1.6}
.flashcard-status [data-card-error]:empty{display:none}
.flashcard-status [data-card-error]:not(:empty){padding:12px 14px;border:1px solid var(--color-error);border-radius:4px;background:var(--color-accent-soft);color:var(--color-error)}
.flashcard-saving{display:inline-flex;align-items:center;gap:8px;color:var(--color-muted)}
.flashcard-saving::before{content:'';width:12px;height:12px;border:2px solid var(--color-rule);border-right-color:var(--color-ink);border-radius:50%;animation:flashcard-saving-spin .9s linear infinite}
@keyframes flashcard-saving-spin{to{transform:rotate(360deg)}}
.flashcard-complete{text-align:center;padding:12px 0 8px}
.flashcard-complete-mark{width:36px;height:36px;color:var(--color-success);margin:0 auto 16px}
.flashcard-complete h4{font-size:24px;line-height:1.4}
.flashcard-complete .flashcard-summary{margin:16px 0 10px;font-size:14px;font-variant-numeric:tabular-nums;color:var(--color-ink)}
.flashcard-complete p:not(.flashcard-summary){font-size:14px;line-height:1.6;max-width:46ch;margin:0 auto 24px}
.flashcard-complete .btn{white-space:nowrap}
.flashcard-access-note{font-size:12px;line-height:1.7;margin-top:16px;color:var(--color-muted)}
.flashcard-access-note .text-link{font-size:inherit;white-space:nowrap;margin-left:4px}
.flashcard-empty{padding:40px 24px;border:1px solid var(--color-rule);border-radius:6px;background:var(--color-surface)}
.flashcard-empty>svg{width:32px;height:32px;margin:0 auto 16px;color:var(--color-muted)}
.flashcard-empty h3{font-size:20px;line-height:1.5;max-width:38ch;margin:0 auto 24px}
.flashcard-empty .btn{white-space:nowrap}
.flashcard-question,.flashcard-actions{scroll-margin-bottom:100px}
@media(hover:hover){.flashcard-option:not(:disabled):hover,.flashcard-option.is-hover{background:var(--color-paper-2);border-color:var(--color-muted)}.flashcard-question-toggle:hover strong,.flashcard-group-toggle:not(.is-unavailable):hover strong{color:var(--color-accent)}.flashcard-count-setting input:not(:disabled):hover{border-color:var(--color-muted)}}
@media(max-width:767px){.flashcard-workspace{margin-top:20px}.flashcard-session{padding:20px}.flashcard-session-head h3{font-size:16px}.flashcard-session progress{margin:14px 0 22px}.flashcard-display{padding:20px 16px;min-height:180px}.flashcard-question-toggle{gap:16px}.flashcard-front{font-size:56px}.flashcard-front-word{font-size:36px}.flashcard-front-long{font-size:24px}.flashcard-actions{margin-top:20px}.flashcard-context{gap:8px 16px}}
@media(max-width:359px){.flashcard-session{padding:16px}.flashcard-actions{grid-template-columns:1fr}.flashcard-actions [data-card-skip]{order:2}.flashcard-options{gap:8px}.flashcard-option{padding:10px;font-size:14px;min-height:48px}.flashcard-display{padding-inline:12px}.flashcard-front-long{font-size:22px}.flashcard-complete .btn{width:100%;font-size:13px}}
@media(prefers-reduced-motion:reduce){.flashcard-saving::before{animation:none}.flashcard-session[data-phase=browse] .flashcard{transition:none}}
/* The admin workspace shares this stylesheet. */
.admin-quick-actions{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 28px}
.editor-related{margin-top:32px;max-width:780px}
.editor-related .inline-actions{flex-wrap:wrap}