/* The chart page's workspace (chart.html): the workspace tools. The same poster
   language as the cards: a flat black ground, hairlines, the answer set big,
   numbers in the mono face, each planet in its own colour. Coral marks one
   thing per tool: today, the strongest, what is running. Tokens only. */

/* each tool is one screen, under the bar, and all of it fits; a scroll that stops near one settles onto it (chart-workspace.js) */
html.ws-on { scroll-padding-top: 56px; }   /* the bar's height */
.ws-tools > .pc-sec { min-height: calc(100svh - 56px); box-sizing: border-box;
  padding-block: clamp(20px, 3vh, calc(30 * var(--u))) clamp(14px, 3vh, calc(30 * var(--u)));   /* the top clears the veil's 20px fade */
  display: flex; flex-direction: column; justify-content: center; }   /* its content in the middle of its screen, as the chart beside it */
.ws-tools > .pc-sec > .mc-head { font-size: min(4.4vw, 7.6vh, calc(64 * var(--u))); margin-bottom: clamp(10px, 2vh, calc(22 * var(--u))); }
.wt-lede { font-family: var(--font-prose); font-weight: 300; font-size: clamp(18px, min(1.7vw, 3.1vh), calc(25 * var(--t))); line-height: 1.42; color: var(--bone); max-width: 32em; text-wrap: pretty; margin: 0 0 clamp(14px, 3vh, calc(30 * var(--u))); }
.wt-lede b { font-weight: 500; }
.ws-tools a.tr-p { text-decoration: underline; text-decoration-color: rgb(var(--bone-rgb) / 0.2); text-underline-offset: 5px; text-decoration-thickness: 1px; transition: text-decoration-color 0.2s; }
.ws-tools a.tr-p:hover { text-decoration-color: currentColor; }

/* ---------- Dasha: the ruler ---------- */
.dr { border-top: 1px solid rgb(var(--bone-rgb) / 0.16); padding-top: clamp(10px, 2vh, calc(20 * var(--u))); }
.dr-when { display: flex; align-items: baseline; gap: 10px; font: 500 calc(15 * var(--t)) var(--mono); color: var(--bone); text-transform: uppercase; letter-spacing: 0.06em; }
.dr-year { display: inline-flex; }
.dr-dig { display: inline-block; height: 1.25em; line-height: 1.25em; overflow: hidden; }
.dr-dig > span { display: flex; flex-direction: column; transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1); }
.dr-dig > span > span { height: 1.25em; }
.dr-age { margin-left: auto; color: var(--bone-mute); }
.dr-chain { display: flex; align-items: flex-end; flex-wrap: wrap; gap: calc(10 * var(--u)) calc(30 * var(--u)); margin: clamp(8px, 1.6vh, 16px) 0 clamp(10px, 2.4vh, 24px); }
.dr-l { display: grid; gap: calc(7 * var(--u)); }
.dr-l[hidden] { display: none; }
.dr-l b { font: 700 var(--sz) / 0.9 var(--font-panel); letter-spacing: -0.045em; color: var(--bone); white-space: nowrap; }
.dr-l[data-l="0"] { --sz: min(5.2vw, 9.4vh, calc(82 * var(--u))); }
.dr-l[data-l="1"] { --sz: min(2.8vw, 5.2vh, calc(44 * var(--u))); }
.dr-l[data-l="2"] { --sz: calc(24 * var(--t)); }
.dr-l + .dr-l b::before { content: '›'; font-weight: 400; color: var(--bone-mute); margin-right: 0.22em; }
.dr-l i { display: block; height: 4px; border-radius: 2px; background: var(--pc); transition: background 0.3s; }
.dr-k { font-size: calc(13 * var(--t)); font-weight: 600; color: var(--bone-dim); }
.dr-d { font: 500 calc(13 * var(--t)) var(--mono); color: var(--bone-mute); }

.dr-ruler { position: relative; height: clamp(150px, 24vh, calc(186px + (var(--u) - 1px) * 400));   /* taller on a bigger screen: chart-dasha.js draws to its height */ outline: none; border-radius: 8px; }
.dr-ruler:focus-visible { box-shadow: 0 0 0 2px var(--coral); }
.dr-ruler canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.dr-tip { position: absolute; bottom: calc(100% + 4px); left: 0; z-index: 2; padding: 3px 11px; border-radius: 99px; background: var(--black); border: 1px solid rgb(var(--bone-rgb) / 0.25);
  font: 600 calc(13 * var(--t)) var(--font-panel); color: var(--bone); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.dr-tip.on { opacity: 1; }
.dr-needle { position: absolute; left: 50%; top: 12%; bottom: 18%; width: 2px; margin-left: -1px; background: var(--bone); pointer-events: none; }
.dr-needle::before { content: ''; position: absolute; top: -9px; left: 50%; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg); background: var(--coral); }
.dr-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: calc(12 * var(--t)) calc(14 * var(--t)); margin-top: calc(8 * var(--u)); }
.dr-today { appearance: none; background: none; border: 1px solid rgb(var(--bone-rgb) / 0.3); color: var(--bone); font: 600 calc(14 * var(--t)) var(--font-panel); min-height: calc(38 * var(--t)); padding: 0 calc(18 * var(--t)); border-radius: 99px; cursor: pointer; transition: border-color 0.2s; }
.dr-today:hover { border-color: var(--bone); }
/* the analysis belongs to the period read out above the ruler: it sits on that readout's top line, so it takes no height of its own */
.dr-top { display: flex; align-items: center; gap: 12px 20px; }
.dr-top .dr-when { flex: 1; min-width: 0; }
.dr-read { margin: clamp(8px, 1.6vh, calc(16 * var(--u))) 0 clamp(10px, 2.4vh, calc(24 * var(--u))); }
.dr-read .dr-chain { margin: 0; }
.dr-ana { appearance: none; flex: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgb(var(--bone-rgb) / 0.3); background: none; color: var(--bone);
  font: 600 calc(13.5 * var(--t)) var(--font-panel); min-height: calc(36 * var(--t)); padding: 0 calc(14 * var(--t)) 0 calc(16 * var(--t)); border-radius: 99px; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.dr-ana:hover { border-color: var(--bone); background: rgb(var(--bone-rgb) / 0.06); }
.dr-ana svg { transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1); }
.dr-ana:hover svg { transform: translateX(3px); }
.dr-zoom { position: relative; display: inline-flex; padding: 3px; border-radius: 99px; background: rgb(var(--bone-rgb) / 0.08); }
.dr-zoom button { appearance: none; border: 0; background: none; position: relative; z-index: 1; font: 600 calc(14 * var(--t)) var(--font-panel); color: var(--bone-dim); min-height: calc(32 * var(--t)); padding: 0 calc(16 * var(--t)); border-radius: 99px; cursor: pointer; transition: color 0.3s; }
.dr-zoom button[aria-pressed="true"] { color: var(--black); }
.dr-zoom i { position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: 99px; background: var(--bone); transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), width 0.45s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s; }
.dr-hint { margin-left: auto; font-size: calc(13 * var(--t)); color: var(--bone-mute); }

/* ---------- Karakas: a deck of tickets, the Atmakaraka on top ----------
   The ticket's shape (notched at the perforation) is a mask; its ground is the site's black
   with the cards' print grain; the planet's own photograph bleeds in from the left. A ticket
   is a size container, so everything on it scales with it, like a printed object, at any
   width or browser zoom. It carries facts only: what they mean opens elsewhere. */
.kt { container-type: inline-size; }
.kt-deck, .kt-nav { --kw: min(100cqw - 50px, (100svh - 380 * var(--t)) * 1.72); }   /* as wide as the column (less the pile's fan), or as the height allows */   /* the pile fans 48px to the right */
.kt-deck { position: relative; width: var(--kw); height: calc(var(--kw) / 1.72 + 32px); outline: none; touch-action: pan-y; }
.kt-deck:focus-visible { outline: 2px solid var(--coral); outline-offset: 8px; border-radius: 6px; }   /* on the deck: the ticket's mask would clip a ring on the ticket */
.kt-card {
  --px: 74%; container-type: size; position: absolute; left: 0; top: 0; width: var(--kw); aspect-ratio: 1.72; overflow: hidden; border-radius: 4cqw;
  background: var(--black); border: 1px solid rgb(var(--bone-rgb) / 0.16); color: var(--bone); transform-origin: 30% 60%; cursor: pointer;
  -webkit-mask: radial-gradient(circle 2.2cqw at var(--px) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 2.2cqw at var(--px) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 2.2cqw at var(--px) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 2.2cqw at var(--px) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
  transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.4s ease;
}
.kt-card.front { cursor: grab; box-shadow: 0 26px 60px rgb(0 0 0 / 0.55); }
.kt-card::before { content: ''; position: absolute; inset: 0; z-index: 3; background: var(--black); opacity: var(--dim, 0); pointer-events: none; transition: opacity 0.45s; }   /* the pile steps back */
.kt-card::after {   /* print grain, static */
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.08; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.kt-art { position: absolute; left: -24%; top: -27%; width: 72%; aspect-ratio: 1; pointer-events: none; }
.kt-card[data-planet="Sun"] .kt-art { left: -33%; }   /* the Sun shines all over: further out, clear of the words */
.kt-card[data-planet="Saturn"] .kt-art { left: -29%; top: -31%; width: 82%; }
.kt-art img { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.6s ease; }
.kt-art img.in { opacity: 1; }
/* the order, as a numeral printed big on the card: coral, cropped by the bottom edge */
.kt-num { position: absolute; right: calc(100% - var(--px) + 3cqw); bottom: -12cqh; z-index: 1; pointer-events: none;
  font: 700 60cqh / 0.8 var(--font-panel); letter-spacing: -0.06em; color: var(--coral); transition: opacity 0.35s ease; }
.kt-card:not(.front) .kt-num { opacity: 0; }   /* only the ticket on top shows its number; the pile shows its colours */
.kt-main { position: absolute; left: 41%; right: calc(100% - var(--px) + 3cqw); top: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 11cqh; }
.kt-name { font: 700 9.4cqw / 0.9 var(--font-panel); letter-spacing: -0.045em; }
.kt-name a { color: inherit; }
.kt-spec { margin-top: 5cqh; display: grid; grid-template-columns: auto auto; justify-content: start; gap: 3.5cqh 5cqw; padding-top: 4cqh; border-top: 1px solid rgb(var(--bone-rgb) / 0.16); }
.kt-spec dt { font-size: max(12px, 1.95cqw); font-weight: 500; color: var(--bone-mute); }
.kt-spec dd { margin-top: 0.4cqh; font-size: max(13px, 2.9cqw); font-weight: 700; letter-spacing: -0.01em; color: var(--bone); white-space: nowrap; }
/* the stub, past the tear: the planet's own colour, dithered (set from the script), the words in white */
.kt-stub { position: absolute; left: var(--px); right: 0; top: 0; bottom: 0; z-index: 1; overflow: hidden; display: grid; place-items: center;
  background-size: cover; background-position: center; image-rendering: pixelated; }
.kt-role { position: relative; z-index: 3; writing-mode: vertical-rl; display: flex; align-items: center; gap: 1.2cqw; }   /* turned a quarter, clockwise */
.kt-role b { font: 700 60px / 0.92 var(--font-panel); letter-spacing: -0.035em; color: #fff; white-space: nowrap; text-shadow: 0 0 1px rgb(0 0 0 / 0.35), 0 1px 10px rgb(0 0 0 / 0.28); }   /* fitRoles() sets the size */
.kt-role i { font: 700 max(12px, 2.4cqw) / 1 var(--font-panel); font-style: normal; letter-spacing: 0.32em; text-transform: uppercase; color: #fff; white-space: nowrap; text-shadow: 0 0 1px rgb(0 0 0 / 0.4), 0 1px 8px rgb(0 0 0 / 0.3); }
/* metal under the pointer: brushed hairlines, a pale film, a bright streak and a glare — the holo
   card's recipe (components/ui), on hover only; nothing loops */
.kt-metal { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.35s ease;   /* under the words: it lights the ground, never the white type */
  background:
    radial-gradient(55% 38% at var(--gx, 50%) var(--gy, 40%), rgb(255 255 255 / 0.18), transparent 70%),
    var(--holo-streak) calc(var(--gx, 50%) * 1.6 - 30%) 0 / 260% 100% no-repeat,
    repeating-linear-gradient(115deg, rgb(255 255 255 / 0.06) 0 1px, transparent 1px 3px),
    var(--holo-film) calc(var(--gx, 50%)) 50% / 300% 300%;
  mix-blend-mode: soft-light; }
@media (hover: hover) { .kt-card.front:hover .kt-metal { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kt-metal { transition: none; } }
.kt-glare { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(38% 55% at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / 0.07), transparent 70%); }
@media (hover: hover) { .kt-card.front:hover .kt-glare { opacity: 1; } }
.kt-card.front { box-shadow: 0 26px 60px rgb(0 0 0 / 0.55); }
.kt-nav { display: flex; align-items: center; gap: 8px; width: var(--kw); margin-top: 4px; }
.kt-step { appearance: none; border: 1px solid rgb(var(--bone-rgb) / 0.25); background: none; color: var(--bone); width: calc(40 * var(--t)); height: calc(40 * var(--t)); border-radius: 50%; font-size: calc(22 * var(--t)); line-height: 1; cursor: pointer; flex: none; transition: border-color 0.2s; }
.kt-step:hover { border-color: var(--bone); }
.kt-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; flex: 1; }
.kt-dots button { appearance: none; border: 0; background: none; font: 600 calc(13 * var(--t)) var(--font-panel); color: var(--bone-mute); padding: calc(7 * var(--t)) calc(8 * var(--t)); border-radius: 99px; cursor: pointer; transition: color 0.2s, background 0.2s; }
.kt-dots button:hover { color: var(--bone); }
.kt-dots button[aria-pressed="true"] { background: rgb(var(--bone-rgb) / 0.12); color: var(--bone); }

/* ---------- Houses: twelve columns, the strongest in coral ---------- */
.bb-sort { position: relative; display: inline-flex; padding: 3px; border-radius: 99px; background: rgb(var(--bone-rgb) / 0.08); margin-bottom: clamp(10px, 2vh, calc(18 * var(--u))); align-self: flex-start; }
.bb-sort button { appearance: none; border: 0; background: none; position: relative; z-index: 1; font: 600 calc(14 * var(--t)) var(--font-panel); color: var(--bone-dim); min-height: calc(32 * var(--t)); padding: 0 calc(16 * var(--t)); border-radius: 99px; cursor: pointer; transition: color 0.3s; }
.bb-sort button[aria-pressed="true"] { color: var(--black); }
.bb-sort i { position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: 99px; background: var(--bone); transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), width 0.45s cubic-bezier(0.32, 0.72, 0, 1); }
.bb { --gap: calc(8 * var(--u)); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); border-top: 1px solid rgb(var(--bone-rgb) / 0.16); padding-top: clamp(22px, 4vh, calc(34 * var(--u))); }
/* the sort: each column slides to its rank's place, one after another */
.bb-col { transition: transform 0.9s cubic-bezier(0.32, 0.72, 0, 1) calc(var(--k) * 35ms); }
.bb.sorted .bb-col { transform: translateX(calc((var(--k) - var(--n)) * (100% + var(--gap)))); }
.bb-col { position: relative; display: grid; grid-template-rows: clamp(130px, 28vh, calc(250 * var(--u))) auto auto; justify-items: center; gap: calc(10 * var(--u)); }
.bb-bar { position: relative; width: 100%; align-self: stretch; border-bottom: 1px solid rgb(var(--bone-rgb) / 0.3); }
.bb-bar i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgb(var(--bone-rgb) / 0.2); border-radius: 4px 4px 0 0;
  transition: height 1.1s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--n) * 45ms), background 0.25s; }
.ws-rise.in .bb-bar i { height: calc(var(--f) * 100%); }
.bb-col.top .bb-bar i { background: var(--coral); }
.bb-col:hover .bb-bar i { background: rgb(var(--bone-rgb) / 0.75); }
.bb-col.top:hover .bb-bar i { background: var(--coral); }
.bb-v { position: absolute; left: 0; right: 0; bottom: calc(var(--f) * 100% + 6px); text-align: center; font: 500 calc(12 * var(--t)) var(--mono); color: var(--bone-dim); opacity: 0; transition: opacity 0.4s 0.6s; }
.ws-rise.in .bb-v { opacity: 1; }
.bb-n { font: 700 calc(20 * var(--t)) / 1 var(--font-panel); }
.bb-name { writing-mode: vertical-rl; transform: rotate(180deg); font-size: calc(13 * var(--t)); color: var(--bone-mute); white-space: nowrap; }
.bb-col.top .bb-n, .bb-col.top .bb-name { color: var(--coral); }
.bb-tip { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translate(-50%, 6px); z-index: 2; width: max-content; max-width: 220px; padding: 10px 12px;
  border-radius: 12px; background: var(--black); border: 1px solid rgb(var(--bone-rgb) / 0.2); display: grid; gap: 2px; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.25s; }
.bb-tip b { font-size: calc(14 * var(--t)); } .bb-tip span { font-size: calc(13 * var(--t)); color: var(--bone-dim); }
.bb-col:hover .bb-tip { opacity: 1; transform: translate(-50%, 0); }
/* the tips at the two ends of the row keep inside it: the ends by where a column stands, sorted or not (set by the script) */
.bb-col[data-edge="l"] .bb-tip { left: 0; transform: translate(0, 6px); } .bb-col[data-edge="l"]:hover .bb-tip { transform: none; }
.bb-col[data-edge="r"] .bb-tip { left: auto; right: 0; transform: translate(0, 6px); } .bb-col[data-edge="r"]:hover .bb-tip { transform: none; }

/* ---------- Strength: a meter of ticks; forty reach the need, the surplus stands taller ---------- */
.sx { position: relative; --pad: clamp(7px, 1.4vh, calc(13 * var(--u))); }
.sx-cap, .sx-head { display: grid; grid-template-columns: calc(22 * var(--t)) calc(84 * var(--t)) minmax(0, 1fr) calc(56 * var(--t)) calc(100 * var(--t)); align-items: center; gap: calc(16 * var(--t)); }
.sx-cap { padding-bottom: 8px; }
.sx-k { position: relative; height: calc(16 * var(--t)); }
.sx-k i { position: absolute; bottom: 0; left: calc(var(--need) * 100%); transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: calc(13 * var(--t)); font-weight: 600; color: var(--bone); }
.sx-list { list-style: none; border-top: 1px solid rgb(var(--bone-rgb) / 0.16); }
.sx-row { border-bottom: 1px solid rgb(var(--bone-rgb) / 0.1); }
.sx-head { padding: var(--pad) 0; }
.sx-rank { font: 500 calc(13 * var(--t)) var(--mono); color: var(--bone-mute); }
.sx-p { font: 600 calc(17 * var(--t)) var(--font-panel); color: var(--pt); }

.sx-ticks { position: relative; display: grid; grid-template-columns: repeat(var(--tot), minmax(0, 1fr)); align-items: end; column-gap: 2px; height: calc(30 * var(--u)); }
.sx-ticks i { height: calc(13 * var(--u)); border-radius: 1.5px; transform-origin: bottom; }
/* bright: the planet's own colour, full; the surplus a step lighter, and taller */
.sx-ticks i.on { background: var(--pc); }
.sx-ticks i.sur { background: color-mix(in oklab, var(--pc) 72%, white); height: calc(30 * var(--u)); }
/* left to right: deep at the start, the planet's colour at the line, near white at the surplus's end */
.sx[data-sx="ramp"] .sx-ticks i.on { background: color-mix(in oklab, var(--pc) calc(62% + var(--t) / var(--per) * 38%), black); }
.sx[data-sx="ramp"] .sx-ticks i.sur { background: color-mix(in oklab, var(--pc) calc(100% - (var(--t) - var(--per)) / var(--sur) * 70%), white); }
/* short of the line: the missing ticks are empty, outlined in the planet's colour */
.sx-ticks i.miss { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--pc) 85%, transparent); }
/* the fill: tick after tick, left to right, each row a beat after the one above */
.sx .sx-ticks i:is(.on, .sur) { transform: scaleY(0); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--n) * 60ms + var(--t) * 16ms); }
.sx.fill .sx-ticks i:is(.on, .sur) { transform: none; }
@media (prefers-reduced-motion: reduce) { .sx .sx-ticks i:is(.on, .sur) { transition: none; } }
.sx-line { position: absolute; left: calc(var(--need) * 100%); top: calc(-1 * var(--pad) - 1px); bottom: calc(-1 * var(--pad) - 1px); width: 2px; margin-left: -2px; background: var(--bone); }
.sx-row:first-child .sx-line { top: -6px; }
.sx-pct { font: 700 calc(17 * var(--t)) var(--font-panel); color: var(--pt); text-align: right; font-variant-numeric: tabular-nums; }
.sx-num { font: 500 calc(13 * var(--t)) var(--font-panel); color: var(--bone-mute); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sb-foot { margin-top: calc(12 * var(--u)); position: relative; }
.sb-key { font-size: calc(13 * var(--t)); color: var(--bone-mute); }
/* review only: the two colourings, side by side on the page (it goes once one is chosen) */
.sx-try { display: inline-flex; align-items: center; gap: 4px; padding: 2px; border-radius: 99px; border: 1px dashed rgb(var(--bone-rgb) / 0.3); }
.sx-try { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }   /* out of the flow: it adds no height */
.sx-try span { font-size: 12px; color: var(--bone-mute); padding: 0 6px 0 8px; }
.sx-try button { appearance: none; border: 0; background: none; color: var(--bone-dim); font: 600 13px var(--font-panel); min-height: 28px; padding: 0 12px; border-radius: 99px; cursor: pointer; }
.sx-try button[aria-pressed="true"] { background: var(--bone); color: var(--black); }

/* ---------- Transits: today's sky, every planet alike ---------- */
.tr-date { font: 500 calc(14 * var(--t)) var(--font-panel); color: var(--bone-mute); margin: calc(-1 * clamp(6px, 1.6vh, 16px)) 0 clamp(8px, 1.6vh, 14px); }
.tr-date span { margin: 0 4px; }
.tr-p { font: 700 calc(19 * var(--t)) / 1 var(--font-panel); letter-spacing: -0.02em; color: var(--bone); }
.tr-r { font: 600 calc(11 * var(--t)) var(--font-panel); padding: 1px 6px; border-radius: 99px; border: 1px solid rgb(var(--bone-rgb) / 0.3); color: var(--bone-dim); }
.tq { border-top: 1px solid rgb(var(--bone-rgb) / 0.16); }
.tq-row { display: grid; grid-template-columns: minmax(calc(96 * var(--t)), 0.9fr) minmax(calc(150 * var(--t)), 1.4fr) minmax(calc(118 * var(--t)), 1.1fr) minmax(calc(118 * var(--t)), 1.1fr) calc(92 * var(--t)); align-items: center; gap: calc(14 * var(--t));
  padding: clamp(5px, 1vh, calc(9 * var(--u))) 0; border-bottom: 1px solid rgb(var(--bone-rgb) / 0.08); }
.tq-head { padding: calc(8 * var(--u)) 0; font-size: calc(12.5 * var(--t)); font-weight: 600; color: var(--bone-mute); border-bottom-color: rgb(var(--bone-rgb) / 0.16); }
.tq-head > span:last-child { white-space: nowrap; text-align: center; }
.tq-head em { font-style: normal; font-size: calc(11 * var(--t)); font-weight: 600; margin-left: 4px; padding: 1px 6px; border-radius: 99px; border: 1px dashed rgb(var(--bone-rgb) / 0.3); }
.tq-p { display: flex; align-items: center; gap: 7px; }
.tq-now, .tq-until { display: grid; gap: 1px; }
.tq-now b, .tq-until b { font-size: calc(14.5 * var(--t)); font-weight: 700; color: var(--bone); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tq-now small, .tq-until small { font-size: calc(12.5 * var(--t)); color: var(--bone-mute); white-space: nowrap; }
.tq .g { font-family: var(--font-symbol); color: var(--pt); margin-right: 4px; font-weight: 400; }
.tq-next { font-size: calc(14 * var(--t)); font-weight: 600; color: var(--bone-dim); white-space: nowrap; }
.tq-rate { color: var(--bone-mute); text-align: center; }
.tq-row[data-planet]:hover { background: rgb(var(--bone-rgb) / 0.03); }

/* ---------- the pinned chart answers ---------- */
.ws-stage .k-chip, .ws-stage .k-sign { transition: opacity 0.35s ease; }
.ws-stage .k-house { transition: fill 0.5s ease, stroke 0.3s; }
.ws-stage .k-house.best { stroke: var(--coral); stroke-width: 2.5; stroke-linejoin: round; paint-order: stroke; }
.ws-stage[data-focus="1"] .k-chip:not(.lit) { opacity: 0.18; }
.ws-stage[data-focus="1"] .k-sign { opacity: 0.45; }

/* the pinned card's two charts, the D1 and today's sky: one at a time */
.ws-stage > .pc-chart { transition: opacity 0.3s ease; }
.ws-stage[data-show="d1"] > .pc-chart:not([data-chart="d1"]), .ws-stage[data-show="d9"] > .pc-chart:not([data-chart="d9"]), .ws-stage[data-show="now"] > .pc-chart:not([data-chart="now"]) { opacity: 0; }

/* the Planets table keeps to one screen on a short laptop too */
.ws-tools #planets .pc-table td { padding-top: clamp(5px, 1.1vh, calc(12 * var(--u))); padding-bottom: clamp(5px, 1.1vh, calc(12 * var(--u))); font-size: calc(16 * var(--t)); }
.ws-tools #planets .pc-table th { font-size: calc(13 * var(--t)); padding-bottom: calc(12 * var(--u)); }
.ws-tools #planets .pc-table .chip { font-size: calc(15 * var(--t)); }
.ws-tools #planets .pc-table .pada { font-size: calc(13 * var(--t)); }
.ws-tools #planets .pc-table .dig { font-size: calc(12 * var(--t)); }
.ws-tools #planets .pc-table .r { font-size: calc(11 * var(--t)); }

/* ---------- Dasha analysis: a poster over the page ---------- */
.da {
  margin: auto; padding: 0; border: 1px solid rgb(var(--bone-rgb) / 0.14); border-radius: 24px; color: var(--bone); background: var(--black);
  width: min(calc(820 * var(--u)), calc(100vw - 32px)); max-height: min(calc(900 * var(--u)), calc(100svh - 32px)); overflow: hidden; display: none; flex-direction: column;
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.6); opacity: 1; transform: none;
  transition: opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1), transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), overlay 0.4s allow-discrete, display 0.4s allow-discrete;
}
.da[open] { display: flex; }
.da:not([open]) { opacity: 0; transform: translateY(24px) scale(0.97); transition-duration: 0.25s; }
@starting-style { .da[open] { opacity: 0; transform: translateY(24px) scale(0.97); } }
.da::backdrop { background: rgb(var(--black-rgb) / 0.62); opacity: 1; transition: opacity 0.35s, overlay 0.35s allow-discrete, display 0.35s allow-discrete; }
.da:not([open])::backdrop { opacity: 0; }
@starting-style { .da[open]::backdrop { opacity: 0; } }
.da-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 14px 14px 0 16px; pointer-events: none; }
.da-bar > * { pointer-events: auto; }
.da-bar .ws-x { position: static; margin-left: 0; background: rgb(var(--black-rgb) / 0.55); }
.da-nav { appearance: none; border: 1px solid rgb(var(--bone-rgb) / 0.22); background: rgb(var(--black-rgb) / 0.55); color: var(--bone); font: 600 calc(14 * var(--t)) var(--font-panel); min-height: calc(40 * var(--t)); padding: 0 calc(14 * var(--t)); border-radius: 99px; cursor: pointer; }
.da-nav[data-d="1"] { margin-left: auto; }
.da-nav[hidden] { display: inline-block; visibility: hidden; }
.da-nav:hover { border-color: var(--bone); }
.da-scroll { flex: 1; min-height: 0; overflow: auto; }
.da-scroll.push { animation: wc-push 0.42s cubic-bezier(0.32, 0.72, 0, 1); }
.da-scroll.pop { animation: wc-pop 0.42s cubic-bezier(0.32, 0.72, 0, 1); }
.da-head { position: relative; display: grid; grid-template-columns: 38% 1fr; min-height: calc(300 * var(--u)); overflow: hidden; }
.da-art { position: absolute; left: calc(-130 * var(--u)); top: calc(-60 * var(--u)); width: calc(440 * var(--u)); height: calc(440 * var(--u)); pointer-events: none; }
.da-orb { width: 100%; height: 100%; display: block; }
.da-title { grid-column: 2; padding: calc(74 * var(--u)) calc(34 * var(--u)) calc(26 * var(--u)) calc(8 * var(--u)); position: relative; z-index: 1; }
.da-title h2 { font: 700 clamp(52px, 6vw, calc(76 * var(--u))) / 0.88 var(--font-panel); letter-spacing: -0.05em; }
.da-when { margin-top: calc(10 * var(--u)); font-size: calc(15 * var(--t)); font-weight: 500; color: var(--bone-dim); }
.da-when em { font-style: normal; font-weight: 700; color: var(--coral); }
.da-score { margin-top: calc(20 * var(--u)); display: grid; gap: calc(8 * var(--u)); max-width: calc(420 * var(--u)); }
.da-nums { display: flex; justify-content: space-between; font-size: calc(14 * var(--t)); color: var(--bone-dim); }
.da-nums b { font: 700 calc(24 * var(--t)) var(--font-panel); letter-spacing: -0.02em; margin-right: 5px; font-variant-numeric: tabular-nums; }
.da-nums .h b { color: var(--coral); }
.da-nums .g b { color: var(--bone); }
.da-areas { margin-top: calc(16 * var(--u)); font-family: var(--font-prose); font-size: calc(18 * var(--t)); line-height: 1.45; color: var(--bone-dim); max-width: 30em; }
.da-areas b { font-weight: 500; color: var(--bone); }
.da-body { padding: 0 calc(34 * var(--u)) calc(28 * var(--u)); }
.da-body .pc-sub { margin-top: 6px; }
/* good and hard, from one centre line: hard to the left in coral, good to the right in bone */
.dv { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: calc(10 * var(--u)); }
.dv::after { content: ''; position: absolute; left: 50%; top: -5px; bottom: -5px; width: 1px; background: rgb(var(--bone-rgb) / 0.45); }
.dv i { display: block; height: 100%; width: 0; transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s; }
.dv-h { justify-self: end; background: var(--coral); border-radius: 3px 0 0 3px; }
.dv-g { justify-self: start; background: var(--bone); border-radius: 0 3px 3px 0; }
.da.go .dv-h { width: calc(var(--h) * 100%); }
.da.go .dv-g { width: calc(var(--g) * 100%); }
.dv.big { height: calc(18 * var(--u)); }
.da-ads { list-style: none; border-top: 1px solid rgb(var(--bone-rgb) / 0.16); }
.da-row { border-bottom: 1px solid rgb(var(--bone-rgb) / 0.1); }
.da-go { appearance: none; border: 0; background: none; color: inherit; font: inherit; text-align: left; width: 100%; cursor: pointer;
  display: grid; grid-template-columns: calc(150 * var(--t)) calc(140 * var(--t)) minmax(calc(150 * var(--t)), 1fr) calc(150 * var(--t)); align-items: center; gap: calc(18 * var(--t)); padding: calc(12 * var(--u)) 6px; border-radius: 10px; transition: background 0.2s; }
.da-go:hover { background: rgb(var(--bone-rgb) / 0.05); }
.da-p { display: grid; gap: 2px; }
.da-p b { font: 700 calc(18 * var(--t)) var(--font-panel); color: var(--pt); }
.da-p em { justify-self: start; font-style: normal; font-size: calc(11 * var(--t)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--black); background: var(--coral); border-radius: 99px; padding: 2px 7px; margin: 2px 0; }
.da-p small { font-size: calc(12.5 * var(--t)); color: var(--bone-mute); }
.da-row.now .da-go { background: rgb(var(--bone-rgb) / 0.06); }
.da-d { font-size: calc(14 * var(--t)); font-weight: 500; color: var(--bone-dim); font-variant-numeric: tabular-nums; }
.da-sc { display: grid; grid-template-columns: calc(34 * var(--t)) minmax(0, 1fr) calc(34 * var(--t)); align-items: center; gap: 8px; }
.da-n { font: 700 calc(13 * var(--t)) var(--font-panel); font-variant-numeric: tabular-nums; }
.da-n.h { text-align: right; color: var(--coral); }
.da-n.g { color: var(--bone); }
.da-ar { font-size: calc(13.5 * var(--t)); color: var(--bone-dim); line-height: 1.35; }
.da-why { margin-top: 18px; border-top: 1px solid rgb(var(--bone-rgb) / 0.12); padding-top: 14px; }
.da-why summary { cursor: pointer; font-weight: 600; font-size: calc(15 * var(--t)); color: var(--bone); }
.da-why ul { list-style: none; margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 26px; }
.da-why li { display: grid; grid-template-columns: calc(46 * var(--t)) 1fr; gap: 10px; font-size: calc(14 * var(--t)); color: var(--bone-dim); line-height: 1.35; }
.da-why li b { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.da-why li.g b { color: var(--bone); }
.da-why li.h b { color: var(--coral); }
.da-note { margin-top: calc(18 * var(--u)); font-size: calc(13 * var(--t)); line-height: 1.5; color: var(--bone-mute); max-width: 46em; }

/* the Planets table in a narrow tools column: the D9 column steps out (the chart's D1 | D9 switch shows it) */
.ws-tools { container-type: inline-size; }
@container (max-width: 760px) {
  #planets .pc-table th:last-child, #planets .pc-table td:last-child { display: none; }
}
@container (max-width: 640px) {
  #planets .pc-table td:first-child, #planets .pc-table .pada { white-space: nowrap; }
  #planets .pc-table td, #planets .pc-table th { padding-right: 10px; }
}
@container (max-width: 700px) {   /* a narrow tools column (a smaller laptop, or 125% zoom) */
  .tq-row { gap: 10px; grid-template-columns: minmax(84px, 0.9fr) minmax(136px, 1.4fr) minmax(108px, 1.1fr) minmax(104px, 1.1fr) 56px; }
  .tq-head em { display: none; }   /* the column says Rating; its title says it is coming */
  .tq-now b, .tq-until b { font-size: 13.5px; }
  .tq-next { font-size: 13px; }
}

/* ---------- the chart studio: the pinned chart, opened (chart-studio.js) ---------- */
.cs {
  margin: auto; padding: 0; border: 1px solid rgb(var(--bone-rgb) / 0.14); border-radius: 24px; color: var(--bone); background: var(--black);
  width: min(calc(1240 * var(--u)), calc(100vw - 40px)); height: min(calc(860 * var(--u)), calc(100svh - 40px)); overflow: hidden; display: none; flex-direction: column;
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.6); opacity: 1; transform: none;
  transition: opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1), transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), overlay 0.45s allow-discrete, display 0.45s allow-discrete;
}
.cs[open] { display: flex; }
.cs:not([open]) { opacity: 0; transform: translate(var(--ox, 0), var(--oy, 0)) scale(var(--os, 0.6)); transition-duration: 0.28s; }
@starting-style { .cs[open] { opacity: 0; transform: translate(var(--ox, 0), var(--oy, 0)) scale(var(--os, 0.6)); } }
.cs::backdrop { background: rgb(var(--black-rgb) / 0.66); opacity: 1; transition: opacity 0.35s, overlay 0.35s allow-discrete, display 0.35s allow-discrete; }
.cs:not([open])::backdrop { opacity: 0; }
@starting-style { .cs[open]::backdrop { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cs, .cs:not([open]) { transition: opacity 0.2s; transform: none; } }
.cs-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 0 30px; }
.cs-top h2 { font: 700 calc(26 * var(--t)) var(--font-panel); letter-spacing: -0.03em; }
.cs-sub { font-weight: 500; color: var(--bone-mute); letter-spacing: -0.01em; }
.cs-x { position: static; }
.cs-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, calc(380 * var(--t))); gap: calc(32 * var(--u)); padding: 10px 30px 26px; }
.cs-stage { display: grid; place-items: center; min-height: 0; }
.cs-chart, .cs-flow { grid-area: 1 / 1; width: min(100%, calc(min(calc(860 * var(--u)), 100svh - 40px) - 110px)); aspect-ratio: 1; transition: opacity 0.3s ease; }
.cs-chart .kundali { width: 100%; height: auto; background: transparent; }   /* the flowing colours show from under it */
.cs-stage[data-show="d1"] > .cs-chart:not([data-chart="d1"]), .cs-stage[data-show="d9"] > .cs-chart:not([data-chart="d9"]), .cs-stage[data-show="now"] > .cs-chart:not([data-chart="now"]) { opacity: 0; pointer-events: none; }
.cs-chart [data-kind] { cursor: pointer; }
.cs-chart .k-house { transition: fill 0.2s; }
@media (hover: hover) { .cs-chart .k-house:hover { fill: rgb(var(--bone-rgb) / 0.05); } }
.cs-chart .k-chip { transition: opacity 0.3s ease; }
.cs-chart .k-chip.cs-dim { opacity: 0.32; }
/* a soft dark halo on the chart's words: they read on a coloured house too */
.cs-chart .k-chip, .cs-chart .k-sign { paint-order: stroke; stroke: rgb(var(--black-rgb) / 0.5); stroke-width: 2.6px; stroke-linejoin: round; }
.cs-side { --sg: calc(20 * var(--t)); min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--sg); padding: 4px 2px 8px 0; }
/* a group that does not apply (the overlay on the D9, the houses in lordship) folds shut, and the groups under it close up
   smoothly; its gap folds with it */
.cs-group { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.42s cubic-bezier(0.32, 0.72, 0, 1), margin-bottom 0.42s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease; }
.cs-fold { min-height: 0; overflow: hidden; padding: 4px; margin: -4px; }   /* the padding: room for a focus ring inside the clip */
.cs-group.shut { grid-template-rows: 0fr; margin-bottom: calc(-1 * var(--sg)); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .cs-group { transition: opacity 0.2s; } }
.cs-houses { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.cs-houses button { appearance: none; min-height: calc(36 * var(--t)); border-radius: 10px; border: 1px solid rgb(var(--bone-rgb) / 0.16); background: none; color: var(--bone-dim);
  font: 700 calc(14 * var(--t)) var(--font-panel); cursor: pointer; font-variant-numeric: tabular-nums; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.cs-houses button:hover { color: var(--bone); border-color: rgb(var(--bone-rgb) / 0.35); }
.cs-houses button[aria-pressed="true"] { background: var(--bone); color: var(--black); border-color: var(--bone); }
.cs-houses button:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.cs-read .cs-dim { color: var(--bone-mute); font-weight: 500; }
.cs-k { font-size: calc(13 * var(--t)); font-weight: 600; color: var(--bone-mute); margin-bottom: calc(8 * var(--t)); }
.cs-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: rgb(var(--bone-rgb) / 0.06); }
.cs-seg button { appearance: none; border: 0; background: none; color: var(--bone-dim); border-radius: 10px; min-height: calc(44 * var(--t)); padding: 8px 6px; display: grid; align-content: center; gap: 1px; cursor: pointer;
  font: 600 calc(14 * var(--t)) var(--font-panel); transition: background 0.25s, color 0.25s; }
.cs-seg button b { font-size: calc(15 * var(--t)); font-weight: 700; }
.cs-seg button span { font-size: calc(12 * var(--t)); font-weight: 500; }
.cs-seg button:hover { color: var(--bone); }
.cs-seg button[aria-pressed="true"] { background: var(--bone); color: var(--black); }
.cs-seg button:disabled { opacity: 0.38; cursor: default; }
.cs-seg button:focus-visible, .cs-chips button:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-chips button { appearance: none; display: inline-flex; align-items: center; gap: 7px; min-height: calc(36 * var(--t)); padding: 0 calc(13 * var(--t)) 0 calc(11 * var(--t)); border-radius: 99px; border: 1px solid rgb(var(--bone-rgb) / 0.16);
  background: none; color: var(--bone-dim); font: 600 calc(13.5 * var(--t)) var(--font-panel); cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.cs-chips button i { width: 9px; height: 9px; border-radius: 50%; background: var(--pc); }
.cs-chips button:hover { color: var(--bone); border-color: rgb(var(--bone-rgb) / 0.35); }
.cs-chips button[aria-pressed="true"] { border-color: var(--pc); background: color-mix(in oklab, var(--pc) 24%, transparent); color: var(--bone); }
.cs-read { border-top: 1px solid rgb(var(--bone-rgb) / 0.12); padding-top: 16px; display: grid; gap: 10px; }
.cs-read p { font-size: calc(15 * var(--t)); line-height: 1.55; color: var(--bone-dim); }
.cs-read p b { font-weight: 700; color: var(--bone); }
.cs-read .cs-note { font-size: calc(14 * var(--t)); color: var(--bone-mute); }
.cs-key { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.cs-key li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; font-size: calc(13.5 * var(--t)); color: var(--bone-dim); }
.cs-key li i { width: 10px; height: 10px; border-radius: 3px; background: var(--pc); }
.cs-key li b { font-weight: 600; color: var(--bone); }
/* what is drawn on the chart: under its words, over its lines */
.cs-ov { pointer-events: none; }
.cs-fill { fill: var(--pc); fill-opacity: var(--a); }
.cs-fill.glow { stroke: var(--pc); stroke-width: 2.5; stroke-linejoin: round; filter: drop-shadow(0 0 7px var(--pc)); }
.cs-ring { fill: color-mix(in oklab, var(--pc) 24%, transparent); stroke: var(--pc); stroke-width: 1.6; }
.cs-focus { fill: rgb(var(--bone-rgb) / 0.08); stroke: rgb(var(--bone-rgb) / 0.55); stroke-width: 2; stroke-linejoin: round; }
.cs-in { stroke: var(--pc); stroke-width: 2.4; stroke-linecap: round; }
/* the flowing colours (chart-flow.js) draw on a canvas under the chart; the words of a lit house sit on a dark plate */
.cs-flow { pointer-events: none; }
.cs-plate { fill: rgb(var(--black-rgb) / 0.58); }
.cs-lord { stroke: var(--pc); stroke-width: 1.8; stroke-dasharray: 2 5; stroke-linecap: round; fill: none; }
.cs-tag rect { fill: var(--black); stroke: var(--pc); stroke-width: 1.3; }
.cs-tag text { font: 700 11.5px var(--font-panel); fill: var(--pt); }
@media (max-width: 900px) {   /* a narrow window: the chart over its controls */
  .cs-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 16px; padding: 8px 16px 16px; }
  .cs-chart, .cs-flow { width: min(100%, 52svh); }
}
.cs-stage { position: relative; }
.cs-tip { position: absolute; z-index: 3; display: grid; gap: 3px; padding: 8px 11px; border-radius: 10px; background: var(--black); border: 1px solid rgb(var(--bone-rgb) / 0.24);
  box-shadow: 0 10px 26px rgb(0 0 0 / 0.5); font: 600 calc(13 * var(--t)) var(--font-panel); color: var(--bone-dim); pointer-events: none; white-space: nowrap; }
.cs-tip[hidden] { display: none; }
.cs-tip b { color: var(--bone); font-weight: 700; }
.cs-tip span { display: flex; align-items: center; gap: 7px; }
.cs-tip i { width: 8px; height: 8px; border-radius: 50%; background: var(--pc); }

/* a short screen (a small laptop, or 125% zoom): the nine transit rows and the dasha readout keep to one screen */
@media (max-height: 700px) {
  .tq-row { padding: 3px 0; }
  .tq-now b, .tq-until b { line-height: 1.2; }
  .tq-now small, .tq-until small { font-size: 12px; line-height: 1.15; }
  .tq-head { padding: 5px 0; }
  .dr-chain { gap: 6px 26px; }
  .cs-side { --sg: 12px; }
  .cs-k { margin-bottom: 5px; }
  .cs-seg button { min-height: 38px; padding-block: 5px; }
  .cs-chips button, .cs-houses button { min-height: 32px; }
  .cs-read { padding-top: 10px; }
}
@media (max-height: 620px) {   /* shorter still (125% zoom on a laptop with the Dock showing) */
  .cs-side { --sg: 9px; }
  .cs-body { padding-bottom: 16px; }
  .cs-seg button { min-height: 34px; }
  .cs-chips button, .cs-houses button { min-height: 30px; }
  .cs-chips, .cs-houses { gap: 4px; }
  .sx { --pad: 5px; }
  .sx-ticks, .sx-ticks i.sur { height: 24px; }
  .sx-ticks i { height: 10px; }
  .tq-row { padding: 1px 0; }
  .tq-head { padding: 3px 0; }
  .ws-tools .wt-lede { margin-bottom: 10px; }
  .ws-tools #planets .pc-table td { padding-top: 4px; padding-bottom: 4px; }
}

/* reduced motion: the deck deals and the analysis opens without travelling */
@media (prefers-reduced-motion: reduce) {
  .kt-card, .kt-card::before { transition: opacity 0.2s ease !important; }
  .da, .da:not([open]) { transition: opacity 0.2s; transform: none; }
  .da-scroll.push, .da-scroll.pop { animation: none; }
}