/* Fiche d'un mot (même présentation dans « Traduire » et « Mes mots ») */

.case-pill { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 12px; padding: 1px 8px; border-radius: 99px; border: 1px solid currentColor; }
.prep-name { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink); }
.c-gen { color: var(--gen); } .c-akk { color: var(--akk); } .c-dat { color: var(--dat); }
mark.pg { background: transparent; color: inherit; font-weight: 700; border-bottom: 2px solid currentColor; }
mark.pg.c-gen { color: var(--gen); } mark.pg.c-akk { color: var(--akk); } mark.pg.c-dat { color: var(--dat); }
.entries { display: flex; flex-direction: column; gap: 12px; }
.entry { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.panel .entry { background: var(--bg); }
.entry-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.entry-n { font-family: var(--f-mono); font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.entry-w { font-family: var(--f-display); font-size: 24px; line-height: 1.2; }
.entry-place { font-size: 12.5px; color: var(--muted); }
.entry-head .del, .entry-head .tag { margin-left: auto; }
.entry .entry-tr { margin: -4px 0 0; font-size: 17px; font-weight: 600; color: var(--ink); }
.entry-facts { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; font-size: 15px; }
.entry-facts b { font-weight: 600; }
.entry .trc-ex { padding-top: 10px; }
.entry-conj { margin: 0; font-size: 14.5px; border-top: 1px dashed var(--line); padding-top: 10px; }
.entry-conj b { font-weight: 600; }
.empty-note { color: var(--muted); padding: 10px 2px; margin: 0; }
/* translate tab: each part of a card fades in as soon as the AI has written it (js/pages/translate.js, growEntry) */
.entry-busy { margin-left: auto; font-size: 12.5px; color: var(--muted); font-style: italic; }
.entry-busy::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: var(--accent); vertical-align: 1px; animation: busy 1s ease-in-out infinite; }
@keyframes busy { 50% { opacity: .2; transform: scale(.7); } }
.entry [data-appear] { animation: partIn .5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes partIn { from { opacity: 0; transform: translateY(8px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
.entry { transition: opacity .3s, transform .3s; }
.entry.gone { opacity: 0; transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .entry [data-appear], .entry-busy::after { animation: none; } }
/* verb family on an oval (js/core/word-entry.js, entryFamilyHTML) */
.entry-fam { border-top: 1px dashed var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.entry-fam .k { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.entry-fam .k span { text-transform: none; letter-spacing: 0; font-family: var(--f-display); font-size: 14px; color: var(--ink); }
.fam-ring { position: relative; width: 100%; max-width: 520px; aspect-ratio: 16 / 10; margin: 4px auto 6px; }
.fam-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fam-ring line { stroke: var(--line); stroke-width: .35; vector-effect: non-scaling-stroke; }
.fam-ring ellipse { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.fr-hub, .fr-node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.15; }
.fr-hub { left: 50%; top: 50%; padding: 8px 12px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--bg); }
.fr-hub b { font-family: var(--f-display); font-size: 16px; }
.fr-hub small, .fr-node small { font-size: 11.5px; color: var(--muted); font-style: italic; }
.fr-node { background: var(--surface); padding: 2px 6px; border-radius: 8px; white-space: nowrap; }
.panel .entry .fr-node { background: var(--bg); }
.fr-node span { font-family: var(--f-display); font-size: 14.5px; }
.fr-pre { color: #c62828; }
.fr-node.cur { outline: 2px solid #c62828; outline-offset: 1px; }
@media (max-width: 480px) { .fam-ring { aspect-ratio: 1 / 1; } .fr-node span { font-size: 12.5px; } .fr-hub small, .fr-node small { font-size: 10px; } .fr-hub b { font-size: 14px; } }
/* "Pour retenir": the AI's memory hook at the end of a card, with a delete button and a note that it is an AI suggestion */
.entry-memo { border-top: 1px dashed var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 3px; transition: opacity .25s; }
.entry-memo.gone { opacity: 0; }
.entry-memo .k { display: flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.entry .entry-memo p { margin: 0; font-style: italic; font-size: 15px; color: var(--ink); }
.entry-memo small { font-size: 11.5px; color: var(--muted); }

/* a word typed again in "Traduire" that is already in "Mes mots": its card, greyed out */
.entry.in-list { background: var(--bg); border-style: dashed; }
.entry.in-list > :not(.entry-head), .entry.in-list .entry-w, .entry.in-list .entry-n { opacity: .55; filter: grayscale(1); }
.entry.in-list .in-list-tag { font: inherit; font-size: 12px; font-weight: 600; border: 0; cursor: pointer; padding: 3px 10px; background: var(--accent-soft); color: var(--accent); }
.entry.in-list .in-list-tag::before { content: "✓ "; }
.entry-memo .ex-acts { margin-left: auto; text-transform: none; letter-spacing: 0; }
.entry-memo.busy p { opacity: .45; }

/* "Supprimer de mes mots" (translate tab, review) */
.tr-del { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12.5px; border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer; padding: 4px 8px; border-radius: 8px; margin-left: auto; }
.entry-head .in-list-tag + .tr-del { margin-left: 6px; }
.tr-del:hover { color: var(--again); border-color: var(--line); }
.tr-del.confirm { color: #fff; background: var(--again); border-color: var(--again); }
.rv-del { align-self: center; margin-left: 0; }
@media (max-width: 480px) { .tr-del span { display: none; } .tr-del.confirm span { display: inline; } }
.fr-node .web-link, .web-link { display: block; font-style: italic; font-size: 10.5px; color: var(--accent); opacity: .85; }
.famlist .web-link { display: inline; margin-left: 4px; }
.fr-node i[class^="art-"] { font-style: normal; font-weight: 600; }