/* Saved sentences: flashcards in the style of the shared pictures (night sky, double gold frame, corner flourishes);
   a tap turns a card over to the translation */
.cd { padding: 36px 40px 20px; }
.cd-head { text-align: center; }
.cd-head h1 { margin: 0; font: 600 44px var(--display); color: #fff; }
.cd-head p { margin: 6px 0 0; font-size: 15px; color: var(--lav-2); }
.cd-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 6px; }
.cd-filter:empty { display: none; }
.cd-filter button { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(214, 182, 120, .35); background: none; cursor: pointer; font: 14px var(--sans); color: var(--lav); }
.cd-filter button small { color: var(--lav-3); margin-left: 3px; }
.cd-filter button[aria-pressed="true"] { background: rgba(214, 182, 120, .2); border-color: var(--gold); color: #fff; }
.cd-empty { max-width: 560px; margin: 40px auto; text-align: center; font-size: 16px; line-height: 1.6; color: var(--lav-2); }
.cd-empty kbd { padding: 1px 7px; border-radius: 5px; border: 1px solid rgba(214, 182, 120, .4); font: 600 13px var(--sans); color: var(--gold); }
.cd-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-top: 26px; }
.cd-card { display: flex; flex-direction: column; gap: 10px; width: 320px; }
.cd-flip { position: relative; aspect-ratio: 4 / 5; cursor: pointer; perspective: 1400px; outline: 0; }
.cd-flip.one { cursor: default; }
.cd-face { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 34px 30px; text-align: center;
  border-radius: 6px; border: 1px solid rgba(214, 182, 120, .6); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .6s cubic-bezier(.3, .7, .3, 1);
  background: radial-gradient(ellipse 80% 60% at 50% 42%, rgba(126, 88, 214, .38), transparent 70%), linear-gradient(180deg, #0b0f27, #1b1446);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.cd-face::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(214, 182, 120, .3); pointer-events: none; }
.cd-back { transform: rotateY(180deg); background: radial-gradient(ellipse 80% 60% at 50% 42%, rgba(214, 182, 120, .2), transparent 70%), linear-gradient(180deg, #13183a, #221a4d); }
.cd-flip.over .cd-front { transform: rotateY(-180deg); }
.cd-flip.over .cd-back { transform: rotateY(0); }
.cd-flip:focus-visible .cd-face { outline: 2px solid var(--gold); outline-offset: 3px; }
.cd-c { position: absolute; width: 26px; height: 26px; fill: none; stroke: #e3c98f; stroke-width: 1.3; }
.cd-c circle { fill: #e3c98f; stroke: none; }
.cd-c:nth-of-type(1) { top: -1px; left: -1px; }
.cd-c:nth-of-type(2) { top: -1px; right: -1px; transform: scaleX(-1); }
.cd-c:nth-of-type(3) { bottom: -1px; left: -1px; transform: scaleY(-1); }
.cd-c:nth-of-type(4) { bottom: -1px; right: -1px; transform: scale(-1); }
.cd-mark { height: 30px; margin-bottom: 6px; font: 600 54px/1 var(--display); color: #e3c98f; }
.cd-t { margin: 0; font: italic 500 25px/1.4 var(--display); color: #f4efff; text-wrap: balance; }
.cd-orn { width: 140px; height: 16px; margin: 16px 0 8px; fill: #e3c98f; opacity: .85; }
.cd-orn .ln { fill: none; stroke: #e3c98f; stroke-width: .8; }
.cd-src { font: 500 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #b3aad6; }
.cd-back .cd-src::before { content: "↺ "; }
.cd-acts { display: flex; gap: 8px; }
.cd-acts a, .cd-acts button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(214, 182, 120, .38); background: none;
  cursor: pointer; font: 600 13px var(--sans); color: var(--gold); text-decoration: none; }
.cd-acts a:hover, .cd-acts button:hover { background: rgba(214, 182, 120, .12); }
.cd-acts svg { width: 15px; height: 15px; }
.cd-acts button[data-a="share"] { flex: 1; justify-content: center; }
.cd-acts button[data-a="del"] { padding: 8px 10px; color: var(--lav-3); border-color: rgba(214, 182, 120, .2); }
.cd-acts button:disabled { opacity: .5; }
html[data-theme="light"] .cd-head h1 { color: #2a2622; }
html[data-theme="light"] .cd-filter button { border-color: #d8ccb6; }
html[data-theme="light"] .cd-filter button[aria-pressed="true"] { background: #fff; color: #2a2622; border-color: #9c7536; }
html[data-theme="light"] .cd-face { border-color: rgba(156, 117, 54, .6); background: radial-gradient(ellipse 80% 60% at 50% 42%, rgba(214, 182, 120, .25), transparent 70%), linear-gradient(180deg, #fbf7ef, #efe5d2); box-shadow: 0 16px 34px rgba(60, 40, 10, .16); }
html[data-theme="light"] .cd-back { background: radial-gradient(ellipse 80% 60% at 50% 42%, rgba(142, 77, 104, .1), transparent 70%), linear-gradient(180deg, #fffaf2, #f3ead8); }
html[data-theme="light"] .cd-face::before { border-color: rgba(156, 117, 54, .3); }
html[data-theme="light"] .cd-c { stroke: #9c7536; }
html[data-theme="light"] .cd-c circle, html[data-theme="light"] .cd-orn { fill: #9c7536; }
html[data-theme="light"] .cd-orn .ln { stroke: #9c7536; }
html[data-theme="light"] .cd-mark { color: #9c7536; }
html[data-theme="light"] .cd-t { color: #2a2622; }
html[data-theme="light"] .cd-src { color: #7a7064; }
html[data-theme="light"] .cd-acts a, html[data-theme="light"] .cd-acts button { color: #9c7536; border-color: #d8ccb6; }
@media (max-width: 700px) {
  .cd { padding: 20px 16px 10px; }
  .cd-head h1 { font-size: 34px; }
  .cd-card { width: min(360px, 100%); }
  .cd-filter { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 16px -16px 0; padding: 0 16px; scrollbar-width: none; }
  .cd-filter button { flex: none; }
}