/* A selected reading starts immediately after the wheel on every surface. */
.chart-workspace.has-inline-reading .chart-workspace-stage{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
}
.chart-workspace.has-inline-reading .chart-wheel-column{
  position:static;
}
.chart-workspace.has-inline-reading .chart-layer-content{
  margin-top:0;
  scroll-margin-top:clamp(72px,18vh,150px);
}

/* Shared wheels use the whole phone viewport, independently of card padding.
   Keep the SVG viewBox intact so outer markers and transit rings remain visible.
   Desktop keeps the user's wheel-size preference and multi-column workspaces. */
@media screen and (max-width:800px){
  .chart-workspace .chart-scoped-wheel{
    width:calc(var(--chart-viewport-width,100%) - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));
    max-width:none;
    margin-left:calc(50% - var(--chart-viewport-width,100%)/2 + env(safe-area-inset-left,0px));
    margin-right:calc(50% - var(--chart-viewport-width,100%)/2 + env(safe-area-inset-right,0px));
  }
  .chart-workspace .chart-scoped-wheel>.sky-wheel{
    display:block;
    width:100%;
    height:auto;
  }
  /* Each wheel needs its own row before it can extend beyond its card. */
  .profile-chart-grid,.profile-dual-wheel,.compatibility-wheels{
    grid-template-columns:minmax(0,1fr);
  }
  .horary-book-spread:has(.chart-scoped-wheel){
    display:block;
    overflow:visible;
  }
  .horary-book-spread:has(.chart-scoped-wheel)>.horary-book-index{
    border-radius:19px 19px 0 0;
  }
  .horary-book-spread:has(.chart-scoped-wheel)>.horary-book-paper{
    border-radius:0 0 19px 19px;
  }
}

/* One aligned control board; primary tools share the same gold-and-ink finish. */
.chart-workspace .chart-tools.chart-layer-tabs.chart-toolbox{
  container:chart-tools / inline-size;
  display:grid;grid-template-columns:minmax(0,1fr);gap:7px;
  width:100%;min-width:0;margin-bottom:22px;
}
.chart-toolbox .chart-tools-main,.chart-toolbox .chart-tools-secondary{
  display:grid;gap:7px;min-width:0;align-items:stretch;
}
.chart-toolbox .chart-tools-main{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
.chart-toolbox .chart-tools-secondary{grid-template-columns:repeat(3,minmax(0,1fr))}
.chart-workspace .chart-tools.chart-layer-tabs.chart-toolbox .chart-tools-main>button{
  position:relative;display:flex;align-items:center;justify-content:flex-start;gap:9px;
  min-width:0;width:100%;min-height:74px;height:auto;margin:0;padding:12px 11px;
  border:1px solid #d4b57475;border-radius:12px;
  background:linear-gradient(145deg,#39303c,#24212c 62%,#201e27);
  color:#f2dfb3;box-shadow:inset 0 1px #fff2,0 3px 8px #0002;
  font:800 13px/1.4 'Nunito','Noto Sans Arabic',sans-serif;
  letter-spacing:.005em;text-align:start;white-space:normal;overflow-wrap:anywhere;
  transition:background .18s,border-color .18s,box-shadow .18s;
}
.chart-toolbox .chart-tool-icon{
  display:grid;place-items:center;flex:0 0 24px;width:24px;height:28px;color:#e0bd7c;
}
.chart-toolbox .chart-tool-icon::before{content:'';display:block;width:21px;height:21px;background:currentColor;-webkit-mask:var(--tool-mark) center/contain no-repeat;mask:var(--tool-mark) center/contain no-repeat}
.chart-toolbox .chart-tool-label{display:block;min-width:0;max-width:100%;white-space:normal;text-wrap:balance}
.chart-workspace .chart-tools.chart-layer-tabs.chart-toolbox .chart-tools-main>button:hover{
  transform:none;background:linear-gradient(145deg,#433747,#2c2633);border-color:#eed29a;
}
.chart-workspace .chart-tools.chart-layer-tabs.chart-toolbox .chart-tools-main>button:is(.active,[aria-expanded=true]){
  background:linear-gradient(130deg,#d7b878,#f4e3b7 65%,#e3cb98);
  color:#2c2334;border-color:#f8e5b9;box-shadow:inset 0 1px #fff9,0 3px 9px #0003;
}
.chart-toolbox .chart-tools-main>button:is(.active,[aria-expanded=true]) .chart-tool-icon{color:#745628}
.chart-toolbox .chart-tools-main .advanced-chevron{font-size:13px;opacity:.7;margin-inline-start:3px}
.chart-workspace .chart-tools.chart-layer-tabs.chart-toolbox .chart-tools-secondary>button{
  display:flex;align-items:center;justify-content:center;
  min-width:0;width:100%;min-height:44px;height:auto;margin:0;padding:9px 6px;
  border:1px solid #d4b57435;border-radius:9px;
  background:linear-gradient(150deg,#1d1b23,#121217);color:#d8c6a5;
  box-shadow:inset 0 1px #ffffff06;
  font:750 11px/1.45 'Nunito','Noto Sans Arabic',sans-serif;
  letter-spacing:0;text-align:center;white-space:normal;overflow-wrap:anywhere;
  transition:background .18s,border-color .18s;
}
.chart-workspace .chart-tools.chart-layer-tabs.chart-toolbox .chart-tools-secondary>button:hover{
  transform:none;background:#2c2632;border-color:#d4b57485;
}
.chart-workspace .chart-tools.chart-layer-tabs.chart-toolbox .chart-tools-secondary>button.active{
  background:#3a302b;border-color:#e1bf7f;color:#ffe2a9;box-shadow:inset 0 0 0 1px #e1bf7f35;
}
.chart-workspace .chart-tools.chart-layer-tabs.chart-toolbox button:focus-visible{outline:2px solid #f5d897;outline-offset:2px}
@container chart-tools (min-width:680px){
  .chart-toolbox .chart-tools-main{grid-template-columns:repeat(4,minmax(0,1fr))}
  .chart-toolbox .chart-tools-secondary{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@container chart-tools (max-width:290px){
  .chart-workspace .chart-tools.chart-layer-tabs.chart-toolbox .chart-tools-main>button{gap:6px;padding:10px 8px;font-size:12px;min-height:76px}
  .chart-toolbox .chart-tool-icon{flex-basis:18px;width:18px}
  .chart-toolbox .chart-tool-icon::before{width:17px;height:17px}
  .chart-workspace .chart-tools.chart-layer-tabs.chart-toolbox .chart-tools-secondary>button{font-size:10px;min-height:43px}
  .chart-toolbox .chart-tools-secondary{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){.chart-toolbox button{transition:none!important}}

/* Overview keeps an ivory identity; BINCIKE carries a slow travelling gold halo. */
.chart-workspace .chart-tools.chart-layer-tabs.chart-toolbox .chart-tools-main>button[data-chart-layer=insight],
.chart-workspace .chart-tools.chart-layer-tabs.chart-toolbox .chart-tools-main>button[data-chart-layer=insight]:is(:hover,.active){background:linear-gradient(135deg,#fffdf7,#f5efdf);color:#302637;border-color:#fff9e9;box-shadow:inset 0 1px #fff,0 3px 9px #0002}
.chart-toolbox [data-chart-layer=insight] .chart-tool-icon{color:#806538!important}
@property --bincike-orbit{syntax:'<angle>';initial-value:0deg;inherits:false}
.chart-workspace .chart-toolbox .chart-bincike-trigger{isolation:isolate;overflow:visible}
.chart-toolbox .chart-bincike-trigger::before,.chart-toolbox .chart-bincike-trigger::after{content:'';position:absolute;inset:-2px;border-radius:inherit;padding:2px;pointer-events:none;background:conic-gradient(from var(--bincike-orbit),transparent 0deg,transparent 235deg,#b3874330 265deg,#eac985 300deg,#fff0be 323deg,#d5ad6660 344deg,transparent 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:bincike-orbit 10s linear infinite}
.chart-toolbox .chart-bincike-trigger::before{filter:drop-shadow(0 0 3px #e6c181a0)}
.chart-toolbox .chart-bincike-trigger::after{inset:-4px;padding:4px;filter:blur(5px);opacity:.55;z-index:-1}
@keyframes bincike-orbit{to{--bincike-orbit:360deg}}
@media(prefers-reduced-motion:reduce){.chart-toolbox .chart-bincike-trigger::before,.chart-toolbox .chart-bincike-trigger::after{animation:none;--bincike-orbit:315deg}}
/* Only the eight primary chart actions use capitals. */
.chart-toolbox .chart-tools-main>button .chart-tool-label{text-transform:uppercase}

/* A torn gold pocket discloses the existing tools in normal document flow.
   The SVG stays mounted while the drawer moves the wheel down. */
.chart-explorer-page-title{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.chart-workspace{overflow-anchor:none}
.chart-workspace .chart-explorer{position:relative;isolation:isolate;min-width:0;margin:0 0 17px;perspective:1000px}
.chart-workspace .chart-explorer-toggle{position:relative;display:block;width:100%;height:140px;min-height:0;margin:0;padding:0;border:0;border-radius:25px;background:transparent;color:#f6e4b9;text-align:start;cursor:pointer;box-shadow:none;-webkit-tap-highlight-color:transparent;isolation:isolate;touch-action:manipulation}
.chart-workspace .chart-explorer-toggle:hover{transform:none;background:transparent;box-shadow:none}
.chart-explorer-toggle:focus-visible{outline:2px solid #f5d897;outline-offset:6px}
.chart-explorer-pocket{position:absolute;inset:4px 0 0;z-index:0;border:1px solid #ae885d85;border-radius:25px;background:radial-gradient(ellipse at 50% 0,#cf9c4e3b,transparent 76%),#070609;box-shadow:0 7px 0 -2px #171019,0 8px 0 -1px #9770414f,0 14px 24px -12px #000c,inset 0 -15px 18px #000}
.chart-explorer-face{position:absolute;inset:0 0 13px;z-index:2;border-radius:25px 25px 10px 10px;background:radial-gradient(ellipse at 10% -35%,#f6df9a2b,transparent 63%),linear-gradient(130deg,#413443,#26202d 45%,#302432 80%,#4e3943);clip-path:polygon(0 0,100% 0,100% 86%,95% 84%,89% 90%,82% 85%,76% 93%,69% 87%,63% 96%,57% 90%,51% 98%,45% 88%,39% 95%,33% 87%,27% 93%,21% 84%,16% 90%,11% 82%,6% 88%,0 83%);box-shadow:inset 0 1px 0 #fff3,inset 0 0 0 1px #efd39080;transform-origin:top center;transition:transform .6s cubic-bezier(.22,1,.36,1),filter .3s}
.chart-explorer-face::after{content:'';position:absolute;inset:1px;border-radius:24px;background:linear-gradient(110deg,#fff0 20%,#fff1 36%,#fff0 54%);pointer-events:none}
.chart-explorer-tear{position:absolute;z-index:3;inset-inline:0;bottom:15px;width:100%;height:30px;overflow:visible;pointer-events:none;filter:drop-shadow(0 2px 2px #000)}
.chart-explorer-tear{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 40' preserveAspectRatio='none'%3E%3Cpath d='M0 8 44 13 75 5 112 18 155 10 193 24 236 14 277 28 316 18 354 31 399 17 442 24 484 10 530 18 576 6 619 13 663 5 700 9' fill='none' stroke='%23e2bd79' stroke-width='1.5' opacity='.62'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.chart-explorer-peek{position:absolute;z-index:1;inset-inline:24px;bottom:3px;display:flex;justify-content:center;gap:9px;pointer-events:none;transition:opacity .3s,transform .6s cubic-bezier(.22,1,.36,1)}
.chart-explorer-peek>span{display:flex;align-items:flex-end;justify-content:center;width:30%;max-width:140px;height:46px;padding:0 3px 5px;box-sizing:border-box;border:1px solid #c7a36a99;border-radius:9px;background:linear-gradient(150deg,#594057,#241c2b);box-shadow:0 5px 12px #000b,inset 0 1px #f6dda740;font-size:9px;font-weight:850;letter-spacing:.1em;color:#f3dcad;transform:translateY(-2px) rotate(-7deg)}
.chart-explorer-peek>span:nth-child(2){background:linear-gradient(145deg,#d9bd85,#98835d);color:#251b2d;transform:translateY(1px) rotate(2deg)}
.chart-explorer-peek>span:nth-child(3){transform:translateY(-1px) rotate(8deg)}
.chart-explorer-orb{position:absolute;z-index:4;inset-inline-start:23px;top:24px;display:grid;place-items:center;width:61px;height:61px;border:1px solid #dbb57977;border-radius:50%;background:radial-gradient(circle at 30% 20%,#aa815f40,#19121e 63%);box-shadow:inset 0 2px 6px #f4d5a219,0 4px 12px #0006}
.chart-explorer-orb::before,.chart-explorer-orb::after{content:"";position:absolute;inset:5px;border:1px solid #e1c58a9c;border-radius:50%}.chart-explorer-orb::after{inset:12px;border-style:dotted;transform:rotate(22deg)}.chart-explorer-orb i{font:400 41px/1 serif;font-style:normal;color:#eed3a0;text-shadow:0 2px 4px #000;transform:rotate(-12deg)}
.chart-explorer-copy{position:absolute;z-index:4;inset-inline-start:101px;inset-inline-end:64px;top:26px;display:flex;flex-direction:column;min-width:0;gap:6px;pointer-events:none}
.chart-explorer-eyebrow{color:#ceb48a;font-size:9px;font-weight:750;letter-spacing:.16em;line-height:1.4}
.chart-explorer-title{font-size:clamp(16px,2.6vw,23px);font-weight:900;letter-spacing:.06em;line-height:1.3;color:#fae4af;text-shadow:0 2px 1px #0008,0 -1px #fff2}
.chart-explorer-hint{font-size:11px;line-height:1.5;color:#d9c9d6;letter-spacing:0;font-weight:550}
.chart-explorer-arrow{position:absolute;z-index:4;inset-inline-end:20px;top:38px;display:grid;place-items:center;width:33px;height:33px;border:1px solid #d1ae6d85;border-radius:9px;background:linear-gradient(135deg,#9b724e3d,#251a2a);box-shadow:inset 0 1px #f1d19733,0 3px 7px #0005;transform:rotate(45deg)}
.chart-explorer-arrow i{display:block;width:9px;height:9px;border:solid #f1d79e;border-width:0 1.5px 1.5px 0;transform:rotate(0deg) translate(-1px,-1px);transition:transform .55s cubic-bezier(.22,1,.36,1)}
.chart-explorer-body{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .62s cubic-bezier(.22,1,.36,1),opacity .28s,visibility 0s .62s}
.chart-explorer-clip{min-height:0;overflow:hidden}
.chart-workspace .chart-explorer-body .chart-tools.chart-layer-tabs.chart-toolbox{margin:13px 0 3px;padding:7px 3px 8px;box-sizing:border-box}
.chart-explorer.is-open .chart-explorer-body{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .7s cubic-bezier(.22,1,.36,1),opacity .3s,visibility 0s}
.chart-explorer.is-open .chart-explorer-face{transform:perspective(900px) rotateX(5deg) translateY(-3px);filter:brightness(1.09)}
.chart-explorer.is-open .chart-explorer-peek{opacity:0;transform:translateY(17px)}
.chart-explorer.is-open .chart-explorer-arrow i{transform:rotate(180deg) translate(-1px,-1px)}
.chart-explorer:not(.is-open) .chart-bincike-trigger::before,.chart-explorer:not(.is-open) .chart-bincike-trigger::after{animation-play-state:paused}
.chart-explorer.is-opening .chart-toolbox button{animation:chart-tools-unfold .6s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--tool-delay,0ms);transform-origin:top center}
.chart-explorer .chart-tools-secondary>button:nth-child(3n+2){--tool-delay:35ms}.chart-explorer .chart-tools-secondary>button:nth-child(3n){--tool-delay:70ms}.chart-explorer .chart-tools-main>button{--tool-delay:90ms}.chart-explorer .chart-tools-main>button:nth-child(2n){--tool-delay:140ms}
@keyframes chart-tools-unfold{from{opacity:0;transform:perspective(700px) translateY(-30px) rotateX(-16deg) scale(.97)}to{opacity:1;transform:perspective(700px) translateY(0) rotateX(0) scale(1)}}
.chart-workspace .chart-wheel-column>.chart-workspace-head{margin-top:17px}
@media(max-width:600px){.chart-workspace .chart-explorer-toggle{height:132px}.chart-explorer-copy{inset-inline-start:78px;inset-inline-end:49px;top:25px;gap:6px}.chart-explorer-title{font-size:16px;letter-spacing:.035em}.chart-explorer-eyebrow{font-size:8px;letter-spacing:.1em}.chart-explorer-hint{font-size:10px}.chart-explorer-orb{width:47px;height:47px;inset-inline-start:16px;top:32px}.chart-explorer-orb i{font-size:33px}.chart-explorer-arrow{width:27px;height:27px;inset-inline-end:13px;top:40px;border-radius:7px}.chart-explorer-arrow i{width:8px;height:8px}.chart-explorer-peek{inset-inline:18px;gap:7px}.chart-explorer-peek>span{font-size:8px;letter-spacing:.07em}}
@media(max-width:350px){.chart-explorer-title{font-size:14px}.chart-explorer-copy{inset-inline-start:64px;inset-inline-end:42px}.chart-explorer-orb{inset-inline-start:11px;width:42px;height:42px}.chart-explorer-orb i{font-size:29px}.chart-explorer-arrow{inset-inline-end:10px;width:24px;height:24px}}
@media(prefers-reduced-motion:reduce){.chart-explorer *,.chart-explorer *::before,.chart-explorer *::after{animation:none!important;transition:none!important}.chart-explorer.is-open .chart-explorer-face{transform:none}}
@media print{.chart-explorer{display:none!important}}