/* ============================================================
   ASTRO — application chrome
   Logo · loading · home · auth · app shell · library · editor
   Component-internal chart styles live in chart.css.
   ============================================================ */

/* =========================================================
   SHARED PRIMITIVES
   ========================================================= */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-sans); font-size:14px; font-weight:600; letter-spacing:.2px;
  padding:12px 22px; border-radius:var(--r-pill); border:1px solid transparent; cursor:pointer;
  transition:transform .18s var(--spring), box-shadow .2s, background .2s, border-color .2s, color .2s;
  -webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(1px)}
.btn-primary{color:#1a1030; background:linear-gradient(180deg,var(--accent),var(--accent-deep));
  box-shadow:0 10px 30px -12px color-mix(in oklch,var(--accent) 70%,transparent)}
.btn-primary:hover{box-shadow:0 14px 38px -12px color-mix(in oklch,var(--accent) 85%,transparent); transform:translateY(-1px)}
.btn-ghost{color:var(--ink-dim); background:var(--card); border-color:var(--card-bd)}
.btn-ghost:hover{color:var(--ink); border-color:var(--accent)}
.btn-quiet{color:var(--ink-faint); background:transparent; border-color:transparent; padding:10px 14px}
.btn-quiet:hover{color:var(--ink)}
.btn-danger{color:var(--dig-fall); background:transparent; border-color:color-mix(in oklch,var(--dig-fall) 40%,transparent)}
.btn-danger:hover{background:color-mix(in oklch,var(--dig-fall) 12%,transparent); color:#fff}
.btn[disabled]{opacity:.5; pointer-events:none}
.btn-block{width:100%}

.field{display:flex; flex-direction:column; gap:7px}
.field-label{font-size:11px; letter-spacing:1.1px; text-transform:uppercase; color:var(--ink-faint); font-weight:600}
/* font-size:16px keeps iOS Safari from auto-zooming the page on focus */
.input,.textarea{font-family:var(--font-sans); font-size:16px; color:var(--ink);
  background:rgba(10,7,20,.5); border:1px solid var(--card-bd); border-radius:var(--r-sm);
  padding:12px 14px; transition:.18s; width:100%}
.input::placeholder,.textarea::placeholder{color:var(--ink-ghost)}
.input:focus,.textarea:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in oklch,var(--accent) 18%,transparent); background:rgba(14,10,28,.7)}
.textarea{resize:vertical; min-height:90px; line-height:1.5}
.field-hint{font-size:11.5px; color:var(--ink-ghost)}

.switch{display:inline-flex; align-items:center; gap:11px; cursor:pointer; user-select:none; font-size:13px; color:var(--ink-dim);
  background:none; border:0; padding:0; margin:0; appearance:none; -webkit-appearance:none; font-family:var(--font-sans); text-align:left}
.switch:hover{color:var(--ink)}
.switch-track{width:40px; height:23px; border-radius:999px; background:var(--card-2); border:1px solid var(--card-bd); position:relative; transition:.2s; flex:0 0 auto}
.switch-knob{position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:var(--ink-faint); transition:.2s var(--spring)}
.switch.on .switch-track{background:linear-gradient(180deg,var(--accent),var(--accent-deep)); border-color:transparent}
.switch.on .switch-knob{left:20px; background:#1a1030}

.card-surface{background:var(--card); border:1px solid var(--card-bd); border-radius:var(--r-lg); box-shadow:var(--shadow-card)}

/* =========================================================
   LOGO — Gemini-skull emblem + animated "Tomson astrology" lockup
   ========================================================= */
.logo{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.46em;
  font-family:var(--font-serif); font-weight:600; color:var(--ink); line-height:.9;
  --logo-size:48px; font-size:var(--logo-size); letter-spacing:.03em; cursor:default}

/* — the Gemini glyph + fused-twin skulls, an inked talisman on transparency — */
.logo-mark{position:relative; flex:0 0 auto; width:1.16em; height:2.05em;
  display:inline-grid; place-items:center; transform-origin:50% 58%;
  animation:logoFloat 7s var(--ease) infinite}
/* soft lilac aura breathing behind the emblem (no hard tile) */
.logo-mark::before{content:""; position:absolute; left:50%; top:52%; width:150%; height:84%;
  transform:translate(-50%,-50%); border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side,
    color-mix(in oklch,var(--accent) 34%,transparent),
    color-mix(in oklch,var(--accent) 10%,transparent) 58%, transparent 72%);
  filter:blur(.06em); animation:logoAura 7s var(--ease) infinite}
.logo-skull{position:relative; z-index:2; width:100%; height:100%;
  background:url("../assets/logo-mark.png") 50% 50%/contain no-repeat;
  filter:drop-shadow(0 .04em .12em rgba(0,0,0,.5))
         drop-shadow(0 0 .5em color-mix(in oklch,var(--accent) 42%,transparent));
  animation:logoGlow 7s var(--ease) infinite}

.logo-words{display:inline-flex; flex-direction:column; align-items:flex-start; position:relative; z-index:2}
.logo-row{display:inline-flex; align-items:center}
.logo-letters{display:inline-flex; position:relative; z-index:2}
.logo-letter{display:inline-block; transform-origin:50% 75%}
.logo-dotmark{color:var(--accent); margin-left:.1em; font-size:.5em; align-self:center; z-index:2;
  filter:drop-shadow(0 0 10px color-mix(in oklch,var(--accent) 80%,transparent))}
.logo-sub{font-family:var(--font-mono); text-transform:uppercase; font-weight:500;
  font-size:max(8.5px,.205em); letter-spacing:.34em; line-height:1; margin-top:.18em; padding-left:.1em;
  color:color-mix(in oklch,var(--accent) 72%,var(--ink-faint)); white-space:nowrap}

/* cute hover: the emblem leans in for a closer look and its aura swells */
.logo:hover .logo-mark{animation:logoNod 1.3s var(--ease) infinite}
.logo:hover .logo-mark::before{animation-duration:2.6s;
  background:radial-gradient(closest-side,
    color-mix(in oklch,var(--accent) 52%,transparent),
    color-mix(in oklch,var(--accent) 16%,transparent) 58%, transparent 74%)}
.logo:hover .logo-skull{filter:drop-shadow(0 .04em .12em rgba(0,0,0,.5))
         drop-shadow(0 0 .85em color-mix(in oklch,var(--accent) 70%,transparent))}

@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-.05em)}}
@keyframes logoGlow{0%,100%{filter:drop-shadow(0 .04em .12em rgba(0,0,0,.5)) drop-shadow(0 0 .5em color-mix(in oklch,var(--accent) 38%,transparent))}
  50%{filter:drop-shadow(0 .04em .12em rgba(0,0,0,.5)) drop-shadow(0 0 .8em color-mix(in oklch,var(--accent) 62%,transparent))}}
@keyframes logoAura{0%,100%{opacity:.7; transform:translate(-50%,-50%) scale(.96)}50%{opacity:1; transform:translate(-50%,-50%) scale(1.06)}}
@keyframes logoNod{0%,100%{transform:rotate(0) translateY(-.02em)}28%{transform:rotate(-3.5deg) translateY(-.05em)}62%{transform:rotate(2.5deg)}}
@media (prefers-reduced-motion: reduce){
  .logo-mark,.logo-skull,.logo-mark::before{animation:none}
  .logo:hover .logo-mark{animation:none}
}

/* letter draw-in (used on loading + first home paint) */
@media (prefers-reduced-motion: no-preference){
  @keyframes letterRise{from{opacity:0; transform:translateY(.32em) rotate(2deg)} to{opacity:1; transform:none}}
  @keyframes markPop{from{opacity:0; transform:scale(.55) rotate(-14deg)} to{opacity:1; transform:scale(1) rotate(0)}}
  .logo-draw .logo-mark{animation:markPop .9s var(--spring) both}
  .logo-draw .logo-letter{animation:letterRise .7s var(--ease-out) both}
  .logo-draw .logo-dotmark{animation:letterRise .7s var(--ease-out) both; animation-delay:.55s}
  .logo-draw .logo-sub{animation:letterRise .7s var(--ease-out) both; animation-delay:.62s}
  /* constellation variant: letters converge from scattered points */
  @keyframes converge{from{opacity:0; transform:translate(var(--cx,0),var(--cy,0)) scale(1.4); filter:blur(3px)}
    to{opacity:1; transform:none; filter:blur(0)}}
  .logo-constellation .logo-letter{animation:converge .9s var(--ease-out) both}
}

/* =========================================================
   LOADING SPLASH
   ========================================================= */
.loading{position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  background:radial-gradient(120% 100% at 50% 40%, rgba(40,22,72,.5), transparent 60%), var(--bg-0)}
.loading-inner{display:flex; flex-direction:column; align-items:center; gap:34px; position:relative}
.loading .logo{--logo-size:clamp(64px,11vw,104px)}
.loading-bar{width:170px; height:2px; background:var(--line); border-radius:2px; overflow:hidden}
.loading-bar-fill{height:100%; width:100%; transform-origin:left; transform:scaleX(0);
  background:linear-gradient(90deg,var(--accent-deep),var(--accent)); animation:loadBar 2.1s var(--ease) forwards}
@keyframes loadBar{0%{transform:scaleX(0)} 70%{transform:scaleX(.82)} 100%{transform:scaleX(1)}}
.loading-caption{font-family:var(--font-mono); font-size:10.5px; letter-spacing:3.5px; text-transform:uppercase; color:var(--ink-faint)}
.loading.is-leaving{animation:loadOut .6s var(--ease) forwards}
@keyframes loadOut{to{opacity:0; transform:scale(1.02); visibility:hidden}}
/* drifting constellation field behind the constellation loader */
.loading-stars{position:absolute; inset:-40px; pointer-events:none}
.loading-star{position:absolute; width:3px; height:3px; border-radius:50%; background:#fff;
  opacity:0; animation:starFade 2.4s var(--ease) forwards}
@keyframes starFade{0%{opacity:0; transform:scale(.2)} 40%{opacity:.9} 100%{opacity:.18; transform:scale(1)}}

/* =========================================================
   HOME (marketing)
   ========================================================= */
.home{position:relative; height:100%; display:flex; align-items:center; overflow:hidden}
.home-deco{position:absolute; inset:0; pointer-events:none; display:grid; place-items:center; opacity:.5}
.home-ring{position:absolute; border:1px solid var(--line); border-radius:50%}
.home-ring.r1{width:min(120vmin,1100px); height:min(120vmin,1100px); animation:slowSpin 120s linear infinite}
.home-ring.r2{width:min(86vmin,800px); height:min(86vmin,800px); border-color:var(--line-soft); animation:slowSpin 90s linear infinite reverse}
.home-ring.r3{width:min(56vmin,520px); height:min(56vmin,520px); border-style:dashed; border-color:color-mix(in oklch,var(--accent) 14%,transparent); animation:slowSpin 70s linear infinite}
@keyframes slowSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.home-ring{animation:none!important}}

.home .logo{--logo-size:clamp(56px,8vw,96px)}
.home-eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--accent-2)}
.home-headline{font-family:var(--font-serif); font-weight:500; line-height:1.04;
  font-size:clamp(40px,11vw,60px); letter-spacing:.2px; margin:0; text-wrap:balance; color:var(--ink)}
.home-headline em{font-style:italic; color:var(--accent)}
.home-sub{font-family:var(--font-hand); font-weight:500; font-size:clamp(23px,4.6vw,31px);
  line-height:1.32; letter-spacing:.2px; color:color-mix(in oklch,var(--ink) 80%,transparent); margin:0; text-wrap:balance}
.home-sub .home-line{display:block; text-wrap:balance}
.home-sub .home-line + .home-line{margin-top:.42em}
.home-cta{display:flex; gap:14px; flex-wrap:wrap}
.home-foot{position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom) + 24px); text-align:center; z-index:2;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.5px; color:var(--ink-ghost); text-transform:uppercase}

/* — ornamental star rule between the letterhead and the letter — */
.home-rule{display:flex; align-items:center; justify-content:center; gap:16px; width:min(220px,52vw)}
.home-rule::before,.home-rule::after{content:""; height:1px; flex:1;
  background:linear-gradient(90deg,transparent,color-mix(in oklch,var(--accent) 42%,transparent))}
.home-rule::after{transform:scaleX(-1)}
.home-rule span{font-family:var(--font-serif); color:var(--accent); font-size:14px; line-height:1;
  filter:drop-shadow(0 0 9px color-mix(in oklch,var(--accent) 75%,transparent))}

/* =========================================================
   HOME · CENTERED — letterhead / letter / signature, stacked
   ========================================================= */
.home.centered{display:grid; grid-template-rows:auto 1fr auto; align-items:stretch;
  padding:calc(env(safe-area-inset-top) + 7vh) 26px calc(env(safe-area-inset-bottom) + 64px)}
.home.centered .home-head{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:22px}
.home.centered .home-letter-wrap{position:relative; z-index:2; display:grid; align-content:center; justify-items:center; min-height:0}
.home.centered .home-letter{display:grid; gap:26px; justify-items:center; text-align:center; max-width:30rem}
.home.centered .home-headline{max-width:12ch}
.home.centered .home-sub{max-width:21rem}
.home.centered .home-cta{justify-content:center; margin-top:6px}

/* =========================================================
   HOME · SPLIT — two-column marketing arrangement
   ========================================================= */
.home-wrap{position:relative; z-index:2; width:100%; max-width:1180px; margin:0 auto; padding:0 8vw;
  display:grid; gap:40px}
.home.split .home-wrap{grid-template-columns:1.1fr .9fr; align-items:center; gap:6vw}
.home.split .home-headline{max-width:14ch}
.home.split .home-sub{max-width:46ch}
.home-sigil-wrap{display:grid; place-items:center}
.home-sigil-wrap .sigil{width:min(40vmin,420px); height:auto; filter:drop-shadow(0 30px 80px rgba(0,0,0,.5))}
.home-col{display:grid; gap:26px}
.home-col .home-letter{display:grid; gap:24px}

/* =========================================================
   AUTH
   ========================================================= */
.auth{height:100%; display:grid; place-items:center; padding:24px}
.auth-card{width:min(440px,100%); padding:38px 36px 32px; position:relative; z-index:2}
.auth-head{display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; margin-bottom:26px}
.auth-head .logo{--logo-size:52px}
.auth-title{font-family:var(--font-serif); font-size:26px; font-weight:600; margin:0; color:var(--ink)}
.auth-tabs{display:flex; gap:4px; background:var(--card); padding:4px; border-radius:11px; border:1px solid var(--line-soft); margin-bottom:22px}
.auth-tab{flex:1; padding:9px; border:none; background:transparent; color:var(--ink-faint);
  font-family:var(--font-sans); font-size:13px; font-weight:600; border-radius:8px; cursor:pointer; transition:.18s}
.auth-tab.on{background:linear-gradient(180deg,rgba(192,140,255,.22),rgba(125,91,208,.16)); color:#fff}
.auth-form{display:flex; flex-direction:column; gap:16px}
.auth-foot{margin-top:18px; text-align:center; font-size:12px; color:var(--ink-ghost); line-height:1.5}
.auth-error{font-size:12.5px; color:var(--dig-fall); text-align:center}

/* =========================================================
   APP SHELL + NAV
   ========================================================= */
.app-shell{display:flex; flex-direction:column; height:100%; overflow:hidden}
.app-nav{flex:0 0 auto; display:flex; align-items:center; gap:18px;
  padding:calc(14px + env(safe-area-inset-top)) calc(26px + env(safe-area-inset-right)) 14px calc(26px + env(safe-area-inset-left));
  border-bottom:1px solid var(--line); background:linear-gradient(180deg, rgba(14,9,26,.7), rgba(12,8,22,.4)); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); z-index:10}
.app-nav .logo{--logo-size:26px; cursor:pointer}
.app-nav-spacer{flex:1}
.app-nav-link{font-size:13px; color:var(--ink-faint); background:none; border:none; cursor:pointer; font-family:var(--font-sans); letter-spacing:.3px; transition:.16s; padding:8px 4px}
.app-nav-link:hover,.app-nav-link.on{color:var(--ink)}
.app-account{display:flex; align-items:center; gap:10px; position:relative}
.app-account-btn{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--card-bd);
  border-radius:var(--r-pill); padding:5px 6px 5px 14px; cursor:pointer; color:var(--ink-dim); transition:.16s; font-family:var(--font-sans); font-size:13px}
.app-account-btn:hover{border-color:var(--accent); color:var(--ink)}
.avatar{width:30px; height:30px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--accent-deep),var(--accent)); color:#1a1030; font-weight:700; font-size:13px; overflow:hidden}
.avatar img{width:100%; height:100%; object-fit:cover}
.app-menu{position:absolute; top:calc(100% + 10px); right:0; min-width:210px; padding:8px; z-index:30;
  background:var(--bg-1); border:1px solid var(--card-bd); border-radius:var(--r-md); box-shadow:var(--shadow-pop)}
.app-menu-email{padding:8px 12px 10px; font-size:12px; color:var(--ink-faint); border-bottom:1px solid var(--line-soft); margin-bottom:6px; word-break:break-all}
.app-menu-item{display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font-family:var(--font-sans); font-size:13.5px; color:var(--ink-dim); padding:9px 12px; border-radius:8px; transition:.14s}
.app-menu-item:hover{background:var(--card); color:var(--ink)}
.app-main{flex:1 1 auto; min-height:0; overflow:auto; position:relative}

/* =========================================================
   LIBRARY
   ========================================================= */
.library{max-width:1240px; margin:0 auto; padding:34px 28px 60px}
.lib-head{display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:26px}
.lib-title{font-family:var(--font-serif); font-size:34px; font-weight:600; margin:0; line-height:1; color:var(--ink)}
.lib-sub{font-size:13px; color:var(--ink-faint); margin-top:8px}
.lib-tools{margin-left:auto; display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.lib-search{position:relative}
.lib-search .input{width:230px; padding-left:38px}
.lib-search::before{content:"⌕"; position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-faint); font-size:16px}
.lib-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px}

.lib-card{position:relative; text-align:left; cursor:pointer; padding:20px; overflow:hidden;
  background:var(--card); border:1px solid var(--card-bd); border-radius:var(--r-lg);
  transition:transform .22s var(--spring), border-color .2s, box-shadow .25s; display:flex; flex-direction:column; gap:16px}
.lib-card:hover{transform:translateY(-4px); border-color:color-mix(in oklch,var(--accent) 45%,transparent); box-shadow:var(--shadow-card)}
.lib-card-glow{position:absolute; right:-40px; top:-40px; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in oklch,var(--accent) 22%,transparent), transparent 70%); opacity:0; transition:opacity .3s; pointer-events:none}
.lib-card:hover .lib-card-glow{opacity:1}
.lib-card-top{display:flex; align-items:center; gap:13px; position:relative; z-index:2}
.lib-avatar{width:46px; height:46px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--accent-deep),var(--accent)); color:#1a1030; font-weight:700; font-size:17px; font-family:var(--font-serif); overflow:hidden}
.lib-avatar img{width:100%; height:100%; object-fit:cover}
.lib-card-name{font-family:var(--font-serif); font-size:20px; font-weight:600; color:var(--ink); line-height:1.1}
.lib-card-meta{font-size:11.5px; color:var(--ink-faint); margin-top:3px; font-family:var(--font-mono); letter-spacing:.2px}
.lib-card-body{display:flex; align-items:center; gap:16px; position:relative; z-index:2}
.lib-card-sigil{flex:0 0 auto}
.lib-card-sigil .sigil{width:84px; height:84px}
.lib-bigthree{display:flex; flex-direction:column; gap:8px; flex:1; min-width:0}
.bigthree-row{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-dim)}
.bigthree-row .b3-k{font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-ghost); width:42px; flex:0 0 auto}
.bigthree-row .glyph{font-family:var(--font-glyph); font-size:17px; color:var(--ink); width:20px; text-align:center}
.bigthree-row .b3-sign{color:var(--ink); font-weight:500}
.lib-card-foot{display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2;
  border-top:1px solid var(--line-soft); padding-top:12px; font-size:11px; color:var(--ink-ghost); font-family:var(--font-mono); letter-spacing:.3px}
.lib-card-place{color:var(--ink-faint)}

.lib-add{display:grid; place-items:center; min-height:240px; cursor:pointer; gap:14px;
  border:1px dashed var(--card-bd); border-radius:var(--r-lg); background:transparent; color:var(--ink-faint);
  transition:.2s var(--spring)}
.lib-add:hover{border-color:var(--accent); color:var(--ink); transform:translateY(-4px); background:var(--card)}
.lib-add-plus{width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font-size:26px;
  border:1px solid var(--card-bd); color:var(--accent)}
.lib-add-text{font-size:14px; font-weight:600; letter-spacing:.3px}

.lib-empty,.lib-loading{display:grid; place-items:center; padding:80px 20px; gap:18px; text-align:center; color:var(--ink-faint)}
.lib-empty-title{font-family:var(--font-serif); font-size:26px; color:var(--ink)}

/* skeleton shimmer */
.skel{position:relative; overflow:hidden; background:var(--card); border:1px solid var(--card-bd); border-radius:var(--r-lg); min-height:240px}
.skel::after{content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in oklch,var(--accent) 8%,transparent),transparent); animation:shimmer 1.4s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}

/* =========================================================
   CHART VIEW (wrap around <BirthChart>)
   ========================================================= */
.chartview{display:flex; flex-direction:column; height:100%}
.chartview-bar{flex:0 0 auto; display:flex; align-items:center; gap:16px; padding:14px 26px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.chartview-back{display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--card-bd);
  border-radius:var(--r-pill); padding:8px 16px 8px 13px; color:var(--ink-dim); cursor:pointer; font-size:13px; font-family:var(--font-sans); transition:.16s}
.chartview-back:hover{border-color:var(--accent); color:var(--ink)}
.chartview-person{display:flex; align-items:center; gap:13px; min-width:0}
.chartview-person .lib-avatar{width:40px; height:40px; font-size:15px}
.chartview-pname{font-family:var(--font-serif); font-size:21px; font-weight:600; color:var(--ink); line-height:1.05}
.chartview-pmeta{font-size:11.5px; color:var(--ink-faint); font-family:var(--font-mono); margin-top:2px}
.chartview-actions{margin-left:auto; display:flex; gap:10px; align-items:center}
.chartview-body{flex:1 1 auto; min-height:0; position:relative}
@media (max-width:880px){
  .chartview-body{overflow:auto}
}

/* =========================================================
   EDITOR
   ========================================================= */
.editor{max-width:1080px; margin:0 auto; padding:32px 28px 70px}
.editor-head{display:flex; align-items:center; gap:14px; margin-bottom:26px}
.editor-back{font-size:13px; color:var(--ink-faint); background:none; border:none; cursor:pointer; font-family:var(--font-sans)}
.editor-back:hover{color:var(--ink)}
.editor-title{font-family:var(--font-serif); font-size:30px; font-weight:600; margin:0; color:var(--ink)}
.editor-grid{display:grid; grid-template-columns:1.3fr .7fr; gap:34px; align-items:start}
.editor-form{display:flex; flex-direction:column; gap:26px}
.editor-fieldset{display:flex; flex-direction:column; gap:16px}
.editor-legend{font-family:var(--font-serif); font-size:19px; font-weight:600; color:var(--ink);
  padding-bottom:10px; border-bottom:1px solid var(--line-soft)}
.editor-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.editor-row-3{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.editor-person{display:flex; gap:18px; align-items:flex-start}
.editor-avatar{position:relative; width:88px; height:88px; border-radius:50%; flex:0 0 auto; overflow:hidden; cursor:pointer;
  border:1px solid var(--card-bd); display:grid; place-items:center; background:var(--card); transition:.18s;
  color:var(--ink-faint); font-size:11px; text-align:center; gap:4px}
.editor-avatar:hover{border-color:var(--accent); color:var(--ink)}
.editor-avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.editor-avatar-hint{font-family:var(--font-mono); letter-spacing:.5px; line-height:1.3}
.editor-actions{display:flex; gap:12px; align-items:center; margin-top:6px}
.editor-actions .spacer{flex:1}

/* mapbox-style place search */
.place{position:relative}
.place-control{position:relative}
.place-icon{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-faint); font-size:15px; pointer-events:none}
.place-input{padding-left:38px}
.place-menu{position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30; margin:0; padding:6px; list-style:none;
  background:var(--bg-2); border:1px solid var(--card-bd); border-radius:var(--r-md); box-shadow:var(--shadow-pop);
  max-height:268px; overflow:auto}
.place-opt{display:flex; align-items:center; gap:12px; padding:9px 11px; border-radius:var(--r-sm); cursor:pointer}
.place-opt.active{background:var(--card-2)}
.place-pin{color:var(--accent); font-size:13px; flex:0 0 auto; opacity:.85}
.place-text{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1}
.place-name{font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.place-region{font-size:11.5px; color:var(--ink-faint)}
.place-ll{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-ghost); flex:0 0 auto; letter-spacing:.3px}
.place-empty{padding:11px; font-size:12.5px; color:var(--ink-ghost); text-align:center}
.place-coord{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11.5px;
  color:var(--ink-dim); letter-spacing:.3px}
.place-coord-pin{color:var(--accent-2)}

.editor-preview{position:sticky; top:20px; display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:26px; text-align:center}
.editor-preview .sigil{width:min(100%,240px); height:auto}
.editor-preview-name{font-family:var(--font-serif); font-size:21px; font-weight:600; color:var(--ink)}
.editor-preview-line{font-size:12px; color:var(--ink-faint); font-family:var(--font-mono)}
.editor-preview-label{font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-ghost)}

/* =========================================================
   CHART SIGIL (lightweight mini-wheel)
   ========================================================= */
.sigil{display:block}
.sigil-ring{fill:none; stroke:var(--line); stroke-width:1}
.sigil-ring-2{fill:none; stroke:var(--line-soft); stroke-width:1}
.sigil-tick{stroke:var(--ink-ghost); stroke-width:1; opacity:.5}
.sigil-glyph{font-family:var(--font-glyph); fill:var(--ink-faint); opacity:.55; font-size:9px; text-anchor:middle}
.sigil-dot{fill:var(--accent)}
.sigil-dot-lum{fill:#fff}
.sigil-line{stroke:color-mix(in oklch,var(--accent) 40%,transparent); stroke-width:.8}
.sigil-core{fill:color-mix(in oklch,var(--accent) 30%,transparent)}

/* =========================================================
   MODAL (confirm dialogs)
   ========================================================= */
.modal-scrim{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px;
  background:rgba(6,4,14,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
.modal{width:min(420px,100%); padding:28px; text-align:center; animation:popIn .26s var(--spring)}
@keyframes popIn{from{opacity:0; transform:translateY(10px) scale(.97)} to{opacity:1; transform:none}}
.modal-title{font-family:var(--font-serif); font-size:23px; font-weight:600; margin:0 0 10px; color:var(--ink)}
.modal-text{font-size:14px; color:var(--ink-dim); line-height:1.55; margin:0 0 22px}
.modal-actions{display:flex; gap:12px; justify-content:center}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .home.split .home-wrap{grid-template-columns:1fr; text-align:center; justify-items:center}
  .home.split .home-sigil-wrap{order:-1}
  .editor-grid{grid-template-columns:1fr}
  .editor-preview{position:static; order:-1}
}
@media (max-width:560px){
  .app-nav{padding:calc(12px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 12px calc(16px + env(safe-area-inset-left))}
  .library{padding:24px 16px 50px}
  .lib-grid{grid-template-columns:1fr}
  .editor{padding:22px 16px 50px}
  .editor-row,.editor-row-3{grid-template-columns:1fr}
  .lib-tools{width:100%}
  .lib-tools .btn-primary{display:none}
  .lib-search .input{width:100%}
  .lib-add{display:flex; min-height:0; flex-direction:row; align-items:center; justify-content:center; gap:12px; padding:16px}
  .lib-add-plus{width:36px; height:36px; font-size:20px}
  .app-nav-link.hide-sm{display:none}
}