/* Moloko — the Astrology tab, web version: a one-to-one port of the app's screen
   (moloko-native/app/(tabs)/astro.js). Colours are the app's own tokens from
   moloko-native/src/theme.js for both themes, the font is the system one the app uses, and
   every size is the app's point value as a CSS pixel. All selectors live under #astro. */

#astro{
  --a-bg:#17110b;--a-bg1:#1d150d;--a-bg2:#110c07;--a-panel:#1a130c;--a-panel2:#241c12;
  --a-line:rgba(255,250,240,.14);--a-text:#fffdf7;--a-soft:rgba(255,250,240,.62);--a-mute:rgba(255,250,240,.4);
  --a-accent:#c8925a;--a-accentB:#eaa964;--a-on:#241708;
  --a-glass:rgba(255,250,240,.055);--a-glassB:rgba(255,250,240,.16);--a-chip:rgba(200,146,90,.16);
  --a-scrim:rgba(15,10,6,.9);--a-glow:232,167,101;--a-coral:224,100,90;--a-glowA:.45;
  background:linear-gradient(180deg,var(--a-bg1) 0%,var(--a-bg) 50%,var(--a-bg2) 100%);color:var(--a-text);
}
html[data-theme="milk"] #astro{
  --a-bg:#F7F1E6;--a-bg1:#FFFBF3;--a-bg2:#EFE4D2;--a-panel:#FFFDF8;--a-panel2:#F2E8D8;
  --a-line:rgba(44,35,24,.13);--a-text:#2C2318;--a-soft:rgba(44,35,24,.66);--a-mute:rgba(44,35,24,.56);
  --a-accent:#8A5220;--a-accentB:#9C6024;--a-on:#fffdf7;
  --a-glass:rgba(44,35,24,.045);--a-glassB:rgba(44,35,24,.19);--a-chip:rgba(143,86,32,.11);
  --a-scrim:rgba(60,45,30,.55);--a-glow:201,138,70;--a-coral:210,86,76;--a-glowA:.3;
}

#astro .ma-root{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;text-align:left;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--a-text);-webkit-font-smoothing:antialiased;--ma-kb:0px;}
#astro [hidden]{display:none !important;}
#astro .ma-ic{display:block;flex:none;}
#astro button{font:inherit;color:inherit;cursor:pointer;}
#astro .ma-view{position:relative;z-index:1;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
#astro .ma-col{width:100%;max-width:640px;margin:0 auto;padding-left:18px;padding-right:18px;}
#astro .ma-center{align-items:center;justify-content:center;padding:24px;text-align:center;}

/* the app's ambient glow: two soft drifting blobs (src/ui.js GlowBackground) */
#astro .ma-glow{position:absolute;z-index:0;width:340px;height:340px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle closest-side,rgba(var(--g),.178) 0 38.2%,rgba(var(--g),.107) 38.2% 67.6%,rgba(var(--g),.05) 67.6% 100%,transparent 100%);}
#astro .ma-glow1{--g:var(--a-glow);top:-90px;left:-70px;animation:ma-drift1 9s ease-in-out infinite alternate;}
#astro .ma-glow2{--g:var(--a-coral);bottom:-70px;right:-80px;animation:ma-drift2 9s ease-in-out infinite alternate;}
@keyframes ma-drift1{from{transform:translate(-30px,-20px) scale(1);}to{transform:translate(4px,14px) scale(1.14);}}
@keyframes ma-drift2{from{transform:translate(30px,24px) scale(1.12);}to{transform:translate(0,-6px) scale(1);}}

/* spinner (the app's ActivityIndicator) and the "went wrong" state */
#astro .ma-spin{display:inline-block;width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(var(--a-glow),.22);
  border-top-color:var(--a-accent);animation:ma-rot .8s linear infinite;}
#astro .ma-spin-sm{width:18px;height:18px;border-width:2px;}
#astro .ma-spin-btn{border-color:rgba(0,0,0,.14);border-top-color:var(--a-on);}
@keyframes ma-rot{to{transform:rotate(360deg);}}
#astro .ma-empty-ic{color:var(--a-accentB);margin-bottom:14px;}
#astro .ma-empty-t{margin:0;font-size:18px;font-weight:800;}
#astro .ma-empty-s{margin:8px 0 20px;max-width:300px;color:var(--a-soft);font-size:14px;line-height:20px;}

/* type — F.h1 / F.title / F.soft / F.mute */
#astro .ma-h1{margin:14px 0 0;font-size:30px;font-weight:800;letter-spacing:-.5px;line-height:1.2;color:var(--a-text);}
#astro .ma-soft{margin:0;font-size:14px;line-height:20px;color:var(--a-soft);}
#astro .ma-lede{margin:8px 0 22px;}
#astro .ma-label{display:block;margin:10px 0 6px 2px;color:var(--a-mute);font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;}
#astro .ma-hint{margin:-8px 0 8px 4px;color:var(--a-mute);font-size:12.5px;line-height:1.4;}
#astro .ma-hint-pick{margin:-8px 0 14px 4px;}

/* the primary button — gradient caramel pill with the warm glow (src/ui.js Btn) */
#astro .ma-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:0;padding:17px 30px;border-radius:100px;
  background:linear-gradient(135deg,var(--a-accentB),var(--a-accent));color:var(--a-on);font-size:17px;font-weight:800;line-height:22px;
  box-shadow:0 8px 40px rgba(var(--a-glow),var(--a-glowA));}
#astro .ma-btn:disabled{cursor:default;}
#astro .ma-btn-sm{width:auto;padding:12px 24px;font-size:15px;}
#astro .ma-cancel,#astro .ma-edit{padding:6px 0;color:var(--a-mute);font-size:12.5px;font-weight:700;}
#astro .ma-cancel{font-size:13px;}
#astro .ma-iconbtn{flex:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin:-4px;border-radius:50%;color:var(--a-text);}
#astro .ma-iconbtn-sm{width:26px;height:26px;margin:-5px;color:var(--a-mute);}
#astro .ma-spinning .ma-ic{animation:ma-rot .7s linear infinite;}

/* the birth-data form */
#astro .ma-formview{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
#astro .ma-form{width:100%;max-width:520px;margin:0 auto;padding:calc(24px + var(--safe-t,0px)) 24px calc(120px + var(--ma-kb));}
#astro .ma-formtop{display:flex;justify-content:flex-end;margin:-8px 0 4px;}
#astro .ma-hero-ic{display:block;color:var(--a-accentB);}
/* inputStyle: centred 17/600, glass fill, 1.5px glass border, radius 20 */
#astro .ma-input{display:block;width:100%;min-height:57px;margin:0 0 14px;padding:16px 15px;text-align:center;font-size:17px;font-weight:600;line-height:22px;
  color:var(--a-text);background:var(--a-glass);border:1.5px solid var(--a-glassB);border-radius:20px;outline:none;
  -webkit-appearance:none;appearance:none;transition:border-color .18s;}
#astro input.ma-input::placeholder{color:var(--a-mute);opacity:1;}
#astro input.ma-input:focus{border-color:var(--a-accent);}
#astro .ma-field{position:relative;display:flex;align-items:center;justify-content:center;}
#astro .ma-field-tx{font-size:17px;font-weight:700;color:var(--a-text);}
#astro .ma-field.ma-empty .ma-field-tx{font-weight:600;color:var(--a-mute);}
#astro .ma-field-ic{position:absolute;right:15px;top:0;bottom:0;display:flex;align-items:center;color:var(--a-accentB);}
#astro .ma-inwrap{position:relative;margin-bottom:14px;}
#astro .ma-inwrap .ma-input{margin-bottom:0;padding-left:40px;padding-right:40px;}
#astro .ma-inspin{position:absolute;right:15px;top:0;bottom:0;display:flex;align-items:center;}
#astro .ma-opts{margin:-8px 0 14px;overflow:hidden;background:var(--a-panel2);border:1px solid var(--a-line);border-radius:20px;animation:ma-fade .18s ease-out;}
#astro .ma-opt{display:flex;align-items:center;gap:10px;width:100%;padding:13px;text-align:left;border-bottom:1px solid var(--a-line);
  color:var(--a-text);font-size:15px;font-weight:700;}
#astro .ma-opt:last-child{border-bottom:none;}
#astro .ma-opt .ma-ic{color:var(--a-accentB);}
#astro .ma-opt span{flex:1;min-width:0;overflow-wrap:anywhere;}
#astro .ma-opt.ma-on{background:var(--a-chip);}
@keyframes ma-fade{from{opacity:0;}to{opacity:1;}}

/* chat: header, chart card, thread, composer */
#astro .ma-head{flex:none;padding:calc(12px + var(--safe-t,0px)) 0 10px;}
#astro .ma-headin{display:flex;align-items:center;gap:10px;}
#astro .ma-head-star{display:flex;color:var(--a-accentB);}
#astro .ma-title{flex:1;min-width:0;margin:0;font-size:18px;font-weight:800;color:var(--a-text);}
#astro .ma-cardwrap{flex:none;padding-bottom:10px;}
#astro .ma-root.ma-kb .ma-cardwrap{display:none;}
#astro .ma-chartcard{display:flex;align-items:center;gap:12px;width:100%;padding:14px;text-align:left;
  background:var(--a-panel);border:1px solid var(--a-line);border-radius:20px;}
#astro .ma-cc-ic{display:flex;color:var(--a-accentB);}
#astro .ma-cc-tx{flex:1;min-width:0;display:flex;flex-direction:column;}
#astro .ma-cc-t{color:var(--a-text);font-size:15px;font-weight:700;}
#astro .ma-cc-s{margin-top:2px;color:var(--a-mute);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#astro .ma-cc-go{display:flex;color:var(--a-mute);}
#astro .ma-thread{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
#astro .ma-thread>.ma-col{padding-top:18px;padding-bottom:40px;}
#astro .ma-intro{margin:8px 0 14px;}
#astro .ma-msg{display:flex;flex-direction:column;margin-bottom:20px;}
#astro .ma-q{align-self:flex-end;max-width:88%;padding:11px 15px;border-radius:18px 18px 6px 18px;background:var(--a-accent);color:var(--a-on);
  font-size:15px;font-weight:600;line-height:20px;white-space:pre-wrap;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text;}
/* the answer is plain text on the background — no bubble — exactly as in the app */
#astro .ma-a{margin-top:12px;padding-left:2px;color:var(--a-text);font-size:15px;line-height:24px;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text;}
#astro .ma-a p{margin:0 0 12px;}
#astro .ma-a p:last-child{margin-bottom:0;}
#astro .ma-a strong{font-weight:700;}
#astro .ma-pending{display:flex;}
#astro .ma-sugg{animation:ma-rise .32s ease-out;}
#astro .ma-sugg.ma-after{margin-top:6px;}
#astro .ma-sugg-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
#astro .ma-sugg-h span{flex:1;color:var(--a-mute);font-size:11px;font-weight:800;letter-spacing:1.2px;}
#astro .ma-sq{display:block;width:100%;margin:0 0 8px;padding:13px 15px;text-align:left;border-radius:20px;
  background:var(--a-panel);border:1px solid var(--a-line);color:var(--a-text);font-size:14.5px;font-weight:600;line-height:1.35;}
@keyframes ma-rise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
#astro .ma-composer{position:relative;z-index:1;flex:none;padding:8px 0 calc(12px + var(--ma-kb));border-top:1px solid var(--a-line);background:var(--a-bg);}
#astro .ma-comp-in{display:flex;align-items:flex-end;gap:8px;padding-left:16px;padding-right:16px;}
/* 16px so iOS Safari does not zoom the page when the field takes focus (the app uses 15) */
#astro .ma-ta{flex:1;min-width:0;height:44px;min-height:44px;max-height:110px;margin:0;padding:11px 16px;resize:none;overflow-y:auto;
  font:inherit;font-size:16px;line-height:20px;color:var(--a-text);background:var(--a-glass);border:1px solid var(--a-glassB);
  border-radius:22px;outline:none;}
#astro .ma-ta::placeholder{color:var(--a-mute);opacity:1;}
#astro .ma-send{flex:none;width:44px;height:44px;border-radius:22px;display:flex;align-items:center;justify-content:center;
  background:var(--a-accent);color:var(--a-on);transition:opacity .15s;}
#astro .ma-send:disabled{opacity:.45;cursor:default;}

/* overlays. They live inside the panel, so they sit above the page's bottom nav, not under it. */
#astro .ma-ov{position:absolute;inset:0;z-index:5;visibility:hidden;pointer-events:none;transition:visibility 0s linear .3s;}
#astro .ma-ov.ma-open{visibility:visible;pointer-events:auto;transition-delay:0s;}
#astro .ma-scrim{position:absolute;inset:0;background:var(--a-scrim);opacity:0;transition:opacity .26s ease;}
#astro .ma-open>.ma-scrim{opacity:1;}
/* history: the app fades a left panel in — it does not slide */
#astro .ma-drawer{position:absolute;top:0;bottom:0;left:0;width:82%;max-width:380px;display:flex;flex-direction:column;outline:none;
  background:var(--a-panel);border-right:1px solid var(--a-line);opacity:0;transition:opacity .26s ease;}
#astro .ma-open>.ma-drawer{opacity:1;}
#astro .ma-dr-head{display:flex;align-items:center;gap:9px;padding:calc(18px + var(--safe-t,0px)) 18px 18px;}
#astro .ma-dr-head>.ma-ic{color:var(--a-accentB);}
#astro .ma-dr-head h3{flex:1;min-width:0;margin:0;font-size:18px;font-weight:800;color:var(--a-text);}
#astro .ma-dr-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:30px;}
#astro .ma-hist{display:block;width:100%;padding:13px 18px;text-align:left;border-bottom:1px solid var(--a-line);}
#astro .ma-hist-q{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  color:var(--a-text);font-size:14.5px;font-weight:600;line-height:1.35;}
#astro .ma-hist-d{display:block;margin-top:3px;color:var(--a-mute);font-size:11.5px;}
#astro .ma-hist-empty{margin:0;padding:0 18px;color:var(--a-mute);font-size:12.5px;}
/* bottom sheets: the chart and the wheels */
#astro .ma-sheet{position:absolute;left:0;right:0;bottom:0;max-width:640px;max-height:78%;margin:0 auto;display:flex;flex-direction:column;outline:none;
  background:var(--a-panel);border-top:1px solid var(--a-line);border-radius:26px 26px 0 0;padding-bottom:30px;
  transform:translateY(104%);transition:transform .3s cubic-bezier(.2,.8,.2,1);}
#astro .ma-open>.ma-sheet{transform:none;}
#astro .ma-sheet-top{flex:none;display:flex;flex-direction:column;align-items:center;padding:12px 20px 8px;}
#astro .ma-grab{width:44px;height:4px;border-radius:2px;background:var(--a-line);}
#astro .ma-sheet-t{margin:14px 0 0;text-align:center;font-size:22px;font-weight:800;letter-spacing:-.3px;color:var(--a-text);}
#astro .ma-sheet-s{margin:4px 0 0;text-align:center;}
#astro .ma-sheet-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 22px 20px;}
#astro .ma-sheet-note{display:flex;flex-direction:column;align-items:center;gap:14px;padding:14px 0;text-align:center;}
#astro .ma-dasha{margin-bottom:14px;padding:14px;border-radius:20px;background:var(--a-chip);}
#astro .ma-dasha b{display:block;color:var(--a-accentB);font-size:11.5px;font-weight:800;letter-spacing:1.2px;}
#astro .ma-dasha span{display:block;margin-top:4px;color:var(--a-text);font-size:15px;line-height:22px;}
#astro .ma-pl{display:flex;align-items:center;padding:11px 0;border-bottom:.5px solid var(--a-line);}
#astro .ma-pl:last-child{border-bottom:none;}
#astro .ma-pl-n{flex:none;width:116px;color:var(--a-text);font-size:15px;font-weight:700;}
#astro .ma-pl-s{flex:1;min-width:0;color:var(--a-soft);font-size:14px;line-height:20px;}
#astro .ma-pl-k{flex:none;margin-left:8px;color:var(--a-mute);font-size:11.5px;text-align:right;}
/* date / time wheels — scroll-snap does the physics the app's wheel does by hand */
#astro .ma-wsheet{max-width:440px;padding-bottom:34px;}
#astro .ma-wtop{padding-bottom:6px;}
#astro .ma-wtitle{margin:14px 0 0;font-size:18px;font-weight:800;color:var(--a-text);}
#astro .ma-wheels{position:relative;display:flex;justify-content:center;align-items:center;padding:6px 0;}
#astro .ma-band{position:absolute;left:24px;right:24px;top:0;bottom:0;height:46px;margin:auto 0;border-radius:12px;background:var(--a-chip);pointer-events:none;}
#astro .ma-wheel{position:relative;height:230px;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain;outline:none;}
#astro .ma-wheel::-webkit-scrollbar{display:none;}
#astro .ma-wpad{height:92px;}
#astro .ma-wrow{height:46px;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;cursor:pointer;white-space:nowrap;
  color:var(--a-mute);font-size:18px;font-weight:600;}
#astro .ma-wrow.ma-on{color:var(--a-text);font-size:21px;font-weight:800;}
#astro .ma-wsep{padding:0 2px;color:var(--a-text);font-size:22px;font-weight:800;}
#astro .ma-wdone{flex:none;padding:8px 24px 0;}
/* the alert (the app's Alert.alert): title, line, OK */
#astro .ma-ov-dlg{display:flex;align-items:center;justify-content:center;padding:24px;}
#astro .ma-scrim-dlg{background:rgba(0,0,0,.4);}
#astro .ma-dialog{position:relative;width:270px;max-width:100%;overflow:hidden;border-radius:14px;background:var(--a-panel2);text-align:center;outline:none;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);opacity:0;transform:scale(1.08);transition:opacity .2s,transform .2s;}
#astro .ma-open>.ma-dialog{opacity:1;transform:none;}
#astro .ma-dialog h3{margin:19px 16px 0;font-size:17px;font-weight:600;color:var(--a-text);}
#astro .ma-dialog p{margin:4px 16px 19px;font-size:13px;line-height:18px;color:var(--a-text);}
#astro .ma-dlg-ok{display:block;width:100%;padding:11px;border-top:.5px solid var(--a-line);font-size:17px;font-weight:600;color:var(--a-accentB);}

/* focus, press, hover */
#astro button:focus-visible,#astro .ma-wheel:focus-visible{outline:2px solid var(--a-accent);outline-offset:2px;}
#astro .ma-row.pressed{transform:scale(.99) !important;}
@media (hover:hover){
  #astro .ma-sq:hover,#astro .ma-chartcard:hover{border-color:var(--a-accent);}
  #astro .ma-hist:hover,#astro .ma-opt:hover,#astro .ma-dlg-ok:hover{background:var(--a-chip);}
  #astro .ma-edit:hover,#astro .ma-cancel:hover{color:var(--a-text);}
}
@media (min-width:760px){
  #astro .ma-sheet{bottom:20px;max-height:calc(100% - 40px);border:1px solid var(--a-line);border-radius:26px;}
  #astro .ma-sheet .ma-grab{visibility:hidden;}
}
@media (prefers-reduced-motion:reduce){
  #astro .ma-glow,#astro .ma-spinning .ma-ic{animation:none;}
  #astro .ma-drawer,#astro .ma-sheet,#astro .ma-dialog,#astro .ma-scrim{transition:none;}
  #astro .ma-sugg,#astro .ma-opts{animation:none;}
}