/* «بطاقات التأمل» — /cards/ only. */
.cd { color: var(--ink); padding-bottom: 48px; }
.cd-head { padding: 16px 0 20px; }
.cd-kicker { margin: 0 0 8px; color: var(--rubric); font: 500 14px/22px var(--f-body); }
.cd-head h1 { margin: 0 0 12px; font: 700 32px/44px var(--f-display); }
.cd-lede { margin: 0; max-width: 40em; color: var(--ink-2); font-size: 17px; line-height: 32px; }
.cd-modes { display: inline-flex; gap: 4px; padding: 4px; background: var(--night-2); border: 1px solid var(--rule); border-radius: 99px; margin: 0 0 18px; }
.cd-mode { padding: 9px 16px; border-radius: 99px; border: 0; background: none; color: var(--ink-2); font: 500 14px/1 var(--f-body); cursor: pointer; }
.cd-mode.is-on { background: var(--gold); color: var(--night); font-weight: 600; }
.cd-table { margin: 0 0 36px; padding: 20px 14px 18px; background: radial-gradient(600px 300px at 50% 0, rgba(217, 180, 90, .08), transparent 70%), var(--night-2); border: 1px solid var(--rule); border-radius: 18px; text-align: center; }
.cd-hint { margin: 0 0 14px; color: var(--ink-3); font-size: 14px; }
.cd-spread { display: grid; gap: 14px; justify-items: center; margin: 0 0 16px; }
.cd-spread.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.cd-card { width: 100%; max-width: 220px; }
.cd-spread.is-three .cd-card { max-width: 150px; }
.cd-card__flip { position: relative; display: block; width: 100%; aspect-ratio: 5 / 8; perspective: 1200px; background: none; border: 0; padding: 0; cursor: pointer; }
.cd-face { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; border-radius: 14px; border: 1px solid var(--gold); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .7s cubic-bezier(.2, .7, .2, 1); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7); }
.cd-face--back { background: repeating-linear-gradient(45deg, rgba(217, 180, 90, .08) 0 6px, transparent 6px 14px), linear-gradient(160deg, var(--night-3), var(--night)); }
.cd-face--back i { width: 44%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--gold); box-shadow: inset 0 0 0 6px var(--night), inset 0 0 0 7px rgba(217, 180, 90, .5); }
.cd-face--back em { font: 500 13px/1.4 var(--f-body); font-style: normal; color: var(--ink-2); padding: 0 8px; }
.cd-face--front { background: linear-gradient(170deg, #F3ECDD, #E8DEC6); color: #1a1730; transform: rotateY(180deg); padding: 10px; }
.cd-face--front svg { width: 46%; height: auto; }
.cd-face--front svg path { fill: none; stroke: #6B4F12; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cd-face--front b { font: 700 20px/1.2 var(--f-display); color: #1a1730; }
.cd-face--front small { font-size: 12px; color: #5b566e; }
.cd-card.is-flipped .cd-face--back { transform: rotateY(-180deg); }
.cd-card.is-flipped .cd-face--front { transform: rotateY(0); }
.cd-read { margin: 10px 0 0; text-align: start; color: var(--ink-2); line-height: 1.9; font-size: 14px; }
.cd-read__slot { margin: 0 0 4px; color: var(--gold-hi); font-weight: 600; }
.cd-read p { margin: 0 0 6px; }
.cd-read__q { color: var(--ink) !important; font-weight: 600; border-inline-start: 2px solid var(--gold); padding-inline-start: 8px; }
.cd-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.cd-note { margin: 12px 0 0; color: var(--ink-2); }
.cd-note b { color: var(--gold-hi); }
.cd-deck h2, .cd-prose h2 { font: 700 24px/34px var(--f-display); margin: 0 0 10px; }
.cd-grid { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cd-mini { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; background: var(--night-2); border: 1px solid var(--rule); border-radius: 12px; text-align: center; }
.cd-mini svg { width: 36px; height: 36px; }
.cd-mini svg path { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cd-mini b { font: 600 14px/1.3 var(--f-display); color: var(--ink); }
.cd-mini span { font-size: 11px; color: var(--ink-3); line-height: 1.4; }
.cd-prose p { color: var(--ink-2); line-height: 1.95; margin: 0 0 12px; max-width: 42em; }
.cd-prose p b { color: var(--ink); }
.cd-prose details { border-bottom: 1px solid var(--rule); padding: 10px 0; max-width: 42em; }
.cd-prose summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.cd-prose details p { margin: 8px 0 0; }
@media (min-width: 720px) { .cd-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .cd-spread.is-three .cd-card { max-width: 200px; } .cd-table { padding: 28px 24px 24px; } }
@media (prefers-reduced-motion: reduce) { .cd-face { transition: none; } }