/* Design F, "readings" cluster: tarot hub + draw steps + 22 card pages, compatibility hub /
   pickers / pair pages. Tokens and components come from kismet.css; this file only adds
   the pieces these pages need. Scoped to .tarot-page / .compat-page. */

.tarot-page>.crumbs,.compat-page>.crumbs{margin:4px 0 18px}
.tarot-page .fine a,.compat-page .fine a,.t-learn .prose a{color:var(--c-link)}

/* ------------------------------------------------------------ card back (printed object, same in both themes) */
.tback{position:relative;display:block;width:100%;aspect-ratio:5/8;border:5px solid #fff;border-radius:10px;background:#F7F2FF url(/assets/k/doodles/gingham.svg) 0 0/14px 14px;box-shadow:0 0 0 1.5px rgba(43,19,56,.16),0 9px 14px -10px rgba(43,19,56,.6);transform:rotate(var(--r,0deg));transition:transform .2s var(--ease)}
.tback::before{content:"";position:absolute;inset:4px;border:1.5px dashed rgba(43,19,56,.3);border-radius:5px}
.tback::after{content:"";position:absolute;inset:22% 16%;background:url(/assets/k/doodles/star.svg) center/contain no-repeat}

/* ------------------------------------------------------------ tarot hub */
.tarot-q textarea.input{min-height:108px;padding:12px 16px;line-height:1.45;resize:vertical}
.tarot-q .btn.is-busy{opacity:.75;pointer-events:none}
.tfan{display:flex;justify-content:center;padding:10px 0 2px}
.tfan figure{width:92px;margin:0 -8px;text-align:center}
.tfan figure:nth-child(2){margin-top:-8px;z-index:1}
.tfan figcaption{margin-top:8px;font:400 15px/1 var(--display);color:var(--c-label)}
@media (max-width:999px){.tfan{display:none}}

.t-learn{display:grid;gap:44px;max-width:760px;margin-top:72px}
.t-learn .t-h2{margin-bottom:12px}
.prose-p{max-width:680px}
.t-learn .note-inline{max-width:640px}
.spread3{display:grid;gap:14px;margin-top:20px}
@media (min-width:700px){.spread3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.spread3>div{padding:20px 18px;border-radius:var(--r-lg)}
.spread3 p{margin-top:6px;font-size:16.5px;line-height:1.5;color:var(--c-ink-2)}
.sp-n{display:grid;place-items:center;width:36px;height:34px;margin-bottom:10px;border-radius:12px;background:var(--c-card);font:400 18px/1 var(--display);transform:rotate(-4deg)}
.suits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
@media (min-width:700px){.suits{grid-template-columns:repeat(4,minmax(0,1fr))}}
.suits li{padding:16px 16px 14px;border-radius:var(--r-lg)}
.suits h3{font-size:21px}
.suits p{margin-top:4px;font-size:15px;line-height:1.4;color:var(--c-ink-2)}
.arcana>.more{margin-top:8px}

/* ------------------------------------------------------------ draw steps */
.pick-head{max-width:760px;margin:0 auto;text-align:center}
.pick-head .lede{margin-left:auto;margin-right:auto}
.t-asked{max-width:36em;margin:12px auto 0;font-size:17px;line-height:1.45;color:var(--c-ink-2);overflow-wrap:anywhere}
.t-asked q{color:var(--c-ink);font-weight:700}
.slots{display:flex;justify-content:center;gap:10px;margin-top:24px}
.slot{display:grid;justify-items:center;gap:8px;width:96px;text-align:center;font:400 15px/1.15 var(--display)}
.slot .tback{width:58px}
.slot-empty{display:block;width:58px;aspect-ratio:5/8;border:2px dashed var(--c-line-2);border-radius:10px}
.slot.is-now .slot-empty{border-color:var(--c-ink);background:var(--c-card)}
.slot.is-now>span:last-child{padding:2px 10px;border-radius:var(--r-pill);background:var(--c-ink);color:var(--c-paper)}
.slot.is-next{color:var(--c-ink-2)}
.slot small{display:block;margin-top:2px;font:400 13px/1.2 var(--body);color:var(--c-ink-2)}
.deck{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 8px;max-width:1040px;margin:26px auto 0;padding:18px 12px;background:var(--c-sheet);border-radius:24px;box-shadow:inset 0 0 0 2px var(--c-line)}
@media (min-width:420px){.deck{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:700px){.deck{grid-template-columns:repeat(8,minmax(0,1fr));gap:18px 14px;padding:24px}}
@media (min-width:1000px){.deck{grid-template-columns:repeat(11,minmax(0,1fr))}}
.tarot-card{display:block;border-radius:12px;transition:transform .2s var(--ease)}
.tarot-card:hover,.tarot-card:focus-visible,.tarot-card.is-pressed{transform:translateY(-6px)}
.tarot-card:hover .tback,.tarot-card:focus-visible .tback{transform:rotate(0)}
.pick-foot{margin-top:24px;text-align:center}

/* ------------------------------------------------------------ result */
.spread{display:grid;gap:26px;margin-top:30px}
@media (min-width:860px){.spread{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}}
.tpos{position:relative;padding:22px 20px;background:var(--c-card);border-radius:var(--r-xl);box-shadow:var(--sh-print);text-align:center}
.tpos-k{display:inline-block;padding:4px 14px;border-radius:var(--r-pill);font:400 17px/1.2 var(--display)}
.tpos-face{display:block;width:150px;margin:18px auto 14px;transform:rotate(var(--r,0deg));transition:transform .2s var(--ease)}
.tpos-face:hover{transform:rotate(0) translateY(-3px)}
.tpos-face img,.tc-card img{width:100%;height:auto;aspect-ratio:186/300;border-radius:8px}
.tpos-face img{box-shadow:0 12px 18px -12px rgba(43,19,56,.6)}
.tpos h3 a{text-decoration:none}
.tpos h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.kw{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:10px 0 12px}
.kw li{padding:3px 11px;border-radius:var(--r-pill);background:var(--c-paper);font-size:14px;font-weight:700}
.tpos-text{font-size:17px;line-height:1.55;color:var(--c-ink-2);text-align:left}
.t-reflect{display:grid;gap:22px;max-width:760px;margin:52px auto 0}
.t-prompts{padding:22px 22px 20px;background:var(--c-card);border-radius:var(--r-lg);box-shadow:var(--sh-print)}
.t-prompts .s{margin-top:4px}
.t-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.t-fine{max-width:760px;margin:32px auto 0;text-align:center}
.tarot-result .next-tools .s{margin:4px 0 0}

/* share row (tarot.js / compatibility script: .share-card-btn[data-platform]) */
.share-row{display:grid;gap:12px;max-width:760px;margin:36px auto 0;padding:18px 20px;background:var(--c-card);border-radius:var(--r-lg);box-shadow:var(--sh-print)}
@media (min-width:760px){.share-row{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.share-copy .k{display:flex;align-items:center;gap:8px;font-size:18px;color:var(--c-ink)}
.share-copy .s{margin-top:4px;font-size:15.5px}
.share-copy b{color:var(--c-ink);font-weight:700}
.share-btns{display:flex;flex-wrap:wrap;gap:8px}
.share-row .share-status{grid-column:1/-1;max-width:none;margin:0}
.art-prose .share-row{margin:28px 0 0}

/* ------------------------------------------------------------ card pages */
.card-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 22px}
.card-nav a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--r-md);background:var(--c-card);box-shadow:var(--sh-print);font:400 16px/1.15 var(--display);text-decoration:none}
.card-nav a:hover{box-shadow:0 3px 0 var(--c-line-2)}
.ic.flip{transform:scaleX(-1)}
.card-of{font-size:15px;line-height:1.3;color:var(--c-ink-2);text-align:center}
.card-of small{display:none;font-size:13.5px}
@media (min-width:1080px){.card-of small{display:block}}
@media (max-width:599px){.card-nav:not(.card-nav-big) a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.card-nav:not(.card-nav-big) a{width:44px;padding:0;justify-content:center}}
.card-nav-big{display:grid;grid-template-columns:1fr 1fr;margin:48px 0 0}
.card-nav-big a{justify-content:space-between;min-height:64px;padding:12px 16px;font-size:18px}
.card-nav-big a:last-child{text-align:right}
.card-nav-big small{display:block;margin-bottom:2px;font:400 14px/1.2 var(--body);color:var(--c-ink-2)}

.tc-head{display:grid;grid-template-columns:112px minmax(0,1fr);gap:4px 18px;align-items:start;max-width:1000px}
.tc-card{position:relative;grid-row:1/span 3;margin:8px 0 0;padding:7px 7px 8px;background:#fff;border-radius:6px;box-shadow:var(--sh-paper);transform:rotate(-2deg)}
.tc-card .tape{width:70px;height:20px;top:-10px}
.tc-card figcaption{margin-top:6px;font:400 17px/1 var(--display);color:#2B1338;text-align:center}
.tc-copy{display:contents}
.tc-copy>.k,.tc-copy>h1,.tc-copy>.tc-tag{grid-column:2}
.tc-copy>.kw,.tc-copy>.lede,.tc-copy>.tc-share{grid-column:1/-1}
.article .tc-head .t-h1{margin:2px 0 4px}
.tc-tag{max-width:22em}
.tc-head .kw{justify-content:flex-start;margin:16px 0 0}
.tc-head .lede{max-width:36em}
.tc-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px}
.tc-share>.k{margin-right:4px}
.tc-share .share-status{flex-basis:100%;max-width:none;margin:0}
@media (min-width:700px){
  .tc-head{grid-template-columns:210px minmax(0,1fr);gap:0 40px}
  .tc-card{grid-row:auto;padding:10px 10px 12px}
  .tc-copy{display:block;padding-top:6px}
}
@media (min-width:1100px){.tc-head{grid-template-columns:240px minmax(0,1fr);gap:0 52px}}

.facts4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:1000px;margin:34px 0 0}
@media (min-width:900px){.facts4{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.fact{position:relative;min-height:92px;padding:16px 16px 14px;border-radius:var(--r-lg)}
.fact .k{color:var(--c-ink)}
.fact .v{margin-top:6px;font-size:21px;padding-right:44px;overflow-wrap:anywhere}
.fact .zs{position:absolute;right:8px;top:-14px;width:52px;height:52px;transform:rotate(6deg)}
.fact-glyph{position:absolute;right:14px;top:14px}
.fact-glyph .pg{width:30px;height:30px}

.tcard-page .art-grid{margin-top:30px}
.toc{padding:16px 18px;background:var(--c-card);border-radius:var(--r-lg);box-shadow:var(--sh-print)}
.toc ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.toc a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:var(--r-pill);background:var(--c-paper);font-size:15px;font-weight:700;text-decoration:none}
.toc a:hover{box-shadow:inset 0 0 0 2px var(--c-ink)}
.tc-sec{scroll-margin-top:20px}
.art-prose .sub{margin:-4px 0 14px;font-size:16px;color:var(--c-ink-2)}
.tc-html p+p{margin-top:1em}
.minis{display:grid;gap:10px;margin-top:18px}
@media (min-width:600px){.minis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.minis li{padding:14px 16px;background:var(--c-card);border-radius:var(--r-md);box-shadow:var(--sh-print)}
.minis h3{font:400 18px/1.2 var(--display)}
.minis p{margin-top:4px;font-size:16px;line-height:1.45;color:var(--c-ink-2)}
.box{position:relative;margin-top:18px;padding:18px 20px;border-radius:var(--r-lg)}
.box h3{margin-bottom:6px}
.box p{font-size:17px;line-height:1.5}
.box .list{margin:8px 0 0}
.pair2{display:grid;gap:12px;margin-top:18px}
@media (min-width:600px){.pair2{grid-template-columns:1fr 1fr}}
.pair2 .box{margin-top:0}
.timing{margin:12px 0 0}
.timing div{display:grid;gap:4px;padding:12px 0;border-bottom:1.5px dotted var(--c-line-2)}
@media (min-width:600px){.timing div{grid-template-columns:140px 1fr;gap:14px}}
.timing dt{font:400 17px/1.3 var(--display);color:var(--c-label)}
.timing dd{margin:0;font-size:17px;line-height:1.5}
.tnum{display:inline-grid;place-items:center;min-width:36px;height:32px;margin-right:10px;padding:0 6px;border-radius:12px;background:var(--c-lilac-lt);font:400 17px/1 var(--display);transform:rotate(-4deg);vertical-align:middle}
.qas{margin-top:6px}
.qa{border-bottom:1.5px dotted var(--c-line-2)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:12px 0;font:400 18px/1.3 var(--display);list-style:none;cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa[open] .chev{transform:rotate(180deg)}
.qa p{padding:0 0 16px;font-size:17px;color:var(--c-ink-2)}
.affirm{display:grid;gap:10px;margin-top:14px}
@media (min-width:600px){.affirm{grid-template-columns:1fr 1fr}}
.affirm li{padding:14px 18px;border-radius:var(--r-bubble);background:var(--c-lilac-lt);font-size:17px;line-height:1.45;font-style:italic}
.prompts{counter-reset:pr;display:grid;gap:12px;margin-top:14px}
.prompts li{counter-increment:pr;display:grid;grid-template-columns:32px 1fr;gap:12px;font-size:17.5px;line-height:1.5}
.prompts li::before{content:counter(pr);width:30px;height:30px;border-radius:50%;background:var(--c-pink-lt);font:400 15px/30px var(--display);text-align:center}
.tc-cta{position:relative;margin-top:48px;padding:30px 24px 26px;border-radius:var(--r-xl);box-shadow:var(--sh-print)}
.tc-cta .tape{left:34px}
.art-prose .tc-cta h2{margin:0 0 8px}
.tc-cta p{margin-bottom:18px;color:var(--c-ink-2)}
.arcana-row a[aria-current] span{display:inline-block;padding:1px 10px;border-radius:var(--r-pill);background:var(--c-ink);color:var(--c-paper)}

/* ------------------------------------------------------------ compatibility */
.cp-duo{display:flex;align-items:center;justify-content:center;gap:2px;padding:4px 0}
.cp-duo .zs{width:104px;height:104px;transform:rotate(-6deg)}
.cp-duo .zs:last-child{transform:rotate(5deg)}
.cp-heart{width:40px;height:40px;flex:none;transform:rotate(-8deg)}
.cp-popular,.cp-start{margin-top:60px}
.cp-start .s{margin-top:4px}
.pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}
@media (min-width:900px){.pairs{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}
.pcard{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;padding:16px 10px 14px;background:var(--c-card);border-radius:var(--r-lg);box-shadow:0 4px 0 var(--c-line-2);text-align:center;text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.pcard:hover{transform:translateY(-3px);box-shadow:0 7px 0 var(--c-line-2)}
.duo{display:flex;margin-bottom:2px}
.duo .zs{width:64px;height:64px;transform:rotate(-5deg)}
.duo .zs+.zs{margin-left:-12px;transform:rotate(6deg)}
.pcard b{font:400 18px/1.15 var(--display)}
.pcard small{font-size:14.5px;color:var(--c-ink-2)}
.els{display:grid;gap:14px;margin-top:6px}
@media (min-width:700px){.els{grid-template-columns:1fr 1fr}}
.el{padding:18px 20px 20px;border-radius:var(--r-lg)}
.el-st{display:flex;gap:2px;margin-bottom:8px}
.el-st .zs{width:44px;height:44px}
.el-signs{margin:2px 0 6px;font-size:15.5px;font-weight:700}
.el p:last-child{font-size:16.5px;line-height:1.5;color:var(--c-ink-2)}

.cp-select .cp-sheet{max-width:660px;margin:26px auto 0}
.cp-chosen{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px}
.cp-chosen .zs{width:64px;height:64px;transform:rotate(-5deg)}
.cp-chosen span{font:400 20px/1.1 var(--display)}
.cp-chosen small{display:block;font:400 14px var(--body);color:var(--c-ink-2)}
.cp-chosen .more{margin:0 0 0 6px}

.cp-head{display:grid;gap:14px 28px;align-items:center;max-width:1000px}
.cp-head .cp-duo{justify-content:flex-start}
.cp-duo.big .zs{width:112px;height:112px}
.article .cp-head .t-h1{margin:4px 0 0}
.cp-head .chips{margin-top:10px}
.cp-head .chips .t-lilac{background:var(--c-lilac-lt)}
.cp-score{display:flex;align-items:center;gap:12px}
.cp-score b{display:grid;grid-auto-flow:column;align-items:baseline;justify-content:center;place-content:center;width:124px;height:104px;background:url(/assets/k/doodles/ring.svg) center/100% 100% no-repeat;font:400 44px/1 var(--display);font-weight:400}
.cp-score small{font-size:22px}
.cp-score span{max-width:7em;font:400 17px/1.2 var(--display);color:var(--c-label)}
@media (min-width:700px){.cp-duo.big .zs{width:150px;height:150px}.cp-head{grid-template-columns:auto minmax(0,1fr)}.cp-score{grid-column:2}}
@media (min-width:1100px){.cp-head{grid-template-columns:auto minmax(0,1fr) auto}.cp-score{grid-column:auto;flex-direction:column;gap:2px;text-align:center}}
.cp-pair .art-grid{margin-top:30px}
.answer{position:relative;padding:26px 22px 20px;background:var(--c-card);border-radius:var(--r-xl);box-shadow:var(--sh-print)}
.answer .tape{left:34px}
.answer-main{margin-top:6px;font-size:19px;line-height:1.55}
.answer3{display:grid;gap:10px;margin:16px 0 0}
@media (min-width:700px){.answer3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.answer3 div{padding:12px 14px;border-radius:var(--r-md);background:var(--c-paper)}
.answer3 dt{font:400 16px/1.2 var(--display);color:var(--c-label)}
.answer3 dd{margin:4px 0 0;font-size:15.5px;line-height:1.45}
.cp-vibe{margin-top:8px}
.cp-lists{display:grid;gap:14px;margin-top:8px}
.cp-lists .box{margin-top:0}
.cp-daily .s{margin:0 0 14px}
.links3{display:grid;gap:10px}
.links3 a{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;background:var(--c-card);border-radius:var(--r-lg);box-shadow:0 4px 0 var(--c-line-2);text-decoration:none;transition:transform .2s var(--ease)}
.links3 a:hover{transform:translateY(-2px)}
.links3 img{width:48px;height:48px;flex:none}
.links3 span{display:grid;gap:2px;font-size:15.5px;line-height:1.4;color:var(--c-ink-2)}
.links3 small{font:400 14px/1.2 var(--display);color:var(--c-label)}
.links3 b{font:400 19px/1.2 var(--display);color:var(--c-ink)}
.cp-cta .btn{margin-top:2px}
.cp-byline{margin:40px 0 10px;padding:14px 0 0;border-top:2px dotted var(--c-line-2);border-bottom:0}
.cp-others{margin-top:60px}
.cp-others .t-h2+.sheet-grid{margin-top:14px}
.cp-others .sheet-grid+.t-h2{margin-top:36px}

/* ------------------------------------------------------------ QA fixes */
/* textarea does not inherit the body font from kismet.css (button,input,select only) */
.tarot-q textarea.input{font:400 17px/1.45 var(--body)}
/* lilac tint ≈ paper: tinted objects sitting on paper get a white card instead, and a printed shadow */
.spread3>.t-lilac,.suits .t-lilac,.el.t-lilac,.fact.t-lilac,.cp-head .chips .t-lilac,.tc-head .kw li{background:var(--c-card)}
.spread3>div,.suits li,.el,.fact{box-shadow:var(--sh-print)}
/* card page head on phones: extra card height goes to an empty fourth row, not between the lines */
@media (max-width:699px){
  .tc-head{grid-template-rows:auto auto auto 1fr}
  .tc-card{grid-row:1/span 4}
}
/* pair head on phones: stickers and score share the first row */
@media (max-width:699px){
  .cp-head{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"duo score" "copy copy";gap:10px 8px}
  .cp-head .cp-duo{grid-area:duo}.cp-head .cp-copy{grid-area:copy}.cp-head .cp-score{grid-area:score}
  .cp-duo.big .zs{width:88px;height:88px}
  .cp-score{flex-direction:column;gap:2px;text-align:center}
  .cp-score b{width:98px;height:84px;font-size:36px}
  .cp-score small{font-size:18px}
  .cp-score span{font-size:14.5px}
}
@media (max-width:379px){.cp-duo.big .zs{width:72px;height:72px}.cp-duo.big .cp-heart{width:30px;height:30px}}