/* al-numtools.css — shared styling for the numerology tool-suite pages.
   Mirrors the (inline) styles of numerology.ejs so every tool page renders identically
   (Saffron-light via al-skin's remapped engine vars). Body uses class="editorial tool-editorial". */

/* ── Editorial (Phase-2) overlay, matching numerology.ejs ── */
body.tool-editorial .num-hero { background: linear-gradient(135deg, rgba(229,180,55,0.12), rgba(20,8,10,0.95)) !important; border-color: var(--hairline-2) !important; border-radius: 22px !important }
body.tool-editorial .num-hero h1, body.tool-editorial h1, body.tool-editorial h2 { font-family: var(--ff-display) !important; font-weight: 500 !important; letter-spacing: -0.01em !important }
body.tool-editorial .shine-bar { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: var(--gold-soft) !important; color: var(--gold-soft) !important; font-style: italic !important }
body.tool-editorial .num-form { background: linear-gradient(180deg, var(--panel), var(--deep)) !important; border-color: var(--hairline) !important; border-radius: 20px !important }
body.tool-editorial .num-input { background: rgba(229,180,55,0.04) !important; border-color: var(--hairline) !important; border-radius: 12px !important }
body.tool-editorial .num-input:focus { border-color: var(--gold-soft) !important; background: rgba(229,180,55,0.07) !important }
body.tool-editorial .num-label { color: var(--gold) !important; letter-spacing: 0.16em !important }
body.tool-editorial .result-card { background: linear-gradient(180deg, var(--panel), var(--deep)) !important; border-color: var(--hairline) !important; border-radius: 18px !important }
body.tool-editorial .num-big { font-family: var(--ff-display) !important; font-style: italic !important; color: var(--gold-soft) !important; font-weight: 500 !important }
body.tool-editorial .num-tag { background: rgba(229,180,55,0.12) !important; border-color: var(--hairline-2) !important; color: var(--gold-soft) !important; letter-spacing: 0.14em !important }
body.tool-editorial .cta-box { background: linear-gradient(135deg, rgba(229,180,55,0.12), rgba(201,162,39,0.06)) !important; border-color: var(--hairline-2) !important; border-radius: 22px !important }
body.tool-editorial .lucky-pill { background: rgba(229,180,55,0.06) !important; border-color: var(--hairline) !important; color: var(--gold-soft) !important; font-family: var(--ff-display); font-style: italic }
body.tool-editorial .faq-q { font-family: var(--ff-display) !important; font-weight: 500 !important; font-size: 18px !important; color: var(--text) !important }
body.tool-editorial .faq-arrow { color: var(--gold-soft) !important }
body.tool-editorial .btn-gold { background: var(--gold) !important; color: var(--void) !important; border-radius: 999px !important }
body.tool-editorial .btn-ghost { border: 1px solid var(--hairline-2) !important; color: var(--gold-soft) !important; border-radius: 999px !important; background: transparent !important }
body.tool-editorial .nt-card { background: linear-gradient(180deg, var(--panel), var(--deep)) !important; border-color: var(--hairline) !important; }
body.tool-editorial .nt-tool { background: rgba(229,180,55,0.04) !important; border-color: var(--hairline) !important; }

/* ── Base (light) ── */
.num-hero{background:linear-gradient(135deg,rgba(201,162,39,.12),rgba(255,251,244,.95));border:1px solid rgba(201,162,39,.3);border-radius:var(--r-xl);padding:48px 40px;text-align:center;margin-bottom:40px;}
.num-form{background:rgba(255,251,244,.6);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:32px;max-width:560px;margin:0 auto;}
.num-input{width:100%;padding:13px 16px;background:rgba(255,241,220,.6);border:1.5px solid var(--hairline);border-radius:var(--r-md);color:var(--text);font-size:15px;font-family:var(--ff-body);box-sizing:border-box;transition:border-color .2s;}
.num-input:focus{outline:none;border-color:rgba(229,180,55,.6);}
.num-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:6px;}
.result-card{background:rgba(255,251,244,.7);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:28px;margin-bottom:20px;}
.num-big{font-family:var(--ff-display);font-size:64px;line-height:1;color:var(--gold);text-align:center;margin:8px 0;}
.num-tag{display:inline-block;padding:3px 10px;background:rgba(229,180,55,.15);border:1px solid rgba(229,180,55,.35);border-radius:var(--r-pill);color:var(--gold);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;}
.cta-box{background:linear-gradient(135deg,rgba(229,180,55,.1),rgba(201,162,39,.08));border:1.5px solid rgba(229,180,55,.4);border-radius:var(--r-xl);padding:40px 36px;text-align:center;margin:40px 0;}
.perk-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 24px;text-align:left;max-width:440px;margin-left:auto;margin-right:auto;}
.perk-item{font-size:13px;color:var(--text-muted);}
.perk-item::before{content:'✓ ';color:var(--gold);}
.shine-bar{background:linear-gradient(135deg,#FFE49A,#E5B437,#B8860B);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.lucky-pill{display:inline-block;padding:4px 12px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);border-radius:var(--r-pill);color:var(--gold);font-size:12px;margin:3px;}
.faq-item{border-bottom:1px solid var(--hairline);padding:18px 0;}
.faq-q{font-weight:600;font-size:15px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.faq-a{font-size:14px;color:var(--text-muted);line-height:1.7;padding-top:10px;display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-arrow{transform:rotate(180deg);}
.faq-arrow{transition:transform .2s;color:var(--gold);}

/* ── Tool-page extras ── */
.nt-form-row{display:grid;gap:16px;}
.nt-form-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.nt-results{display:none;margin-top:8px;}
.nt-verdict{display:inline-block;padding:5px 14px;border-radius:var(--r-pill);font-size:13px;font-weight:700;letter-spacing:.02em;}
.nt-good{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:#1FA463;}
.nt-warn{background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.3);color:#C0392B;}
.nt-neutral{background:rgba(229,180,55,.12);border:1px solid rgba(229,180,55,.35);color:var(--gold);}
.nt-kv{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed var(--hairline);font-size:14px;}
.nt-kv:last-child{border-bottom:none;}
.nt-kv b{color:var(--text);}
.nt-loshu{display:inline-grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);border:1px solid var(--hairline);border-radius:8px;overflow:hidden;}
.nt-loshu > div{border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;}
.nt-loshu .on{color:var(--gold);background:rgba(229,180,55,.06);}
.nt-loshu .off{color:var(--text-dim);}
.nt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.nt-tool{display:block;text-decoration:none;padding:18px 20px;background:rgba(255,251,244,.6);border:1px solid var(--hairline);border-radius:var(--r-lg);transition:border-color .2s,transform .15s;}
.nt-tool:hover{border-color:rgba(229,180,55,.6);transform:translateY(-2px);}
.nt-tool .ic{font-size:24px;}
.nt-tool .tt{font-weight:700;color:var(--text);margin:6px 0 3px;font-size:15px;}
.nt-tool .dd{font-size:12.5px;color:var(--text-muted);line-height:1.5;}
@media(max-width:640px){ .num-hero{padding:24px 14px;} .num-form{padding:20px 16px;} .num-big{font-size:48px;} .nt-form-2{grid-template-columns:1fr;} .perk-grid{grid-template-columns:1fr;} }