/* LunaFlow · Orbit layout for the Luna page (2026-10-23). Only active when html has .orbit-layout (gear → Layout → Orbit, or ?layout=orbit).
   It rearranges and animates what the page already has; every button keeps its own handler. */

/* 1 · the launch pad: Setup now becomes the moon, the other actions orbit below it */
.orbit-layout nav.ctl { position:relative; display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; justify-items:center;
  padding:26px 0 14px; margin-bottom:6px; }
.orbit-layout nav.ctl .orbit-rings { position:absolute; left:50%; top:26px; width:200px; height:200px; transform:translateX(-50%); pointer-events:none; }
.orbit-layout nav.ctl .orbit-rings i { position:absolute; inset:0; border-radius:50%; border:1px solid rgba(212,168,75,.28); }
.orbit-layout nav.ctl .orbit-rings i:nth-child(2) { inset:-22px; border-style:dashed; border-color:rgba(212,168,75,.16); animation:orbit-spin 40s linear infinite; }
.orbit-layout nav.ctl .orbit-rings i:nth-child(3) { inset:-44px; border-color:rgba(212,168,75,.08); }
.orbit-layout nav.ctl .orbit-rings b { position:absolute; top:-26px; left:50%; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:#f4dc9a;
  box-shadow:0 0 12px #f4dc9a; transform-origin:4px 126px; animation:orbit-spin 9s linear infinite; }
@keyframes orbit-spin { to { transform:rotate(360deg); } }
.orbit-layout #bSetup { grid-column:1 / -1; width:200px; height:200px; border-radius:50% !important; position:relative; z-index:1; padding:0 18px !important;
  white-space:normal !important; font:800 15px/1.25 var(--o-sans) !important; letter-spacing:.14em !important;
  background:radial-gradient(circle at 34% 28%, #fff4cf 0%, #f1d896 18%, #d4a84b 52%, #8a6420 100%) !important; color:#140e02 !important;
  box-shadow:0 0 0 6px rgba(212,168,75,.10), 0 0 60px rgba(212,168,75,.45), inset -18px -22px 40px rgba(90,60,10,.45) !important; margin-bottom:22px; }
.orbit-layout #bSetup::after { content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 70% 70%, rgba(80,50,5,.25) 0 8%, transparent 9%), radial-gradient(circle at 30% 62%, rgba(80,50,5,.18) 0 5%, transparent 6%), radial-gradient(circle at 62% 30%, rgba(80,50,5,.15) 0 4%, transparent 5%); }
.orbit-layout #bSetup:not(:disabled):hover { transform:scale(1.03) !important; }
.orbit-layout #bSetup:disabled { filter:saturate(.6) brightness(.85); }
.orbit-layout nav.ctl > button:not(#bSetup) { width:100%; min-height:46px; }

/* 2 · while Claude reads: the moon pulses and the rings speed up; the progress card glows */
.orbit-reading nav.ctl .orbit-rings i:nth-child(2) { animation-duration:3s; border-color:rgba(244,220,154,.5); }
.orbit-reading nav.ctl .orbit-rings b { animation-duration:1.4s; }
.orbit-reading #bSetup { animation:orbit-pulse 1.2s ease-in-out infinite; }
@keyframes orbit-pulse { 50% { box-shadow:0 0 0 14px rgba(212,168,75,.06), 0 0 90px rgba(244,220,154,.7), inset -18px -22px 40px rgba(90,60,10,.45); } }
.orbit-layout #prog { background:linear-gradient(165deg, rgba(21,41,90,.92), rgba(9,21,51,.95)) !important; border:1px solid rgba(212,168,75,.55) !important;
  border-radius:20px !important; box-shadow:0 0 40px rgba(212,168,75,.18) !important; }
.orbit-layout #prog .bar i { background:linear-gradient(90deg, #8a6420, #f4dc9a) !important; box-shadow:0 0 12px rgba(244,220,154,.6); }

/* 3 · a new read arrives: the setup card flips in and the direction glows */
.orbit-layout #vip { transform-origin:50% 0; }
.orbit-layout #vip.orbit-arrive { animation:orbit-arrive .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes orbit-arrive { 0% { transform:perspective(900px) rotateX(-38deg) translateY(16px); opacity:.2; } 60% { box-shadow:0 0 0 1px #d4a84b, 0 0 70px rgba(212,168,75,.45); } 100% { transform:none; opacity:1; } }
.orbit-layout #vip[data-orbit-dir="long"] { box-shadow:0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(47,211,138,.45), 0 0 50px rgba(47,211,138,.12) !important; }
.orbit-layout #vip[data-orbit-dir="short"] { box-shadow:0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,90,106,.45), 0 0 50px rgba(255,90,106,.12) !important; }
.orbit-layout #dir { text-shadow:0 0 18px currentColor; }

/* 4 · market analysis / reason / risk: a swipe deck on the phone, a row on wide screens */
@media (max-width:720px) {
  .orbit-layout .bottom { display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; padding:6px 8% 10px; margin:0 calc(-1 * max(14px, env(safe-area-inset-left)));
    perspective:1000px; scrollbar-width:none; }
  .orbit-layout .bottom::-webkit-scrollbar { display:none; }
  .orbit-layout .bottom > .panel { flex:0 0 84%; scroll-snap-align:center; transition:transform .25s ease-out, opacity .25s; will-change:transform; }
  .orbit-layout .orbit-dots { display:flex; justify-content:center; gap:7px; margin:2px 0 8px; }
  .orbit-layout .orbit-dots i { width:7px; height:7px; border-radius:50%; background:rgba(147,162,194,.3); transition:width .2s, background .2s; }
  .orbit-layout .orbit-dots i.on { width:20px; border-radius:4px; background:#d4a84b; }
}
.orbit-dots, .orbit-rings { display:none; }
.orbit-layout nav.ctl .orbit-rings { display:block; }
@media (prefers-reduced-motion: reduce) {
  .orbit-layout nav.ctl .orbit-rings i, .orbit-layout nav.ctl .orbit-rings b, .orbit-reading #bSetup, .orbit-layout #vip.orbit-arrive { animation:none !important; }
}
html.orbit-calm nav.ctl .orbit-rings i, html.orbit-calm nav.ctl .orbit-rings b, html.orbit-calm #bSetup, html.orbit-calm #vip.orbit-arrive { animation:none !important; }

/* Mobile polish: anchor the selector menus to their pills, prevent clipping,
   and keep status / quota text wrapping at word boundaries. */
@media (max-width: 640px) {
  html.orbit-layout .nav-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    margin: 2px 0 10px;
  }
  html.orbit-layout nav.assetbar {
    display: flex;
    position: relative;
    flex: 0 1 auto;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    vertical-align: top;
    z-index: 5;
  }
  html.orbit-layout nav.assetbar.modebar {
    margin: 0;
  }
  html.orbit-layout nav.assetbar:not(.open) {
    width: max-content;
    overflow: hidden;
  }
  html.orbit-layout nav.assetbar.open {
    flex: 0 1 auto;
    width: max-content;
    max-width: 100%;
    overflow: visible;
    flex-wrap: wrap;
    align-content: flex-start;
    box-shadow: 0 5px 18px rgba(0,0,0,.28);
  }
  html.orbit-layout nav.assetbar a {
    flex: 0 0 auto;
    min-width: 0;
    white-space: nowrap;
  }
  html.orbit-layout #status {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 5px 0 4px;
    padding: 0;
    text-align: left;
    line-height: 1.45;
    overflow-wrap: break-word;
    word-break: normal;
  }
  html.orbit-layout #quota:not(.hide) {
    display: block;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    margin: 5px 0 10px;
    padding: 8px 11px;
    border: 1px solid rgba(212,168,75,.28);
    border-radius: 10px;
    background: rgba(212,168,75,.08);
    color: #e3d2a7;
    font: 600 10px/1.55 var(--mono);
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }
  html.orbit-layout .subnav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 0 8px;
  }
  html.orbit-layout .subnav .hdots {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid rgba(212,168,75,.18);
    border-radius: 8px;
    background: rgba(14,28,64,.5);
    font: 600 10px/1.3 var(--mono);
    letter-spacing: .01em;
    white-space: nowrap;
  }
  html.orbit-layout .subnav .hdots i {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
  }
}