.ts-wrap{max-width:1200px;margin:40px auto;padding:0 20px;font-family:var(--wp--preset--font-family--body-font,-apple-system,BlinkMacSystemFont,'Inter',sans-serif);color:#16181d;}
.ts-head{display:flex;align-items:center;gap:28px;margin:0 0 32px;}
.ts-head-left{flex:0 0 auto;text-align:left;}
.ts-head-divider{flex:0 0 2px;align-self:center;background:#4f46e5;height:56px;}
.ts-eyebrow{font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#4f46e5;margin-bottom:8px;}
.ts-title{font-size:34px;margin:0;color:#16181d;}
.ts-sub{flex:1;max-width:480px;text-align:left;color:#8a8f98;font-size:15px;line-height:1.6;margin:0;}
@media(max-width:640px){.ts-head{flex-direction:column;align-items:flex-start;gap:12px;}.ts-head-left{text-align:left;}.ts-head-divider{display:none;}}
/* The spread page renders a card grid purely to borrow its popup; it must
   never be visible. This rule lives here, in the spread sheet, because the
   quiz sheet is not loaded on this page. */
.ts-borrowed-grid{display:none;}
/* Sections, in the same eyebrow-label style the rest of the site uses, each
   closed off by a hairline.

   The line used to be here, was taken out, and then only half came out: the
   dark stylesheet is generated from this one, and the generated file kept a
   border rule this file no longer had. So the same page had rules between
   its sections in the dark and none in the light - which is how it was
   noticed. Both now draw it. */
.ts-step{position:relative;padding:0 0 26px 0;margin-bottom:26px;border-bottom:1px solid #e6e7eb;}
.ts-step-lbl{display:block;font-size:15px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#4f46e5;margin-bottom:14px;}
.ts-setup{display:flex;flex-wrap:wrap;align-items:flex-start;gap:40px;}
.ts-setup-main{flex:1 1 480px;min-width:0;}
.ts-setup-side{flex:0 0 auto;margin-left:auto;display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px;}
.ts-field{display:flex;flex-direction:column;}
.ts-control-lbl{display:block;font-size:15px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#8a8f98;margin-bottom:8px;}
.ts-step-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:14px;}
.ts-step-bar .ts-step-lbl{margin-bottom:0;}
.ts-step-bar .ts-check{margin-left:auto;}
.ts-step-bar .ts-draw{margin-bottom:0;}
@media(max-width:900px){
	.ts-setup{gap:24px;}
	.ts-setup-main{flex:1 1 100%;}
	.ts-setup-side{margin-left:0;gap:18px;}
}
@media(max-width:520px){
	.ts-setup-side{width:100%;}
	.ts-setup-side .ts-field{width:100%;}
	.ts-modes{display:flex;}
	.ts-mode{flex:1;}
}
.ts-sizes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
.ts-size{font-size:15px;font-weight:600;padding:8px 16px;border-radius:999px;border:1px solid #e6e7eb;background:#fff;color:#8a8f98;cursor:pointer;font-family:inherit;transition:background .15s, border-color .15s, color .15s;}
.ts-size:hover{border-color:#4f46e5;color:#16181d;}
.ts-size.active{background:#4f46e5;border-color:#4f46e5;color:#fff;}
.ts-size-desc{font-size:15px;color:#8a8f98;line-height:1.55;max-width:560px;margin:14px 0 0;}
.ts-ask{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px;}
.ts-ask-lbl{font-size:15px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#8a8f98;}
.ts-ask-chips{display:flex;flex-wrap:wrap;gap:8px;}
.ts-ask-chip{font-size:15px;font-weight:500;line-height:1;padding:9px 15px;border-radius:999px;border:1px solid #e6e7eb;background:#fff;color:#4b5058;cursor:pointer;font-family:inherit;transition:border-color .15s, background .15s, color .15s;}
.ts-ask-chip:hover{border-color:#4f46e5;color:#16181d;}
.ts-ask-chip-on{background:#4f46e5;border-color:#4f46e5;color:#fff;font-weight:600;}
.ts-question{font-size:19px;font-weight:700;color:#16181d;line-height:1.4;margin-bottom:14px;}
.ts-question-lbl{display:block;font-size:15px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#4f46e5;margin-bottom:6px;}
.ts-story-txt em{font-style:italic;}
.ts-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:15px;font-weight:600;line-height:1;padding:9px 34px 9px 16px;border-radius:999px;border:1px solid #e6e7eb;background-color:#fff;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");background-repeat:no-repeat;background-position:right 14px center;background-size:10px 7px;color:#16181d;cursor:pointer;font-family:inherit;transition:border-color .15s, box-shadow .15s;}
.ts-select:hover{border-color:#4f46e5;}
.ts-select:focus{outline:none;border-color:#4f46e5;box-shadow:0 0 0 3px rgba(79,70,229,.15);}
.ts-modes{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:#f4f5f7;}
.ts-mode{position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;line-height:1.2;padding:8px 20px;border-radius:999px;border:none;background:none;color:#8a8f98;cursor:pointer;font-family:inherit;transition:background .15s, color .15s;}
.ts-mode-ico{width:20px;height:20px;display:block;}
.ts-mode:hover{color:#16181d;}
.ts-mode.active{background:#fff;color:#4f46e5;box-shadow:0 1px 3px rgba(16,20,30,.14);}
.ts-slots{display:grid;gap:16px;justify-content:center;align-items:start;margin-bottom:4px;max-width:1200px;margin-left:auto;margin-right:auto;}

/* --- full screen ---------------------------------------------------------

   The control sits in the corner of the table itself, so both boards - the
   slots you are filling and the cards of a finished draw - have one without
   anything being added beside the section label. The table element is what
   goes full screen; the script scales the grid inside it to fit. */
.ts-table{position:relative;}
.ts-fs-corner{position:absolute;top:10px;left:10px;z-index:3;width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid #e0e2ea;background:rgba(255,255,255,.75);color:#4f46e5;cursor:pointer;font-family:inherit;line-height:1;transition:background .15s, border-color .15s, color .15s;}
.ts-fs-corner svg{width:16px;height:16px;display:block;}
.ts-fs-corner:hover{background:#4f46e5;border-color:#4f46e5;color:#fff;}
.ts-fs-corner[hidden]{display:none;}
.ts-table:fullscreen{
	cursor:grab;
	display:flex;align-items:center;justify-content:center;
	width:100%;height:100%;padding:0;
	background:#edeef3;
	background-image:radial-gradient(rgba(79,70,229,.13) 1.5px, transparent 1.5px);
	background-size:15px 15px;
	overflow:hidden;
}
/* Inside full screen the grid is the whole show: no table under it, no
   shadow, and no width cap fighting the scale the script works out. */
.ts-table:fullscreen > .ts-slots,.ts-table:fullscreen > .ts-cards{
	margin:0;max-width:none;border:0;background:none;box-shadow:none;padding:0;
	transform-origin:center center;
}
/* Safari spells it :-webkit-full-screen, and a rule whose selector list
   contains one name a browser does not know is dropped whole - so the
   two spellings cannot share a rule. */
.ts-table:-webkit-full-screen{
	cursor:grab;
	display:flex;align-items:center;justify-content:center;
	width:100%;height:100%;padding:0;
	background:#edeef3;
	background-image:radial-gradient(rgba(79,70,229,.13) 1.5px, transparent 1.5px);
	background-size:15px 15px;
	overflow:hidden;
}
.ts-table:-webkit-full-screen > .ts-slots,.ts-table:-webkit-full-screen > .ts-cards{
	margin:0;max-width:none;border:0;background:none;box-shadow:none;padding:0;
	transform-origin:center center;
}
/* A phone gains nothing from this, and iOS Safari has no element full screen
   for the script to offer in the first place. */
@media(max-width:900px){.ts-fs-corner{display:none;}}

/* While a drag is in progress. The class is on the table, so it works under
   either spelling of full screen without a second rule. */
.ts-table.ts-panning{cursor:grabbing;}
.ts-table.ts-panning .ts-slots,.ts-table.ts-panning .ts-cards{user-select:none;-webkit-user-select:none;}

/* --- the table -----------------------------------------------------------

   The cards are laid on a surface rather than straight on the page: a field
   of dots on a cool grey ground, and nothing else. No lighting effect - a
   gradient across the top read as a gradient rather than as light, and it
   washed out the texture underneath it.

   The ground is grey rather than lavender. A whole field of the site's
   accent colour is wallpaper, and white cards had nothing to sit against;
   the violet is in the dots, where it is a thread rather than a wash. */
.ts-slots,.ts-cards{
	padding:26px 22px;
	border-radius:22px;
	border:1px solid #e0e2ea;
	background-color:#edeef3;
	background-image:radial-gradient(rgba(79,70,229,.13) 1.5px, transparent 1.5px);
	background-size:15px 15px;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), 0 14px 34px -30px rgba(16,20,30,.55);
}
/* An empty slot needs something to be dashed against now that the ground
   underneath it is no longer white. */
.ts-slot-empty{background:rgba(255,255,255,.55);}
.ts-slot-empty:hover{background:rgba(255,255,255,.9);}
/* The hint under the plus was #8a8f98, which came to 3.0:1 against the table
   and was already only 3.2:1 against white - under the 4.5:1 small text is
   meant to clear either way. This is 4.6:1 on the table. */
.ts-slot-hint{color:#575c66;}
@media(max-width:640px){
	.ts-slots,.ts-cards{padding:16px 12px;border-radius:18px;}
}
.ts-slot{min-width:0;}
.ts-slot-empty{width:100%;border:2px dashed #cfd1de;border-radius:16px;padding:0 0 16px;font-family:inherit;cursor:pointer;text-align:left;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:748/1150;transition:border-color .15s, background .15s;}
.ts-slot-empty:hover{border-color:#4f46e5;}
.ts-slot-empty .ts-pos{margin-bottom:auto;align-self:stretch;padding:2px 12px 8px;text-align:center;justify-content:center;}
.ts-slot-empty,.ts-slot-filled{width:100%;box-sizing:border-box;}
.ts-slot-plus{font-size:28px;font-weight:300;color:#c4c7ce;line-height:1;margin-bottom:6px;}
/* The hint is centred in its own right, not only as a box. The column
   centres the boxes it stacks, so a hint that fits on one line looked
   centred - but the moment it wrapped, and it wraps in Russian on a
   ten-card board where the places are narrow, the second line sat against
   the left edge of the box. The side padding keeps a long word off the
   dashed border. */
.ts-slot-hint{font-size:15px;color:#8a8f98;text-align:center;padding:0 8px;}
.ts-slot-filled{border:1px solid #e6e7eb;border-radius:16px;padding:0;overflow:hidden;background:#fff;box-shadow:0 6px 18px -14px rgba(16,20,30,.15);transition:transform .2s, box-shadow .2s;}
.ts-slot-filled:hover{transform:translateY(-4px);box-shadow:0 10px 24px -12px rgba(16,20,30,.2);}
.ts-slot-swap{display:block;width:100%;border:none;background:none;padding:0;font-family:inherit;cursor:pointer;text-align:left;}
.ts-slot-nameswap{margin-top:0;}
/* Round flip button sitting on top of the card art */
/* --- text that has to survive translation ---------------------------------

   A tile on the ten-card board is 150px wide, and every piece of text on it
   comes from the registry, where a translator is under no obligation to be
   brief. Measured across the seven languages: the Chinese position names are
   single unbreakable runs up to 143px, and Russian has card names like
   "Справедливость" at 124px - both wider than the 122px a tile has inside
   its padding. Without a break rule they push the tile wider than its grid
   column, which is what was shoving the flip button off the card.

   overflow-wrap:anywhere rather than word-break:break-all: it only breaks a
   word when the word cannot fit, so English and German still wrap between
   words and only break when there is no other way. */
.ts-cardname,.ts-orient-tag,.ts-size,.ts-mode,.ts-title,.ts-step-lbl,.ts-chip{
	overflow-wrap:anywhere;
	min-width:0;
}
/* Headings break between words first and only split a word when a single
   word is wider than the card - which sentence case has now made rare. */
.ts-pos,.ts-slot-hint{
	overflow-wrap:break-word;
	hyphens:auto;
	min-width:0;
}
/* The foot row: the word on the left, the button that changes it on the
   right, one line, never wrapping. The chip gives up width first if a
   translation needs it; the button keeps its size. */
.ts-card-foot{flex-wrap:nowrap;justify-content:space-between;}
/* min-content, not 0: a flex item is allowed to shrink past its text and
   wrap it, which is exactly what put "Обратная" on two lines next to a
   button that had plenty of room beside it. */
.ts-orient-tag{flex:0 1 auto;min-width:min-content;}
.ts-flip{flex:0 0 auto;}

/* The horseshoe is the one board whose cards cannot be widened inside the
   page column - seven of them come to 149px each - and at that width the
   word plus the button is a tight fit. The chip gives up its side padding
   there rather than the row giving up its single line. Measured: the widest
   of the seven translations needs 88 of the 101px this leaves it. */
.ts-slots[data-size='7'] .ts-card-foot,.ts-cards[data-size='7'] .ts-card-foot{padding:9px 8px;gap:4px;}
.ts-slots[data-size='7'] .ts-orient-tag,.ts-cards[data-size='7'] .ts-orient-tag{padding:6px 6px;}
@media(min-width:1360px){
	.ts-slots[data-size='7'] .ts-card-foot,.ts-cards[data-size='7'] .ts-card-foot{padding:9px 10px;gap:6px;}
	.ts-slots[data-size='7'] .ts-orient-tag,.ts-cards[data-size='7'] .ts-orient-tag{padding:6px 9px;}
}
/* These boxes set a minimum, never a fixed height, so a name that needs
   three lines gets three lines instead of spilling over the edge. */
.ts-cardname{height:auto;}
.ts-slot-filled .ts-pos,.ts-card .ts-pos{height:auto;}

/* The strip along the top of a card: number left, flip button right, and the
   position name below it with the whole width of the card to itself. On the
   picture the two chips covered the art and squeezed the name; here they cost
   the name nothing and every card starts the same way. */
.ts-tile-top{display:flex;align-items:center;gap:6px;padding:10px 12px 0;}
/* The question mark: same size as the number opposite it, quiet until you
   want it. It opens the card's own popup - the one the card grid already
   owns - so nothing here duplicates what a card page says. */
/* The buttons sit in the strip itself rather than in a box of their own:
   one flex row, no nesting, and whichever of them comes first is pushed to
   the right edge by its own auto margin. */
.ts-tile-top .ts-clear,.ts-tile-top > .ts-info{margin-left:auto;}
.ts-tile-top .ts-clear + .ts-info{margin-left:0;}
/* The cross: same chip as the question mark beside it, quieter until you
   want it. */
.ts-clear{flex:0 0 auto;width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid #e0e2ea;background:#fff;color:#8a8f98;cursor:pointer;font-family:inherit;line-height:1;transition:background .15s, border-color .15s, color .15s;}
.ts-clear:hover{border-color:#d94a4a;background:#fdf3f3;color:#d94a4a;}
.ts-info{flex:0 0 auto;width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid #e0e2ea;background:#fff;color:#8a8f98;font-family:inherit;font-size:15px;font-weight:700;line-height:1;cursor:pointer;transition:background .15s, border-color .15s, color .15s;}
.ts-info:hover{border-color:#4f46e5;background:#f4f3ff;color:#4f46e5;}
.ts-num{flex:0 0 auto;min-width:24px;height:24px;padding:0 7px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:999px;background:#4f46e5;color:#fff;font-size:15px;font-weight:700;line-height:1;}
.ts-art-wrap{position:relative;margin:14px 14px 10px;}
.ts-art-wrap .ts-art{margin-bottom:0;}
.ts-card-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:9px 10px;background:#fcfcfd;border-top:1px solid #f0f1f4;}
.ts-flip{flex:0 0 auto;width:26px;height:26px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid #e6e7eb;background:#fff;color:#4f46e5;cursor:pointer;font-family:inherit;line-height:1;transition:background .15s, border-color .15s, color .15s, transform .15s;}
.ts-flip svg{width:14px;height:14px;display:block;}
.ts-flip:hover{background:#4f46e5;border-color:#4f46e5;color:#fff;transform:scale(1.08);}
@media(max-width:640px){.ts-flip{width:24px;height:24px;}.ts-flip svg{width:13px;height:13px;}.ts-tile-top{padding:8px 9px 0;}}
.ts-slot-overlay{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:rgba(16,20,30,.55);z-index:100000;display:none;align-items:center;justify-content:center;padding:20px;}
.ts-slot-overlay.show{display:flex;}
.ts-slot-box{background:#fff;border-radius:20px;max-width:1100px;width:100%;max-height:86vh;display:flex;flex-direction:column;overflow:hidden;}
.ts-slot-box-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #e6e7eb;font-size:16px;font-weight:700;}
.ts-slot-close{width:32px;height:32px;border-radius:999px;border:none;background:#f4f5f7;color:#8a8f98;font-size:18px;cursor:pointer;line-height:1;}
.ts-slot-close:hover{background:#e6e7eb;color:#16181d;}
/* Filter row inside the picker: the cards-page controls, reused as is. */
/* One tidy line: filter pills, then the search box filling what is left.
   Narrow screens scroll it sideways instead of stacking into three rows. */
.ts-picker-filters{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin:0;padding:16px 24px;border-bottom:1px solid #e6e7eb;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
.ts-picker-filters::-webkit-scrollbar{display:none;}
.ts-picker-filters .ta-filter{flex:0 0 auto;white-space:nowrap;font-size:15px;font-weight:500;line-height:1;padding:9px 14px;border-radius:999px;border:1px solid #e6e7eb;background:#fff;color:#8a8f98;cursor:pointer;font-family:inherit;transition:border-color .15s, background .15s, color .15s;}
.ts-picker-filters .ta-filter:hover{border-color:#4f46e5;color:#16181d;}
.ts-picker-filters .ta-filter.active{background:#4f46e5;border-color:#4f46e5;color:#fff;}
.ts-picker-filters .ta-search{flex:1 1 180px;min-width:150px;font-size:15px;line-height:1;padding:10px 18px;border-radius:999px;border:1px solid #e6e7eb;background:#fff;color:#16181d;font-family:inherit;}
.ts-picker-filters .ta-search:focus{outline:none;border-color:#4f46e5;}
.ts-picker-empty{padding:0 24px 20px;margin:0;color:#8a8f98;font-size:15px;}
.ts-picker-list{display:grid;grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));gap:12px;overflow-y:auto;padding:20px 24px;}
/* Reversed switch */
.ts-check{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:#8a8f98;cursor:pointer;line-height:1;padding:10px 16px;border-radius:999px;border:1px solid #e6e7eb;background:#fff;transition:border-color .15s, color .15s;}
.ts-check:has(input:checked){color:#16181d;}
.ts-check:hover{border-color:#4f46e5;}
.ts-check input{width:17px;height:17px;margin:0;accent-color:#4f46e5;cursor:pointer;}
.ts-pick{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;border-radius:10px;border:1px solid #e6e7eb;background:#fff;color:#4b5058;cursor:pointer;font-family:inherit;}
.ts-pick:hover{border-color:#4f46e5;}
.ts-pick-used{opacity:.35;cursor:default;}
.ts-pick-used:hover{border-color:#e6e7eb;}
.ts-pick-art{width:100%;aspect-ratio:1144/1919;background:#f4f5f7;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.ts-pick-art img{width:100%;height:100%;object-fit:cover;display:block;}
.ts-pick-noimg{font-size:15px;color:#8a8f98;text-align:center;padding:0 4px;}
.ts-pick-name{font-size:15px;font-weight:600;text-align:center;line-height:1.3;color:#16181d;}
.ts-draw{font-size:15px;font-weight:600;color:#fff;background:#4f46e5;border:none;padding:12px 26px;border-radius:999px;cursor:pointer;font-family:inherit;margin-bottom:20px;}
.ts-draw:hover{background:#4338ca;}
.ts-draw:disabled{opacity:.7;cursor:default;}
.ts-shuffle{display:flex;justify-content:center;padding:60px 0;}
.ts-shuffle-card{width:70px;height:110px;background:#4f46e5;border-radius:10px;margin:0 -14px;animation:ts-shuffle-bounce .6s ease-in-out infinite;}
.ts-shuffle-card:nth-child(2){animation-delay:.1s;background:#7c74ee;}
.ts-shuffle-card:nth-child(3){animation-delay:.2s;background:#b3addb;}
@keyframes ts-shuffle-bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}}
.ts-cards{display:grid;gap:16px;justify-content:center;align-items:start;margin-bottom:28px;max-width:1200px;margin-left:auto;margin-right:auto;}
/* One shared set of column rules for both grids, so switching spread size
   can never leave a stale/conflicting layout. minmax(0,…) lets the tracks
   shrink on narrow screens instead of overflowing the container. */
.ts-slots[data-size='1'],.ts-cards[data-size='1']{grid-template-columns:repeat(1,minmax(0,180px));}
.ts-slots[data-size='2'],.ts-cards[data-size='2']{grid-template-columns:repeat(2,minmax(0,200px));}
.ts-slots[data-size='3'],.ts-cards[data-size='3']{grid-template-columns:repeat(3,minmax(0,200px));}
.ts-slots[data-size='4'],.ts-cards[data-size='4']{grid-template-columns:repeat(4,minmax(0,190px));}
.ts-slots[data-size='5'],.ts-cards[data-size='5']{grid-template-columns:repeat(5,minmax(0,180px));}
.ts-slots[data-size='6'],.ts-cards[data-size='6']{grid-template-columns:repeat(6,minmax(0,165px));}
.ts-slots[data-size='7'],.ts-cards[data-size='7']{grid-template-columns:repeat(7,minmax(0,150px));}
.ts-slots[data-size='10'],.ts-cards[data-size='10']{grid-template-columns:repeat(5,minmax(0,160px));}
.ts-slots[data-size='12'],.ts-cards[data-size='12']{grid-template-columns:repeat(4,minmax(0,160px));}
/* --- the shapes ----------------------------------------------------------

   The slots sit in the shape of the spread - a cross for five, an arch for
   seven, the Celtic cross for ten - and so do the cards of the finished
   reading, which is the same spread with the faces up. Positions are placed
   by nth-child rather than by an area name, because the order of the tiles
   is the order the reading engine numbers them in - there is no second
   source of truth to keep in step.

   Below 900px every shape falls back to the plain grid above: a cross laid
   out on a phone is three columns of 90px, and the position names stop
   fitting before the pictures do.
   ------------------------------------------------------------------------ */
@media(min-width:901px){
	/* Five: the cross. Centre is the situation, then what it is built on
	   below, what is in the way to the left, guidance right, outcome above. */
	.ts-slots[data-size='5'],.ts-cards[data-size='5']{grid-template-columns:repeat(3,minmax(0,220px));grid-template-rows:auto auto auto;}
	.ts-slots[data-size='5'] > *:nth-child(1),.ts-cards[data-size='5'] > *:nth-child(1){grid-column:2;grid-row:2;}
	.ts-slots[data-size='5'] > *:nth-child(2),.ts-cards[data-size='5'] > *:nth-child(2){grid-column:2;grid-row:3;}
	.ts-slots[data-size='5'] > *:nth-child(3),.ts-cards[data-size='5'] > *:nth-child(3){grid-column:1;grid-row:2;}
	.ts-slots[data-size='5'] > *:nth-child(4),.ts-cards[data-size='5'] > *:nth-child(4){grid-column:3;grid-row:2;}
	.ts-slots[data-size='5'] > *:nth-child(5),.ts-cards[data-size='5'] > *:nth-child(5){grid-column:2;grid-row:1;}

	/* Seven: the horseshoe. Two steps up, three across the top, two down. */
	.ts-slots[data-size='7'],.ts-cards[data-size='7']{grid-template-columns:repeat(7,minmax(0,149px));gap:12px;grid-template-rows:auto auto auto;align-items:start;}
	.ts-slots[data-size='7'] > *:nth-child(1),.ts-cards[data-size='7'] > *:nth-child(1){grid-column:1;grid-row:3;}
	.ts-slots[data-size='7'] > *:nth-child(2),.ts-cards[data-size='7'] > *:nth-child(2){grid-column:2;grid-row:2;}
	.ts-slots[data-size='7'] > *:nth-child(3),.ts-cards[data-size='7'] > *:nth-child(3){grid-column:3;grid-row:1;}
	.ts-slots[data-size='7'] > *:nth-child(4),.ts-cards[data-size='7'] > *:nth-child(4){grid-column:4;grid-row:1;}
	.ts-slots[data-size='7'] > *:nth-child(5),.ts-cards[data-size='7'] > *:nth-child(5){grid-column:5;grid-row:1;}
	.ts-slots[data-size='7'] > *:nth-child(6),.ts-cards[data-size='7'] > *:nth-child(6){grid-column:6;grid-row:2;}
	.ts-slots[data-size='7'] > *:nth-child(7),.ts-cards[data-size='7'] > *:nth-child(7){grid-column:7;grid-row:3;}

	/* Ten: the Celtic cross - the cross itself in columns 1-3, the staff
	   running up column 5, seven at the foot and ten at the head. */
	.ts-slots[data-size='10'],.ts-cards[data-size='10']{grid-template-columns:repeat(5,minmax(0,190px));grid-template-rows:auto auto auto auto;}
	.ts-slots[data-size='10'] > *:nth-child(1),.ts-cards[data-size='10'] > *:nth-child(1){grid-column:2;grid-row:2;}
	.ts-slots[data-size='10'] > *:nth-child(2),.ts-cards[data-size='10'] > *:nth-child(2){grid-column:3;grid-row:2;}
	.ts-slots[data-size='10'] > *:nth-child(3),.ts-cards[data-size='10'] > *:nth-child(3){grid-column:2;grid-row:3;}
	.ts-slots[data-size='10'] > *:nth-child(4),.ts-cards[data-size='10'] > *:nth-child(4){grid-column:1;grid-row:2;}
	.ts-slots[data-size='10'] > *:nth-child(5),.ts-cards[data-size='10'] > *:nth-child(5){grid-column:2;grid-row:1;}
	.ts-slots[data-size='10'] > *:nth-child(6),.ts-cards[data-size='10'] > *:nth-child(6){grid-column:3;grid-row:1;}
	.ts-slots[data-size='10'] > *:nth-child(7),.ts-cards[data-size='10'] > *:nth-child(7){grid-column:5;grid-row:4;}
	.ts-slots[data-size='10'] > *:nth-child(8),.ts-cards[data-size='10'] > *:nth-child(8){grid-column:5;grid-row:3;}
	.ts-slots[data-size='10'] > *:nth-child(9),.ts-cards[data-size='10'] > *:nth-child(9){grid-column:5;grid-row:2;}
	.ts-slots[data-size='10'] > *:nth-child(10),.ts-cards[data-size='10'] > *:nth-child(10){grid-column:5;grid-row:1;}

	/* Twelve: the Yin Yang. The two sides mirror each other down the outer
	   columns - odd numbers on the left are Side A, even numbers on the
	   right are Side B - and the line where they meet runs through the
	   middle: the two cards that feed the conflict at the top of it, the key
	   and the outcome at the foot. The empty middle is the shape, not a gap:
	   it is the dividing line the spread is named for. */
	.ts-slots[data-size='12'],.ts-cards[data-size='12']{grid-template-columns:repeat(4,minmax(0,168px));grid-template-rows:auto auto auto auto auto auto;}
	.ts-slots[data-size='12'] > *:nth-child(1),.ts-cards[data-size='12'] > *:nth-child(1){grid-column:2;grid-row:1;}
	.ts-slots[data-size='12'] > *:nth-child(2),.ts-cards[data-size='12'] > *:nth-child(2){grid-column:3;grid-row:1;}
	.ts-slots[data-size='12'] > *:nth-child(3),.ts-cards[data-size='12'] > *:nth-child(3){grid-column:1;grid-row:2;}
	.ts-slots[data-size='12'] > *:nth-child(4),.ts-cards[data-size='12'] > *:nth-child(4){grid-column:4;grid-row:2;}
	.ts-slots[data-size='12'] > *:nth-child(5),.ts-cards[data-size='12'] > *:nth-child(5){grid-column:1;grid-row:3;}
	.ts-slots[data-size='12'] > *:nth-child(6),.ts-cards[data-size='12'] > *:nth-child(6){grid-column:4;grid-row:3;}
	.ts-slots[data-size='12'] > *:nth-child(7),.ts-cards[data-size='12'] > *:nth-child(7){grid-column:1;grid-row:4;}
	.ts-slots[data-size='12'] > *:nth-child(8),.ts-cards[data-size='12'] > *:nth-child(8){grid-column:4;grid-row:4;}
	.ts-slots[data-size='12'] > *:nth-child(9),.ts-cards[data-size='12'] > *:nth-child(9){grid-column:1;grid-row:5;}
	.ts-slots[data-size='12'] > *:nth-child(10),.ts-cards[data-size='12'] > *:nth-child(10){grid-column:4;grid-row:5;}
	.ts-slots[data-size='12'] > *:nth-child(11),.ts-cards[data-size='12'] > *:nth-child(11){grid-column:2;grid-row:6;}
	.ts-slots[data-size='12'] > *:nth-child(12),.ts-cards[data-size='12'] > *:nth-child(12){grid-column:3;grid-row:6;}
}

/* Seven across is the one shape the page column cannot hold at a comfortable
   card width: seven columns inside 1200px come to 149px each. Where the
   window has room to spare either side of the column, the board takes it and
   the cards get their 168px. Nothing else on the page moves. */
@media(min-width:1360px){
	.ts-slots[data-size='7'],.ts-cards[data-size='7']{
		margin-left:-70px;margin-right:-70px;max-width:none;
		grid-template-columns:repeat(7,minmax(0,168px));
	}
}

/* Random-draw cards use the same shell as the hand-picked slots. */
.ts-card{min-width:0;width:100%;box-sizing:border-box;border:1px solid #e6e7eb;border-radius:16px;padding:0;overflow:hidden;background:#fff;box-shadow:0 6px 18px -14px rgba(16,20,30,.15);transition:transform .2s, box-shadow .2s;}
.ts-card-in{opacity:0;animation:ts-card-reveal .35s ease forwards;}
@keyframes ts-card-reveal{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
/* !important so the hover lift beats the reveal animation's held transform */
.ts-card:hover{transform:translateY(-4px) !important;box-shadow:0 10px 24px -12px rgba(16,20,30,.2);}
/* The name box is exactly as tall as the name. It used to hold two lines'
   worth of room whether it needed them or not, which kept the pictures in a
   row level with each other but left a one-line name sitting above an empty
   line - and empty space under a heading reads as a mistake, while pictures
   an inch out of step read as cards on a table. */
.ts-slot-filled .ts-pos,.ts-card .ts-pos{padding:2px 12px 9px;margin-bottom:0;border-bottom:1px solid #f0f1f4;display:flex;align-items:flex-start;justify-content:center;text-align:center;}
/* The position name. It was set in uppercase with letter-spacing, which is
   fine for a three-word English label and a mess for a Russian one: capitals
   are wider than lower case, "ЧТО ПЕРЕЧЁРКИВАЕТ" outgrew a 150px card, and
   the break rule that keeps text inside the tile then split it as
   "ПЕРЕЧЁРКИВА / ЕТ". Sentence case at the same size is roughly a fifth
   narrower and breaks between words like ordinary text. */
.ts-pos{font-size:15px;font-weight:600;letter-spacing:0;color:#4f46e5;margin-bottom:8px;line-height:1.3;}
.ts-art{aspect-ratio:1144/1919;background:#f4f5f7;border-radius:10px;overflow:hidden;margin-bottom:10px;display:flex;align-items:center;justify-content:center;}
.ts-art img{width:100%;height:100%;object-fit:cover;display:block;}
.ts-art.ts-reversed img{transform:rotate(180deg);}
.ts-art .ts-noimg{color:#8a8f98;font-size:15px;}
.ts-cardname{font-size:15px;font-weight:700;line-height:1.3;padding:0 12px 12px;min-height:2.6em;display:flex;align-items:flex-start;justify-content:center;text-align:center;}
.ts-orient-tag{display:inline-block;font-size:15px;font-weight:600;letter-spacing:0;line-height:1.25;border-radius:999px;padding:6px 9px;text-align:center;}
.ts-orient-up{background:#f4f5f7;color:#8a8f98;}
.ts-orient-rev{background:#f4f3ff;color:#4f46e5;}
@media(max-width:640px){.ts-cardname{font-size:15px;min-height:2.6em;}.ts-orient-tag{font-size:15px;padding:4px 8px;}}
.ts-verdict{display:flex;align-items:center;gap:18px;border-radius:14px;padding:18px 22px;margin-bottom:14px;background:#f4f3ff;}
.ts-verdict-badge{flex:0 0 auto;font-size:16px;font-weight:700;line-height:1;color:#fff;background:#4f46e5;border-radius:999px;padding:11px 22px;white-space:nowrap;}
.ts-verdict-no{background:#f4f5f7;}
.ts-verdict-no .ts-verdict-badge{background:#16181d;}
.ts-verdict-soft{background:#f7f7fb;}
.ts-verdict-soft .ts-verdict-badge{background:#fff;color:#4f46e5;box-shadow:inset 0 0 0 1px #e6e7eb;}
.ts-verdict-txt{font-size:15px;line-height:1.55;color:#16181d;}
@media(max-width:640px){.ts-verdict{flex-direction:column;align-items:flex-start;gap:12px;padding:18px;}}
/* Numbered card-by-card breakdown inside the summary */
.ts-opener{font-size:15px;line-height:1.6;margin:0 0 16px;color:#16181d;}
.ts-line{display:flex;gap:12px;margin-bottom:16px;}
.ts-line:last-of-type{margin-bottom:0;}
.ts-line-num{flex:0 0 auto;width:28px;height:28px;margin-top:0;border-radius:999px;background:#4f46e5;color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.ts-line-body{flex:1;min-width:0;}
.ts-line-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:15px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#8a8f98;margin-bottom:6px;}
.ts-line-head strong{font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:#16181d;}
.ts-chip{font-size:15px;font-weight:600;letter-spacing:.02em;border-radius:999px;padding:4px 11px;}
.ts-chip-yes{background:#ece9ff;color:#4f46e5;}
.ts-chip-no{background:#16181d;color:#fff;}
.ts-chip-mixed{background:#fff;box-shadow:inset 0 0 0 1px #e6e7eb;color:#8a8f98;}
.ts-line-txt{font-size:15px;line-height:1.6;}
.ts-why{color:#8a8f98;}
.ts-closer{font-size:15px;line-height:1.6;margin:18px 0 0;padding-top:16px;border-top:1px solid #e6e7eb;}
@media(max-width:640px){.ts-line{gap:9px;}.ts-line-num{width:26px;height:26px;font-size:15px;}}
/* Your spread index: the map from position to card */
.ts-index{background:#fff;border:1px solid #e6e7eb;border-radius:14px;padding:18px 22px;margin-bottom:14px;}
.ts-index-lbl{font-size:15px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#4f46e5;margin-bottom:12px;}
.ts-index-row{display:flex;align-items:baseline;gap:12px;padding:8px 0;border-top:1px solid #f4f5f7;}
.ts-index-row:first-of-type{border-top:none;padding-top:0;}
.ts-index-num{flex:0 0 auto;width:26px;height:26px;border-radius:999px;background:#f4f3ff;color:#4f46e5;font-size:15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;align-self:center;}
.ts-index-pos{flex:0 0 auto;min-width:230px;font-size:15px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#8a8f98;}
.ts-index-card{font-size:16px;font-weight:700;color:#16181d;}
@media(max-width:640px){.ts-index-row{flex-wrap:wrap;gap:8px;}.ts-index-pos{min-width:0;flex:1 1 100%;order:3;margin-left:32px;}}
/* Read the cards together: the bit that makes it a reading */
.ts-story{background:#f4f3ff;border-radius:14px;padding:22px 24px;margin-bottom:14px;}
.ts-story-lbl{font-size:15px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#4f46e5;margin-bottom:10px;}
.ts-story-rule{font-size:16px;font-weight:700;color:#16181d;margin:0 0 10px;line-height:1.45;}
.ts-story-txt{font-size:15px;line-height:1.65;color:#16181d;margin:0;}
.ts-story-txt strong{font-weight:700;}
.ts-summary{background:#fff;border:1px solid #e6e7eb;border-radius:14px;padding:22px 24px;}
.ts-summary-lbl{font-size:15px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#4f46e5;margin-bottom:8px;}
.ts-summary-txt{font-size:15px;line-height:1.6;}
.ts-restart{margin-top:16px;font-size:15px;font-weight:600;color:#4f46e5;background:none;border:none;cursor:pointer;font-family:inherit;padding:0;}
.ts-test-start{font-size:15px;font-weight:600;color:#4f46e5;background:#f4f3ff;border:1px solid #e6e7eb;border-radius:999px;padding:12px 22px;cursor:pointer;font-family:inherit;margin-bottom:0;}
.ts-test-start:hover{background:#ece9ff;}
.ts-testcard{background:#fff;border:1px solid #e6e7eb;border-radius:16px;padding:24px;margin-bottom:28px;}
.ts-test-progress{font-size:15px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#8a8f98;margin-bottom:6px;}
.ts-test-name{font-size:18px;font-weight:700;margin-bottom:16px;}
.ts-test-options{display:flex;flex-direction:column;gap:10px;}
.ts-test-opt{text-align:left;font-size:15px;padding:12px 16px;border-radius:8px;border:1px solid #e6e7eb;background:#fff;color:#16181d;cursor:pointer;font-family:inherit;}
.ts-test-opt:hover:not(:disabled){border-color:#4f46e5;}
.ts-test-opt:disabled{cursor:default;}
.ts-test-correct{background:#dcfce7;border-color:#16a34a !important;}
.ts-test-wrong{background:#fee2e2;border-color:#dc2626 !important;}
.ts-test-result{background:#f4f3ff;border-radius:16px;padding:28px;text-align:center;margin-bottom:28px;}
.ts-test-score{font-size:24px;font-weight:700;color:#4f46e5;margin-bottom:6px;}
.ts-test-msg{font-size:15px;color:#8a8f98;margin-bottom:16px;}
.ts-restart:hover{text-decoration:underline;}
/* Phones: two tiles per row whatever the spread size. Three fitted the
   width on paper but left the card name squeezed into two words a line. */
@media(max-width:640px){
	.ts-cards, .ts-slots{gap:12px;}
	.ts-cards[data-size='3'], .ts-slots[data-size='3'],
	.ts-cards[data-size='4'], .ts-slots[data-size='4'],
	.ts-cards[data-size='5'], .ts-slots[data-size='5'],
	.ts-cards[data-size='6'], .ts-slots[data-size='6'],
	.ts-cards[data-size='7'], .ts-slots[data-size='7'],
	.ts-cards[data-size='10'], .ts-slots[data-size='10'],
	.ts-cards[data-size='12'], .ts-slots[data-size='12']{grid-template-columns:repeat(2,minmax(0,1fr));}
	.ts-cards[data-size='2'], .ts-slots[data-size='2']{grid-template-columns:repeat(2,minmax(0,1fr));}
	.ts-cards[data-size='1'], .ts-slots[data-size='1']{grid-template-columns:minmax(0,240px);}
}

/* Card names in the text open a popup with the meaning. */
.ts-cardlink{display:inline;padding:0;border:none;background:none;font-family:inherit;font-size:inherit;font-weight:700;line-height:inherit;color:#4f46e5;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(79,70,229,.32);text-underline-offset:3px;transition:text-decoration-color .15s, color .15s;}
.ts-cardlink:hover{color:#4338ca;text-decoration-color:#4f46e5;}
.ts-index-card .ts-cardlink{font-weight:700;}
/* Phones: everything that is not a paragraph of reading sits centred. */
@media(max-width:640px){
	.ts-step-lbl,.ts-control-lbl,.ts-size-desc,.ts-ask-lbl{text-align:center;}
	.ts-sizes,.ts-modes,.ts-ask,.ts-ask-chips{justify-content:center;}
	.ts-size-desc{margin-left:auto;margin-right:auto;}
	.ts-setup-side{justify-content:center;}
	.ts-field{align-items:center;}
	.ts-select{width:100%;text-align:center;text-align-last:center;background-position:right 12px center;}
	.ts-step-bar{flex-direction:column;align-items:center;gap:12px;}
	.ts-step-bar .ts-check{margin-left:0;}
	/* The filter row used to be one line that scrolled sideways. On a phone
	   that reads as "the buttons run off the screen", and worse: a flex
	   child defaults to min-width:auto, so the row was making the whole
	   dialogue wider than the screen instead of scrolling inside it.
	   It wraps and centres now, and the search box takes its own line. */
	.ts-picker-filters{
		flex-wrap:wrap;justify-content:center;overflow-x:visible;
		padding:12px 16px;gap:6px;min-width:0;
	}
	.ts-picker-filters .ta-filter{flex:0 0 auto;}
	.ts-picker-filters .ta-search{flex:1 1 100%;min-width:0;order:99;text-align:center;}
	.ts-draw,.ts-test-start,.ts-restart{display:block;margin-left:auto;margin-right:auto;}
	.ts-card-foot{justify-content:center;gap:12px;}
	.ts-verdict{text-align:center;align-items:center;}
	/* These three head a block of left aligned reading. Centring the label
	   over it is what made "Your Spread" look adrift, so they line up with
	   the text underneath instead. */
	.ts-index-lbl,.ts-story-lbl,.ts-summary-lbl{text-align:left;}
	.ts-index{padding:16px 18px;}
	.ts-index-row{align-items:center;}
	.ts-index-card{text-align:left;}
	.ts-story{padding:18px;}
	.ts-summary{padding:18px;}

	/* The picker: full screen, and two cards a row so a name fits on a line */
	.ts-slot-overlay{padding:0;}
	.ts-slot-box{
		width:100%;max-width:none;border-radius:0;min-width:0;
		height:100vh;height:100dvh;max-height:none;
	}
	/* Nothing inside the dialogue may set its own width from its content. */
	.ts-slot-box > *{min-width:0;max-width:100%;}
	.ts-slot-box-head{padding:16px;}
	.ts-picker-list{
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:10px;padding:16px 16px calc(20px + env(safe-area-inset-bottom));
	}
	.ts-picker-empty{padding:0 16px 16px;}

	/* Room to breathe: the page had 20px of gutter and 26px between steps
	   on a 390px screen, which is why everything felt pressed together. */
	.ts-wrap{padding:0 16px;}
	.ts-step{padding-bottom:22px;margin-bottom:22px;}
	.ts-testcard{padding:20px 16px;}
	.ts-test-result{padding:24px 18px;}
}

/* --- the block's own width, against the theme's layout rule ---------------

   Measured on the live site in Edge: .ts-wrap resolved to max-width 620px
   while the rule at the top of this file asks for 1200px. Block themes print
   a layout rule of their own - .wp-container-… > * , or :where(.is-layout-…)
   > * - that clamps every child of the post content to the theme's content
   size, and Twenty Twenty-Four's content size is 620px. It carries the same
   specificity as a plain class and is printed into <head> after our
   stylesheet, so it wins on order alone, and the table for a five- or
   ten-card spread ends up squeezed into a column meant for prose.

   Naming the content container puts our width back in front on specificity,
   without !important - which would also have overridden the narrow widths
   this block sets for itself on small screens.

   Printed last in the file on purpose: @media adds no specificity, so a rule
   placed after a media block still wins on paper as well as on screen. */
.entry-content .ts-wrap,
.wp-block-post-content .ts-wrap,
.wp-site-blocks .ts-wrap{max-width:1200px;}