/* TarotTheme — inner pages: readings hub, reading (deck), result, card of the
   day, card meanings, single card, My Reading, static pages. */

.tt-page-body { padding-top: 30px; }
.tt-section { margin-top: 34px; }
.tt-section-head { text-align: center; margin-bottom: 18px; }
.tt-section-head h2 { font-family: var(--tt-serif); color: var(--tt-navy); font-size: clamp(21px, 1.8vw, 26px); }
.tt-section-head p { font-size: 13.5px; color: var(--tt-muted); margin-top: 6px; }

/* ── Readings hub ───────────────────────────────────────────────────────── */
.tt-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tt-hub-grid .tt-r-card { padding: 12px 18px 20px; }
.tt-hub-grid .tt-r-card p { max-width: 280px; }
.tt-hub-meta { font-size: 12px; color: var(--tt-muted); margin: -6px 0 12px; }

/* ── Reading page: question + deck ──────────────────────────────────────── */
.tt-reading-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.tt-step-label { display: flex; align-items: center; gap: 10px; font-family: var(--tt-serif); color: var(--tt-navy); font-size: 19px; margin-bottom: 10px; }
.tt-step-label b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--tt-purple); color: #fff; font: 600 14px var(--tt-sans); flex: 0 0 auto; }
.tt-question { width: 100%; min-height: 74px; resize: vertical; border: 1px solid #d8cfe8; border-radius: 12px; padding: 12px 14px; font: 15px var(--tt-sans); color: var(--tt-text); background: #fff; }
.tt-question:focus { outline: none; border-color: var(--tt-purple); box-shadow: 0 0 0 3px rgba(74, 42, 134, .14); }
.tt-q-note { font-size: 12px; color: #8f8aa3; margin-top: 6px; }
.tt-deck-wrap { margin-top: 26px; }
.tt-deck-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.tt-deck-count { font-size: 14px; color: var(--tt-muted); }
.tt-deck-count b { color: var(--tt-purple); }
.tt-deck { display: grid; grid-template-columns: repeat(7, minmax(0, 72px)); justify-content: center; gap: 10px; padding: 18px; border-radius: 16px;
  background: radial-gradient(ellipse at 50% 0%, rgba(150, 70, 130, .35), transparent 70%), linear-gradient(180deg, #371c52, #4a2463); }
.tt-deck-card { appearance: none; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 8px; transition: transform .2s, opacity .2s; }
.tt-deck-card .tt-card-back { width: 100%; border-radius: 7px; }
.tt-deck-card .tt-card-back::after { font-size: 15px; }
.tt-deck-card:hover:not([disabled]) { transform: translateY(-6px); }
.tt-deck-card.is-picked { transform: translateY(-10px) scale(.94); opacity: .28; cursor: default; }
.tt-deck-card[disabled]:not(.is-picked) { opacity: .6; cursor: default; }
.tt-deck { position: relative; }
.tt-shuffle-btn[disabled] { opacity: .6; cursor: wait; }

.tt-slots { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.tt-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.tt-slot-box { --w: 88px; width: var(--w); aspect-ratio: 300 / 518; border: 2px dashed #cdbfe6; border-radius: 8px; display: grid; place-items: center; color: #b5a6d4; font-size: 22px; background: #faf7ff; }
.tt-slot-box .tt-card-back { --w: 88px; animation: tt-pop .3s ease; }
@keyframes tt-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.tt-slot strong { font-size: 13px; color: var(--tt-navy); }
.tt-slot small { font-size: 11.5px; color: var(--tt-muted); max-width: 130px; line-height: 1.3; }
.tt-reveal-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.tt-noscript { margin-top: 12px; text-align: center; font-size: 14px; }
.tt-noscript a { color: var(--tt-purple); text-decoration: underline; }

.tt-side-card h3 { font-family: var(--tt-serif); color: var(--tt-navy); font-size: 17px; margin-bottom: 10px; }
.tt-pos-list { list-style: none; margin: 0; padding: 0; counter-reset: pos; }
.tt-pos-list li { counter-increment: pos; padding: 9px 0 9px 36px; position: relative; border-bottom: 1px solid #f1ebdf; font-size: 13.5px; }
.tt-pos-list li:last-child { border-bottom: 0; }
.tt-pos-list li::before { content: counter(pos); position: absolute; left: 0; top: 9px; width: 24px; height: 24px; border-radius: 50%; background: var(--tt-yes); color: var(--tt-purple); font-weight: 600; font-size: 12px; display: grid; place-items: center; }
.tt-pos-list b { display: block; color: var(--tt-navy); }
.tt-tips { margin: 14px 0 0; padding-left: 18px; font-size: 13.5px; }
.tt-tips li { margin-bottom: 6px; }

/* ── Result page ────────────────────────────────────────────────────────── */
.tt-result-q { margin: 14px auto 0; max-width: 620px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); border-radius: 12px; padding: 10px 16px; font-style: italic; color: #fff; }
.tt-spread { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(14px, 3vw, 34px); padding: 26px 0 6px; }
.tt-spread-item { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.tt-spread-item > span { font-family: var(--tt-serif); color: var(--tt-navy); font-size: 15px; }
.tt-flip { --w: 150px; width: var(--w); aspect-ratio: 300 / 518; perspective: 900px; }
.tt-flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3, .7, .3, 1); transition-delay: var(--flip-delay, 0ms); }
.tt-flip.is-flipped .tt-flip-inner { transform: rotateY(180deg); }
.tt-flip .tt-card-back, .tt-flip .tt-card { --w: var(--flip-w, 150px); position: absolute; inset: 0; width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tt-flip .tt-card { transform: rotateY(180deg); }
.tt-verdict { text-align: center; margin: 22px auto 6px; max-width: 560px; }
.tt-verdict-word { font-family: var(--tt-serif); font-size: clamp(54px, 7vw, 82px); line-height: 1; font-weight: 700; }
.tt-verdict-yes .tt-verdict-word { color: #2e9a5b; }
.tt-verdict-no .tt-verdict-word { color: #c2452d; }
.tt-verdict-maybe .tt-verdict-word { color: var(--tt-gold-dk); }
.tt-verdict p { margin-top: 8px; font-size: 15px; }
.tt-pos-label { font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--tt-gold-dk); font-weight: 600; }

/* Summary panel ("What your cards are saying") — a night band under the spread. */
.tt-insight { margin-top: 28px; border-radius: 20px; padding: clamp(22px, 3.5vw, 40px); text-align: center; box-shadow: 0 18px 40px rgba(44, 27, 75, .25);
  animation: tt-rise .7s ease 1.1s both; }
.tt-insight > * { position: relative; }
@keyframes tt-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.tt-insight-head .tt-eyebrow { color: var(--tt-gold-lt); letter-spacing: 3px; }
.tt-insight-head .tt-deco::before { width: 22px; }
.tt-insight-head h2 { font-family: var(--tt-serif); font-size: clamp(24px, 2.4vw, 32px); margin-top: 6px; color: #fff; }
.tt-insight-headline { font-family: var(--tt-serif); font-size: clamp(18px, 1.9vw, 24px); line-height: 1.4; color: #fbe8bf; max-width: 720px; margin: 16px auto 4px; }
.tt-insight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 24px; text-align: left; }
.tt-insight-tile { background: rgba(255, 255, 255, .07); border: 1px solid rgba(244, 195, 92, .28); border-radius: 14px; padding: 16px 16px 18px; }
.tt-insight-ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(244, 195, 92, .16); color: var(--tt-gold-lt); margin-bottom: 10px; }
.tt-insight-ico svg { width: 20px; height: 20px; }
.tt-insight-tile h3 { font-family: var(--tt-serif); font-size: 16.5px; color: #fff; margin-bottom: 4px; }
.tt-insight-tile p { font-size: 13.5px; line-height: 1.55; color: #e6dcf2; }
.tt-insight-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; text-align: left; }
.tt-meter, .tt-elements { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; padding: 14px 16px; }
.tt-meter-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: #cbbfe0; margin-bottom: 10px; }
.tt-meter-top b { color: var(--tt-gold-lt); letter-spacing: .5px; }
.tt-meter-bar { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.tt-meter-bar span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #c9891f, #f4c35c); }
.tt-meter small { display: block; margin-top: 8px; font-size: 12.5px; color: #e6dcf2; }
.tt-elements ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tt-elements li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #fff; background: rgba(244, 195, 92, .14); border-radius: 18px; padding: 5px 12px; }
.tt-elements li svg { width: 15px; height: 15px; color: var(--tt-gold-lt); }
.tt-elements li b { color: var(--tt-gold-lt); }
.tt-insight-advice { display: flex; align-items: center; gap: 18px; margin-top: 14px; text-align: left; border-radius: 16px; padding: 16px 20px;
  background: linear-gradient(135deg, rgba(244, 195, 92, .22), rgba(244, 195, 92, .06)); border: 1px solid rgba(244, 195, 92, .5); }
.tt-insight-advice .tt-card-sm { --w: 64px; }
.tt-insight-advice-label { font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--tt-gold-lt); font-weight: 600; }
.tt-insight-advice p { font-family: var(--tt-serif); font-size: clamp(18px, 1.8vw, 22px); color: #fff; margin-top: 4px; }

/* Card by card */
.tt-pos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.tt-pos-grid.is-single { max-width: 460px; margin: 0 auto; }
.tt-pos-card { background: #fff; border: 1px solid var(--tt-line); border-top: 4px solid var(--tt-purple); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 4px 18px rgba(80, 50, 120, .06); }
.tt-pos-card.is-rev { border-top-color: #d9785a; }
.tt-pos-card-head { display: flex; align-items: center; gap: 10px; align-self: stretch; text-align: left; margin-bottom: 14px; }
.tt-pos-card-head small { display: block; font-size: 12px; color: #8f8aa3; line-height: 1.35; }
.tt-pos-num { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--tt-purple); color: #fff; font: 600 14px var(--tt-sans); }
.tt-pos-card-img .tt-card { --w: 128px; margin-bottom: 14px; }
.tt-pos-card h3 { font-family: var(--tt-serif); font-size: 19px; color: var(--tt-navy); margin-bottom: 8px; }
.tt-pos-card h3 a:hover { color: var(--tt-purple); }
.tt-pos-card .tt-chips { justify-content: center; margin-bottom: 10px; }
.tt-pos-card p { font-size: 14.5px; line-height: 1.6; }
.tt-pos-more { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 600; color: var(--tt-purple); }
.tt-pos-more:hover { text-decoration: underline; }
.tt-advice { margin-top: 14px; padding: 12px 16px; border-left: 3px solid var(--tt-gold); background: #fff; border-radius: 0 10px 10px 0; font-size: 15px; }
.tt-advice b { color: var(--tt-gold-dk); }
.tt-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }
.tt-share-note { text-align: center; font-size: 12.5px; color: #8f8aa3; margin-top: 10px; min-height: 1.2em; }
.tt-others { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tt-others .tt-r-card img { height: 72px; }
.tt-disclaimer { font-size: 12px; color: #8f8aa3; text-align: center; margin-top: 18px; }

/* ── Single card / card of the day ──────────────────────────────────────── */
.tt-card-hero { display: grid; grid-template-columns: auto 1fr; gap: clamp(22px, 4vw, 48px); align-items: center; }
.tt-card-hero h2 { font-family: var(--tt-serif); color: var(--tt-navy); font-size: clamp(24px, 2.3vw, 32px); margin: 4px 0 8px; }
.tt-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 14px 0; }
.tt-fact { background: #faf7ff; border: 1px solid #eee6fb; border-radius: 10px; padding: 8px 12px; }
.tt-fact small { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #8f8aa3; }
.tt-fact strong { font-size: 14.5px; color: var(--tt-navy); }
.tt-meaning-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.tt-meaning-grid .tt-panel h3 { margin-top: 0; display: flex; align-items: center; gap: 8px; }
.tt-area-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; flex: 0 0 auto; }
.tt-area-ico svg { width: 16px; height: 16px; }
.tt-card-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.tt-card-nav a { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--tt-navy); }
.tt-card-nav a:hover { color: var(--tt-purple); }
.tt-card-nav .tt-card { --w: 46px; }
.tt-yesterday { display: flex; align-items: center; gap: 14px; }
.tt-yesterday .tt-card { --w: 64px; }

/* ── Card meanings index ────────────────────────────────────────────────── */
.tt-suit-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 8px; }
.tt-suit-tabs a { padding: 7px 16px; border-radius: 20px; border: 1px solid #ded4ee; font-size: 13px; font-weight: 500; color: var(--tt-navy); background: #fff; }
.tt-suit-tabs a:hover { background: #f5f0ff; }
.tt-card-group { margin-top: 34px; scroll-margin-top: 90px; }
.tt-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 18px 14px; }
.tt-card-link { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.tt-card-link .tt-card { --w: 104px; transition: transform .15s; }
.tt-card-link:hover .tt-card { transform: translateY(-4px); }
.tt-card-link small { font-size: 11.5px; color: var(--tt-muted); line-height: 1.3; }

/* ── My Reading ─────────────────────────────────────────────────────────── */
.tt-history { display: flex; flex-direction: column; gap: 12px; }
.tt-history-item { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--tt-line); border-radius: 12px; padding: 14px 18px; }
.tt-history-item h3 { font-family: var(--tt-serif); color: var(--tt-navy); font-size: 17px; }
.tt-history-item p { font-size: 13px; color: var(--tt-muted); margin-top: 3px; }
.tt-history-item q { font-style: italic; }
.tt-history-empty { text-align: center; padding: 30px 16px; }
.tt-history-empty .tt-card-back { margin: 0 auto 14px; --w: 70px; }

/* ── Static pages (/pages/<slug>) ───────────────────────────────────────── */
.tt-prose { font-size: 15.5px; line-height: 1.8; }
.tt-prose h2, .tt-prose h3 { font-family: var(--tt-serif); color: var(--tt-navy); margin: 1.4em 0 .5em; }
.tt-prose p { margin: 0 0 1em; }
.tt-prose a { color: var(--tt-purple); text-decoration: underline; }

@media (max-width: 992px) {
  .tt-reading-grid { grid-template-columns: 1fr; }
  .tt-hub-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .tt-hub-grid { grid-template-columns: 1fr; }
  .tt-deck { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 12px; }
  .tt-spread { gap: 10px; flex-wrap: nowrap; }
  .tt-spread-item { width: 98px; }
  .tt-flip { --flip-w: 98px; width: 98px; }
  .tt-spread-name { font-size: 12px; }
  .tt-insight-head .tt-deco { display: none; }
  .tt-card-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .tt-card-hero .tt-chips { justify-content: center; }
  .tt-meaning-grid { grid-template-columns: 1fr; }
  .tt-insight-meters { grid-template-columns: 1fr; }
  .tt-insight-advice { flex-direction: column; text-align: center; }
  .tt-history-item { grid-template-columns: 1fr; }
}

/* Card names under the RWS scans (minor cards don't print their name). */
.tt-spread-name { font-size: 13.5px; color: var(--tt-navy); max-width: 160px; }
.tt-card-link strong { font-size: 13px; color: var(--tt-navy); line-height: 1.25; }