.rarity-badge{display:inline-block;font-size:12px;font-weight:500;color:var(--muted,#656b65);border-left:3px solid var(--rarity-color,#858585);padding:3px 7px;line-height:1.4}
.rarity-gray{--rarity-color:#858585}.rarity-green{--rarity-color:#46875a}.rarity-blue{--rarity-color:#4278b0}.rarity-purple{--rarity-color:#8760ad}.rarity-orange{--rarity-color:#c87932}
.flashcard:has(.rarity-badge){border:0}
.card-top .rarity-badge{background:#fffffff0;color:#53534f;text-shadow:none;border-radius:3px;padding:4px 8px}
.flashcard:has(.rarity-green){--rarity-color:#46875a}.flashcard:has(.rarity-blue){--rarity-color:#4278b0}.flashcard:has(.rarity-purple){--rarity-color:#8760ad}.flashcard:has(.rarity-orange){--rarity-color:#c87932}
.example-entry{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid #c8ccc6;border-radius:8px;background:var(--paper,#fafbf7);box-shadow:0 8px 30px #0002}
.example-entry::backdrop{background:#0002}.example-entry header{display:flex;align-items:center;justify-content:space-between;gap:12px}.example-entry h2{font-size:22px;margin:0}.example-entry p{line-height:1.5}.example-entry label,[data-picker] label,.saved-example label{display:block;font-size:14px}.example-entry textarea,[data-picker] textarea,[data-picker] input,.saved-example textarea,[data-card-links] textarea{display:block;width:100%;box-sizing:border-box;font-size:16px;line-height:1.5;padding:10px;border:1px solid #b9beb7;border-radius:4px;background:#fff;color:#252c27;margin:8px 0 14px;resize:vertical}.example-entry textarea:focus-visible,[data-picker] input:focus-visible,[data-picker] textarea:focus-visible,.saved-example textarea:focus-visible{outline:2px solid #536653;outline-offset:2px}.example-error{color:#9d362e;font-size:14px;min-height:1em}.saved-example,[data-card-links] article{border-bottom:1px solid #dce0d9;padding:14px 0}.saved-example time,.recent-examples small,[data-card-links] small{color:#6e756e;font-size:12px}.saved-example p,.recent-examples p,[data-card-links] p{white-space:pre-wrap;overflow-wrap:anywhere}.link-result{display:block;text-align:left;width:100%;padding:10px 0}.link-result small{display:block}.knowledge-card-photo{width:100%;object-fit:contain;border:0;margin:12px 0}
@media(max-width:600px){.example-entry{padding:18px}.card-top .rarity-badge{max-width:65%;font-size:11px}}
@media(prefers-reduced-motion:reduce){.example-entry{animation:none;transition:none}}
/* A compact paper card floats above the current study card. */
.example-entry{width:min(432px,calc(100vw - 32px));padding:30px;background:#faf9f6;border:1px solid #dddcd7;border-radius:8px;box-shadow:0 12px 36px #2222221c;color:#31332f;max-height:calc(100dvh - 32px)}
.example-entry::backdrop{background:#20231f38;backdrop-filter:none}
.example-entry form{display:flex;flex-direction:column;gap:0;min-height:0}
.example-entry header{margin-bottom:20px;gap:20px}
.example-entry-eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#83857e;font-weight:600}
.example-entry header .icon-button{width:28px;height:28px;min-width:28px;padding:0;display:grid;place-items:center;border:0;background:transparent;color:#74766f;font-size:24px;line-height:1;border-radius:4px}
.example-entry h2{font-size:23px;font-weight:500;line-height:1.3;letter-spacing:-.025em;margin:0;overflow-wrap:anywhere}
.example-entry .example-entry-prompt{font-size:14px;color:#797b73;line-height:1.5;margin:12px 0 20px}
.example-entry .example-entry-label{font-size:12px;color:#777a70;margin:0 0 6px}
.example-entry textarea{border:0;border-bottom:1px solid #cecec6;border-radius:0;background:#f2f1ec;padding:14px;font-size:16px;line-height:1.6;margin:0;min-height:138px;max-height:34dvh;resize:vertical;color:#34362f}
.example-entry textarea::placeholder{color:#9a9b93}
.example-entry textarea:focus,.example-entry textarea:focus-visible,[data-picker] input:focus,[data-picker] input:focus-visible,[data-picker] textarea:focus,[data-picker] textarea:focus-visible,.saved-example textarea:focus,.saved-example textarea:focus-visible,[data-card-links] textarea:focus,[data-card-links] textarea:focus-visible{outline:none!important;box-shadow:none!important;border-color:#9c9f94}
.example-entry .example-error{font-size:12px;line-height:1.4;min-height:0;margin:10px 0 0}
.example-entry .example-error:empty{display:none}
.example-entry [type=submit]{margin-top:24px;min-height:44px;width:100%;background:#373b34;border:1px solid #373b34;border-radius:4px;color:#fff;box-shadow:none}
.example-entry [type=submit]:hover{background:#484d43}
.example-entry [type=submit]:disabled{opacity:.55}
@media(max-width:600px){.example-entry{padding:24px;max-height:calc(100dvh - 24px)}.example-entry header{margin-bottom:16px}.example-entry h2{font-size:21px}.example-entry textarea{max-height:30dvh;min-height:100px}.example-entry [type=submit]{margin-top:18px}}

.rarity-dot{position:absolute;right:16px;bottom:14px;width:10px;height:10px;display:block;background:var(--rarity-color,#858585);border:0;border-radius:50%;pointer-events:none}

/* Shared reading rhythm across card viewers, study details, examples and links. */
.card-reader{font-size:16px;line-height:1.6;color:#343432}
.card-reader-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 20px;font-size:12px;line-height:1.5;color:#77766f;margin:0 0 16px}
.card-reader .card-reader-question{font-size:23px;font-weight:600;line-height:1.35;letter-spacing:-.35px;overflow-wrap:break-word;margin:0 0 24px}
.card-reader-intro{display:flex;align-items:flex-start;gap:24px;margin:0 0 28px}.card-reader-intro .card-reader-question{flex:1;min-width:0;margin:0}.card-reader-intro>.knowledge-card-photo{display:block;width:112px;height:auto;max-height:128px;flex-shrink:0;object-fit:contain;margin:0}
.card-reader .reader-section{margin:0 0 28px}
.card-reader .reader-section h3{font-size:13px;font-weight:600;line-height:1.4;color:#77766f;margin:0 0 10px}
.card-reader .reader-section p{font-size:16px;line-height:1.6;white-space:pre-wrap;overflow-wrap:break-word;margin:0 0 14px}
.card-reader .reader-section p:last-child{margin-bottom:0}
.card-reader .reader-term{font-weight:600}
.examples-section,.links-section{margin-top:28px;padding-top:24px;border-top:1px solid #e7e5df;font-size:15px;line-height:1.6}
.reading-section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.reading-section-heading h2{font-size:17px;font-weight:600;line-height:1.4;letter-spacing:-.15px;margin:0}
.reading-section-heading>.text-button{font-size:13px;min-height:32px}
.example-count{display:flex;align-items:center;gap:8px;font-size:13px;color:#77766f;font-variant-numeric:tabular-nums}
.example-count .rarity-dot{position:static;flex-shrink:0;width:8px;height:8px}
.saved-example,[data-card-links] .saved-link{padding:16px 0;border-bottom:1px solid #eae8e2}
.saved-example:first-of-type,[data-card-links] .saved-link:first-of-type{padding-top:0}
.saved-example:last-of-type,[data-card-links] .saved-link:last-of-type{border-bottom:0}
.saved-example time{display:block;font-size:12px;line-height:1.5;color:#86847c;margin-bottom:7px}
.saved-example p,[data-card-links] .saved-link p{font-size:15px;line-height:1.6;white-space:pre-wrap;overflow-wrap:break-word;margin:0 0 10px}
.reading-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px}
.reading-actions .text-button,[data-card-links] .saved-link>[data-edit],[data-card-links] .saved-link>[data-delete]{font-size:12px;min-height:32px;color:#77766f}
[data-card-links] .saved-link>[data-open]{display:block;text-align:left;font-size:16px;font-weight:550;line-height:1.45;margin:0 0 6px;white-space:normal;overflow-wrap:break-word}
[data-card-links] .saved-link>small{display:block;font-size:12px;line-height:1.5;color:#86847c;margin-bottom:10px}
[data-card-links] .saved-link>[data-delete]{margin-left:16px}
.reading-empty{font-size:14px;line-height:1.6;color:#77766f;margin:0 0 16px;max-width:55ch}
.more-examples{margin-top:12px}.more-examples summary{font-size:13px;line-height:1.5;color:#77766f;cursor:pointer;padding:10px 0}.more-examples[open] summary{margin-bottom:12px}
.links-section>[data-add]{margin-top:12px;font-size:13px;min-height:40px}
.links-section [data-picker]:not(:empty){margin-top:20px;padding-top:20px;border-top:1px solid #eae8e2}
.links-section [data-picker] label,.saved-example label,.saved-link label{font-size:13px;line-height:1.5;font-weight:500}
.details-content{font-size:16px;line-height:1.6;max-width:680px}
.details-content h1{font-size:28px;line-height:1.3;margin-bottom:24px;overflow-wrap:break-word}
.details-content section{margin:28px 0 0}
.details-content section>h2{font-size:15px;line-height:1.4;font-weight:600;margin:0 0 10px}
.details-content p,.details-content .long-text{font-size:16px;line-height:1.6;overflow-wrap:break-word}
.details-content .details-example{padding:0;background:none;border-radius:0}
.details-content .details-note{font-size:12px;line-height:1.5;margin-top:28px}
.editor-body .field-help,.editor-body .form-error{line-height:1.55;overflow-wrap:break-word}
.library-card h3{line-height:1.45}.library-card p{line-height:1.5}
@media(max-width:620px){
 .card-reader .card-reader-question{font-size:21px;line-height:1.4;margin-bottom:20px}
 .card-reader-intro{gap:16px;margin-bottom:24px}.card-reader-intro .card-reader-question{margin:0}.card-reader-intro>.knowledge-card-photo{width:80px;max-height:100px}
 .card-reader .reader-section{margin-bottom:24px}
 .examples-section,.links-section{margin-top:24px;padding-top:20px}
 .saved-example p,[data-card-links] .saved-link p,.reading-empty{font-size:16px}
 .reading-actions .text-button,[data-card-links] .saved-link>[data-edit],[data-card-links] .saved-link>[data-delete]{min-height:40px;font-size:13px}
 .details-content h1{font-size:23px}
 .editor-footer{gap:10px;flex-wrap:wrap}.editor-footer .button{font-size:13px;min-height:42px}
}

.details-content .card-reader-intro h1{flex:1;min-width:0;margin:0;font-size:24px}.details-content .card-reader-intro .details-image{width:112px;height:auto;max-height:128px;flex-shrink:0;padding:0;margin:0;object-fit:contain}.details-content .reader-term{font-weight:600}
@media(max-width:620px){.details-content .card-reader-intro{gap:16px}.details-content .card-reader-intro h1{font-size:21px}.details-content .card-reader-intro .details-image{width:80px;max-height:100px}}

@media(max-width:620px){.card-reader-intro{flex-direction:column;gap:14px}.card-reader-intro>.knowledge-card-photo,.details-content .card-reader-intro .details-image{order:-1;width:64px;max-height:72px}.card-reader-intro .card-reader-question,.details-content .card-reader-intro h1{width:100%;font-size:21px;line-height:1.4}}

/* The personal example takes the card's place, without a modal or dimmed page. */
.card-stage.example-mode>.flashcard,.card-stage.example-mode>.stack-card{visibility:hidden;pointer-events:none}
.example-entry.example-entry-inline{position:absolute;inset:0;width:100%;height:100%;max-height:none;margin:0;padding:20px;border:0;border-radius:var(--study-card-radius,24px);background:#fff;box-shadow:0 12px 32px #4948460c;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;z-index:3}
.example-entry-inline form{min-height:100%;display:flex;flex-direction:column}
.example-entry-inline header{margin-bottom:12px}
.example-entry-inline .example-entry-eyebrow{font-size:12px;letter-spacing:0;text-transform:none;font-weight:500}
.example-entry-inline h2{font-size:18px;line-height:1.4;font-weight:600;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.example-entry-inline .example-entry-prompt{font-size:13px;margin:10px 0 14px}
.example-entry-inline textarea{flex:1;min-height:100px;max-height:none;resize:none;background:#f6f5f2;border:1px solid var(--line,#e2e1df);border-radius:4px;font-size:16px;padding:12px;margin:0}
.example-entry-inline [type=submit]{margin-top:14px;flex-shrink:0;background:var(--ink,#30302e);border-color:var(--ink,#30302e)}
.study-shell:has(.example-entry-inline) .grade-buttons,.study-shell:has(.example-entry-inline) .study-meta,.study-shell:has(.example-entry-inline) .direction-hint,.study-shell:has(.example-entry-inline) .tap-label{visibility:hidden;pointer-events:none}
@media(max-width:620px){.example-entry.example-entry-inline{padding:18px}.example-entry-inline h2{font-size:17px}.example-entry-inline header{margin-bottom:10px}}
.card-reader-intro>.knowledge-card-photo,.details-content .card-reader-intro .details-image{width:112px;height:112px;aspect-ratio:1/1;max-height:none;object-fit:cover;padding:0;margin:0}
@media(max-width:620px){.card-reader-intro>.knowledge-card-photo,.details-content .card-reader-intro .details-image{width:64px;height:64px;max-height:none}}