/* Page « Traduire » : formulaire, choix Hochdeutsch / Schweizerdeutsch, légende des prépositions */

.guest-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; background: var(--accent-soft); border-radius: 9px; padding: 8px 12px; }
.tr-out { display: flex; flex-direction: column; gap: 12px; }
.trc-ex { border-top: 1px dashed var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.trc-ex .k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.trc-ex .de { font-family: var(--f-display); font-size: 18px; line-height: 1.5; }
.trc-ex .tr { color: var(--muted); font-size: 14px; }
.trc-ex .ex-line { display: flex; align-items: flex-start; gap: 8px; }
.tr-legend { font-size: 14px; color: var(--muted); }
.tr-legend summary { cursor: pointer; }
.tr-legend ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.tr-legend b { font-weight: 600; }
/* v3: translate entries, premium, footer */
.tr-place { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tr-place label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.tr-place label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.tr-place input { font: inherit; font-size: 15px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink); padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); }
@media (max-width: 480px) { .tr-place { grid-template-columns: 1fr; } }
.save-hint { margin: 0; }
.variant-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.variant-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.seg.variant button { font-size: 13.5px; padding: 6px 12px; }

/* ↻ / 🗑 on an example sentence */
.ex-acts { margin-left: auto; display: inline-flex; gap: 2px; }
.ex-act { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; padding: 0; }
.ex-act:hover { background: var(--bg); color: var(--accent); }
.ex-act.del:hover { color: var(--again); }
.ex-act.err { color: var(--again); }
.ex-act.spin svg { animation: ex-spin .9s linear infinite; }
@keyframes ex-spin { to { transform: rotate(360deg); } }
.trc-ex.busy .de, .trc-ex.busy .tr { opacity: .45; transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) { .ex-act.spin svg { animation: none; } }

/* books and chapters already in "Mes mots", under "Livre / source" */
.tr-pick { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.tr-pick-h { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.tr-pick-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 180px; overflow-y: auto; }
.tr-pick-list button { font: inherit; font-size: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 99px; padding: 5px 12px; cursor: pointer; display: inline-flex; gap: 6px; align-items: baseline; }
.tr-pick-list button:hover { border-color: var(--accent); }
.tr-pick-list small { color: var(--muted); font-size: 12px; }