/* ============================================================================
 *  tools.css — shared styling for all AstroNoir public tools
 *  Loaded same-origin on every /tools page. Uses the site's --font-serif /
 *  --gold (style.css + typography.css) + scoped --an-* tokens for the chat.
 * ========================================================================== */

.nt-wrap{ max-width:680px; margin:0 auto; padding:34px 20px 64px; position:relative; z-index:2; }
.nt-h1{ font-family:var(--font-serif,'Cormorant Garamond',serif); font-weight:600; font-size:2.5rem;
  color:var(--gold,#f4d77a); margin:0 0 .15em; line-height:1.12; text-align:center; }
.nt-lede{ color:rgba(255,255,255,.62); font-size:1.05rem; text-align:center; max-width:56ch;
  margin:0 auto 2em; line-height:1.6; }
.nt-h2{ font-family:var(--font-serif,'Cormorant Garamond',serif); font-weight:600;
  color:rgba(255,255,255,.88); font-size:1.5rem; margin:1.6em 0 .5em; }
.nt-card{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:14px; padding:22px; margin:0 0 18px; }
.nt-row{ margin:0 0 15px; }
.nt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.nt-row label{ display:block; font-size:.72rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.5); margin:0 0 6px; }
.nt-card input, .nt-card textarea, .nt-card select{ box-sizing:border-box; max-width:100%; }
.nt-card input{ width:100%; padding:11px 13px; border-radius:9px; border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.35); color:#e6ecfb; font-size:1rem; font-family:inherit; }
.nt-card input:focus{ outline:none; border-color:var(--gold,#f4d77a); }
.nt-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.nt-btn{ cursor:pointer; background:linear-gradient(180deg,#f4d77a,#d4af37); color:#1a1408;
  border:none; border-radius:10px; padding:13px 22px; font-size:1rem; font-weight:600; width:100%;
  font-family:inherit; }
.nt-btn:disabled{ opacity:.6; cursor:default; }
.nt-download{ cursor:pointer; background:linear-gradient(180deg,#f6db84,#d4af37); color:#1a1205;
  border:none; border-radius:999px; padding:12px 30px; font-family:inherit; font-size:.78rem;
  font-weight:800; letter-spacing:.12em; box-shadow:0 8px 22px rgba(0,0,0,.4);
  transition:transform .16s ease, box-shadow .16s ease; }
.nt-download:hover{ transform:translateY(-2px); box-shadow:0 0 28px rgba(212,175,55,.5); }

/* the wheel renderer injects its own download in .nw-actions — pages provide their own, hide the dup */
.nw-actions{ display:none !important; }

/* LAYERS bar (from features/natal-map.ejs) so the renderer's pills style correctly */
.an-subnav{ row-gap:6px; }
.nw-layers{ flex-wrap:wrap; }
.an-subnav--natal{ display:flex; align-items:center; gap:6px; padding:8px 0; flex-wrap:wrap; justify-content:center; }
.an-subpill-label--natal{ font-size:.62rem; font-weight:800; letter-spacing:1.6px; text-transform:uppercase;
  color:rgba(0,188,212,.45); padding-right:10px; margin-right:4px; border-right:1px solid rgba(0,188,212,.15); }
.an-subtab--natal{ background:none; border:none; color:rgba(255,255,255,.4); font-size:.72rem; font-weight:600;
  letter-spacing:1.4px; text-transform:uppercase; cursor:pointer; padding:8px 12px; position:relative; transition:color .2s ease; }
.an-subtab--natal:hover{ color:rgba(255,255,255,.65); }
.an-subtab--natal.is-active{ color:#b2ebf2; }
.an-subtab--natal.is-active::after{ content:''; position:absolute; bottom:0; left:0; width:100%; height:2px;
  background:#00bcd4; box-shadow:0 0 8px rgba(0,188,212,.5); }
.nt-err{ color:#ff8da3; font-size:.92rem; margin:10px 0 0; min-height:1.2em; }
.nt-approx-link{ background:none; border:none; color:rgba(244,215,122,.75); text-decoration:underline;
  font-size:.78rem; cursor:pointer; padding:6px 2px; font-family:inherit; margin-top:8px; display:inline-block; }
.nt-approx-hint{ margin:6px 2px 0; font-size:.7rem; color:rgba(255,255,255,.55); line-height:1.35; display:none; }
.nt-approx-hint.show{ display:block; }
.hidden{ display:none !important; }
.chip-row{ display:flex; gap:10px; }
.nt-result{ display:none; }
#wheel{ width:100%; max-width:540px; margin:0 auto; display:block; }
.nt-data{ display:grid; grid-template-columns:1fr 1fr; gap:6px 24px; margin:10px 0 0; }
.nt-data .ln{ display:flex; justify-content:space-between; gap:10px;
  border-bottom:1px dotted rgba(255,255,255,.08); padding:5px 0; font-size:.93rem; }
.nt-data .ln b{ color:#e6ecfb; font-weight:500; }
.nt-data .ln span{ color:rgba(255,255,255,.55); text-align:right; }
.nt-data .sub{ grid-column:1/-1; font-size:.72rem; color:var(--gold,#f4d77a); letter-spacing:.06em;
  text-transform:uppercase; margin:16px 0 2px; opacity:.85; }
.nt-prose p{ color:rgba(255,255,255,.6); font-weight:300; line-height:1.7; font-size:.96rem; }
.nt-prose strong{ color:rgba(255,255,255,.82); font-weight:500; }
.nt-prose a, .nt-prose a:visited{ color:var(--gold,#f4d77a); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; transition:color .15s; }
.nt-prose a:hover{ color:#ffe9a8; }
.nt-prose ul{ margin:.4em 0 1em; padding-left:1.2em; }
.nt-prose li{ color:rgba(255,255,255,.6); font-weight:300; line-height:1.7; font-size:.96rem; margin:.35em 0; }
.nt-prose li strong{ color:rgba(255,255,255,.82); font-weight:500; }
.nt-prose h3{ color:var(--gold,#f4d77a); font-family:var(--font-serif,'Cormorant Garamond',serif); font-size:1.25rem; margin:1em 0 .3em; }

/* big hero placement readout (sign tools): glyph + sign */
.nt-hero-result{ text-align:center; padding:10px 0 4px; }
.nt-hero-result .glyph{ font-family:var(--font-serif,serif); font-size:3.4rem; color:var(--gold,#f4d77a); line-height:1; }
.nt-hero-result .big{ font-family:var(--font-serif,'Cormorant Garamond',serif); font-size:2.2rem; color:#e6ecfb; margin:.1em 0 .05em; }
.nt-hero-result .sub{ color:rgba(255,255,255,.55); font-size:.95rem; letter-spacing:.02em; }
.nt-interp{ color:rgba(255,255,255,.74); line-height:1.72; font-size:1rem; margin:14px 0 0; }
.nt-interp p{ margin:0 0 1em; }

/* two-person form + synastry aspects */
.nt-person{ border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:16px 16px 4px; margin:0 0 16px; background:rgba(255,255,255,.02); }
.nt-person-h{ font-family:var(--font-serif,'Cormorant Garamond',serif); color:var(--gold,#f4d77a); font-size:1.15rem; margin:0 0 12px; }
.nt-aspects{ display:flex; flex-direction:column; gap:6px; margin:6px 0 0; }
.nt-aspect{ display:flex; align-items:center; gap:10px; padding:8px 11px; border-radius:9px; border:1px solid rgba(255,255,255,.06); font-size:.92rem; }
.nt-aspect .pair{ flex:1; color:#e6ecfb; }
.nt-aspect .orb{ color:rgba(255,255,255,.45); font-size:.82rem; flex-shrink:0; }
.nt-aspect .k{ font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; padding:2px 7px; border-radius:999px; flex-shrink:0; }
.nt-aspect.flow{ border-color:rgba(122,210,138,.28); } .nt-aspect.flow .k{ color:#7ad28a; background:rgba(122,210,138,.12); }
.nt-aspect.tension{ border-color:rgba(224,96,126,.28); } .nt-aspect.tension .k{ color:#e0607e; background:rgba(224,96,126,.12); }
.nt-aspect.blend{ border-color:rgba(244,215,122,.28); } .nt-aspect.blend .k{ color:#f4d77a; background:rgba(244,215,122,.12); }

/* ===== AiChat (embedded, from features/ai-chat.ejs) ===== */
.nt-aichat{
  --an-gold:#d4af37; --an-bg-deep:#090a0f; --an-bg-glow:#1b2735;
  --an-text-body:rgba(255,255,255,.85); --an-text-soft:rgba(255,255,255,.65);
  --an-text-muted:rgba(255,255,255,.42); --an-font-display:var(--font-display,'Cormorant Garamond',serif);
  padding:0; overflow:hidden; display:flex; flex-direction:column;
}
.nt-aichat .an-chat-messages{ flex:none; min-height:300px; max-height:560px; overflow-y:auto;
  overscroll-behavior:contain; display:flex; flex-direction:column; gap:10px; padding:16px 14px 20px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.08) transparent; }
.nt-aichat .an-chat-messages::-webkit-scrollbar{ width:4px; }
.nt-aichat .an-chat-messages::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.1); border-radius:4px; }
.nt-aichat .an-chat-welcome{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:30px 18px 24px; gap:10px; }
.nt-aichat .an-chat-welcome__icon{ font-size:1.8rem; color:var(--an-gold); opacity:.7; margin-bottom:4px; }
.nt-aichat .an-chat-welcome__title{ color:rgba(255,255,255,.9); font-family:var(--an-font-display); font-size:1.3rem; font-weight:600; }
.nt-aichat .an-chat-welcome__text{ color:rgba(255,255,255,.45); font-size:.88rem; line-height:1.6; max-width:380px; }
.nt-aichat .an-chat-starters{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:20px; max-width:440px; }
.nt-aichat .an-chat-starter{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:rgba(255,255,255,.82);
  font-size:.84rem; font-family:inherit; cursor:pointer; transition:background .18s, border-color .18s, transform .12s; }
.nt-aichat .an-chat-starter:hover{ background:rgba(255,255,255,.09); border-color:rgba(212,175,120,.5); transform:translateY(-1px); }
.nt-aichat .an-chat-starter:disabled{ opacity:.4; cursor:default; transform:none; }
.nt-aichat .an-chat-suggest-label{ margin-top:24px; margin-bottom:10px; font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.3); }
.nt-aichat .an-chat-suggests{ display:flex; flex-direction:column; gap:8px; width:100%; max-width:420px; }
.nt-aichat .an-chat-suggest{ border-radius:12px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.02);
  color:rgba(255,255,255,.6); font-size:.85rem; text-align:left; justify-content:flex-start; padding:11px 14px; line-height:1.35; }
.nt-aichat .an-chat-suggest::before{ content:"›"; margin-right:9px; color:rgba(212,175,120,.7); font-weight:700; }
.nt-aichat .an-chat-suggest:hover{ color:rgba(255,255,255,.92); background:rgba(255,255,255,.06); border-color:rgba(212,175,120,.35); }
.nt-aichat .an-chat-msg{ max-width:min(92%,680px); padding:12px 16px; border-radius:20px; line-height:1.7; font-size:.95rem; word-break:break-word; overflow-wrap:anywhere; white-space:pre-wrap; }
.nt-aichat .an-chat-msg strong{ color:#fff; font-weight:600; }
.nt-aichat .an-chat-msg--ai{ align-self:flex-start; background:transparent; border:none; color:rgba(255,255,255,.88); padding-left:4px; border-radius:0; }
.nt-aichat .an-chat-msg--user{ align-self:flex-end; background:rgba(255,255,255,.06); border:none; color:rgba(255,255,255,.95); border-radius:20px; border-bottom-right-radius:6px; }
.nt-aichat .an-chat-thinking{ color:rgba(255,255,255,.4)!important; font-style:italic; }
.nt-aichat .an-chat-msg.an-chat-typing::after,
.nt-aichat .an-chat-followup.an-chat-typing::after{ content:'▋'; color:var(--an-gold); margin-left:1px; animation:nt-blink 1s steps(2) infinite; }
@keyframes nt-blink{ 50%{ opacity:0; } }
/* the AI's trailing follow-up question, set apart from the answer for easy reading */
.nt-aichat .an-chat-followup{ align-self:flex-start; max-width:min(92%,680px); margin:4px 0 6px; padding:11px 15px;
  border-left:2px solid var(--an-gold); border-radius:0 12px 12px 0; background:rgba(244,215,122,.07);
  color:#f6e9c4; font-size:.97rem; line-height:1.55; white-space:pre-wrap; }
.nt-aichat .an-chat-quickreplies{ display:flex; gap:8px; flex-wrap:wrap; align-self:flex-start; margin:4px 0 8px; padding-left:4px; }
.nt-aichat .an-qr-chip{ padding:9px 18px; border-radius:18px; background:rgba(255,255,255,.05); border:1px solid rgba(212,175,120,.30);
  color:rgba(255,255,255,.9); font-size:.9rem; font-weight:500; cursor:pointer; font-family:inherit; transition:background .15s, border-color .15s, transform .1s; }
.nt-aichat .an-qr-chip:hover{ background:rgba(212,175,120,.18); border-color:rgba(212,175,120,.55); }
.nt-aichat .an-qr-chip:active{ transform:translateY(1px); }
.nt-aichat .an-qr-other{ color:rgba(255,255,255,.7); border-style:dashed; }
.nt-aichat .an-qr-sugg{ background:rgba(255,255,255,.04); }
.nt-aichat .an-chat-input-area{ flex-shrink:0; padding:10px 14px 14px; background:linear-gradient(to bottom,rgba(15,17,26,0),rgba(15,17,26,.6)); }
.nt-aichat .an-chat-quota{ margin:0 auto 9px; padding:0 2px; display:flex; align-items:center; gap:9px; font-size:.8rem; letter-spacing:.4px; color:var(--an-text-muted); }
.nt-aichat .an-chat-quota__dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; background:currentColor; }
.nt-aichat .an-chat-quota__text{ flex:1 1 auto; min-width:0; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nt-aichat .an-chat-quota__text strong{ font-weight:600; color:var(--an-text-body); }
.nt-aichat .an-chat-quota__cta{ flex-shrink:0; text-decoration:none; font-size:.66rem; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--an-text-soft); border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:1px; transition:color .25s, border-color .25s, background .25s; }
.nt-aichat .an-chat-quota__cta:hover{ color:#fff; border-color:rgba(255,255,255,.55); }
.nt-aichat .an-chat-quota.is-calm .an-chat-quota__dot{ background:var(--an-gold); opacity:.45; }
.nt-aichat .an-chat-quota.is-out{ color:#e56a4f; }
.nt-aichat .an-chat-quota.is-out .an-chat-quota__cta{ color:#1a1206; background:linear-gradient(180deg,#f4c272,var(--an-gold));
  border:none; padding:5px 14px; border-radius:2px; font-weight:700; box-shadow:0 0 16px rgba(212,175,55,.28); }
.nt-aichat .an-chat-quota.is-out .an-chat-quota__cta:hover{ color:#000; filter:brightness(1.08); }
.nt-aichat .an-chat-input-row{ display:flex; align-items:stretch; gap:12px; padding:14px;
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05); margin:0 auto; transition:border-color .3s, box-shadow .3s; }
.nt-aichat .an-chat-input-row:focus-within{ border-color:var(--an-gold); box-shadow:0 0 15px rgba(212,175,55,.2); }
.nt-aichat .an-chat-input{ flex:1; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.1); color:#fff;
  font-size:.9rem; line-height:1.5; padding:14px 18px; outline:none; resize:none; font-family:var(--font-body,inherit);
  letter-spacing:1px; max-height:140px; min-height:52px; box-sizing:border-box; transition:.3s; }
.nt-aichat .an-chat-input:focus{ border-color:var(--an-gold); box-shadow:0 0 15px rgba(212,175,55,.2); }
.nt-aichat .an-chat-input::placeholder{ color:rgba(255,255,255,.28); letter-spacing:1px; text-transform:uppercase; font-size:.8rem; }
.nt-aichat .an-chat-input:disabled{ opacity:.55; }
.nt-aichat .an-chat-send{ background:transparent; border:1px solid var(--an-gold); color:var(--an-gold); width:55px; min-height:52px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:background .3s, color .3s, opacity .15s; }
.nt-aichat .an-chat-send:disabled{ opacity:.4; cursor:default; }
.nt-aichat .an-chat-send:not(:disabled):hover{ background:var(--an-gold); color:#000; }
.nt-aichat.is-locked .an-chat-input,
.nt-aichat.is-locked .an-chat-send,
.nt-aichat.is-locked .an-chat-starter{ opacity:.45; }
.nt-aichat.is-locked .an-chat-input{ cursor:pointer; }
.nt-chat-hint{ display:none; margin:0 auto 9px; padding:8px 12px; border-radius:8px; text-align:center;
  font-size:.82rem; color:#f6e9c4; background:rgba(244,215,122,.1); border:1px solid rgba(244,215,122,.28); }
.nt-chat-hint.show{ display:block; }

/* FAQ — mirrors /pricing */
.pp-faq{ width:100%; max-width:680px; margin:56px auto 0; }
.pp-faq-title{ font-family:var(--font-serif,'Cormorant Garamond',serif); font-size:1.6rem;
  text-align:center; margin-bottom:24px; color:rgba(255,255,255,.85); }
.faq-item{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:12px; margin-bottom:10px; overflow:hidden; }
.faq-q{ padding:17px 20px; cursor:pointer; font-weight:600; color:rgba(255,255,255,.88);
  display:flex; justify-content:space-between; align-items:center; font-size:.92rem; user-select:none; }
.faq-q::after{ content:"+"; color:var(--gold,#f4d77a); font-size:1.3rem; font-weight:300;
  transition:transform .22s; flex-shrink:0; margin-left:12px; }
.faq-item.open .faq-q::after{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .28s ease, padding .28s ease;
  padding:0 20px; color:rgba(255,255,255,.58); font-size:.9rem; line-height:1.65; font-weight:300; }
.faq-item.open .faq-a{ max-height:280px; padding:0 20px 16px; }

@media(max-width:560px){ .nt-grid{ grid-template-columns:1fr; } .nt-data{ grid-template-columns:1fr; } .nt-h1{ font-size:2.05rem; } }