/* ============================================================
   calc.css — shared skin for the single-purpose calculator pages.

   These pages are deliberately plain next to the wheel pages: they are
   landing pages for a search result, so they load fast, read well, and
   put the answer above the explanation. Written as ordinary CSS rather
   than long Tailwind class strings because it is shared by several
   pages and changes in one place.
   ============================================================ */

:root { color-scheme: dark; }
body.light { color-scheme: light; }

body {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(circle at center, #0c152b 0%, #050814 60%, #010206 100%) #050814;
    color: #e2e8f0;
}

.back-link {
    position: fixed; top: 12px; left: 12px; z-index: 50;
    display: inline-flex; align-items: center; height: 36px; padding: 0 14px;
    border-radius: 12px; font-size: 11px; font-weight: 900;
    text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
    color: #67e8f9; background: rgba(2, 6, 23, .8);
    border: 1px solid rgba(6, 182, 212, .4);
}
.back-link:hover { color: #cffafe; border-color: rgba(103, 232, 249, .7); }

.panel {
    background: rgba(2, 6, 23, .72);
    border: 1px solid rgba(6, 182, 212, .28);
    border-radius: 18px;
    box-shadow: 0 0 30px rgba(6, 182, 212, .12);
}

.accent-cyan { color: #67e8f9; }
.muted { color: #94a3b8; }
.link { color: #38bdf8; font-weight: 700; text-decoration: none; }
.link:hover { text-decoration: underline; }

.lbl {
    display: block; font-size: 11px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; color: #7dd3fc; margin-bottom: 6px;
}
.fld {
    width: 100%; box-sizing: border-box;
    background: #0b1220; border: 1px solid #1e3a5f; border-radius: 10px;
    padding: 10px 12px; font-size: 14px; color: #e2e8f0; font-family: inherit;
}
.fld:focus { outline: none; border-color: #38bdf8; }
.fld::placeholder { color: #64748b; }

.btn-primary {
    width: 100%; padding: 13px 16px; border: 0; border-radius: 12px;
    background: #06b6d4; color: #041016;
    font-family: inherit; font-size: 13px; font-weight: 900;
    text-transform: uppercase; letter-spacing: .08em; cursor: pointer;
}
.btn-primary:hover { background: #22d3ee; }
.btn-primary:disabled { opacity: .6; cursor: default; }

.err {
    background: rgba(244, 63, 94, .12); color: #fda4af;
    border: 1px solid rgba(244, 63, 94, .35); border-radius: 10px;
    padding: 9px 12px; font-size: 12.5px; font-weight: 700;
}

.verdict {
    display: inline-block; padding: 8px 16px; border-radius: 999px;
    font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em;
}
.verdict.ok   { background: rgba(16, 185, 129, .15); color: #6ee7b7; border: 1px solid rgba(16,185,129,.4); }
.verdict.warn { background: rgba(245, 158, 11, .15); color: #fcd34d; border: 1px solid rgba(245,158,11,.4); }
.verdict.bad  { background: rgba(244, 63, 94, .15);  color: #fda4af; border: 1px solid rgba(244,63,94,.4); }

.th {
    text-align: left; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; color: #94a3b8; padding: 8px 10px;
    border-bottom: 1px solid rgba(6, 182, 212, .25);
}
.td { padding: 9px 10px; border-bottom: 1px solid rgba(148, 163, 184, .12); }
.ok-text  { color: #6ee7b7; font-weight: 700; }
.bad-text { color: #fda4af; font-weight: 700; }

/* The written content underneath the tool. This is the part search engines
   weigh, so it gets real typographic care rather than being an afterthought. */
.prose-block h2 {
    font-size: 18px; font-weight: 900; color: #e2e8f0;
    margin: 0 0 10px; letter-spacing: -.01em;
}
.prose-block p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.7; color: #cbd5e1; }
.prose-block ul, .prose-block ol { margin: 0 0 12px; padding-left: 20px; }
.prose-block ol { list-style: decimal; }
.prose-block li { font-size: 14.5px; line-height: 1.7; color: #cbd5e1; margin-bottom: 6px; }

/* A short direct-answer paragraph right under a question H2, meant to stand
   alone if an AI engine or featured snippet extracts just this block. */
.answer-box {
    background: rgba(56, 189, 248, .08);
    border: 1px solid rgba(56, 189, 248, .25);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 14px;
    font-size: 14.5px; line-height: 1.7; color: #e2e8f0;
}

/* A reference table inside the prose. Wide tables must scroll in their own box
   or they widen the whole page on a phone, which has bitten this site before. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 12px; }
.table-wrap table { min-width: 520px; }
.prose-block strong { color: #f1f5f9; }
.prose-block section {
    background: rgba(2, 6, 23, .45);
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 16px; padding: 18px 20px;
}

/* ── Light theme ────────────────────────────────────────────────────────
   Shares the astro-theme key with the rest of the site, so a visitor who
   picked light elsewhere keeps it here. */
body.light {
    background: radial-gradient(ellipse at top, #ffffff 0%, #eef2fb 65%, #e2e8f5 100%) #e2e8f5;
    color: #0f172a;
}
body.light .panel { background: rgba(255,255,255,.9); border-color: rgba(8,145,178,.28); box-shadow: 0 8px 30px rgba(15,23,42,.10); }
body.light .accent-cyan { color: #0e7490; }
body.light .muted { color: #475569; }
body.light .link { color: #0891b2; }
body.light .lbl { color: #0e7490; }
body.light .fld { background: #ffffff; border-color: #cbd5e1; color: #0f172a; }
body.light .fld::placeholder { color: #94a3b8; }
body.light .back-link { background: rgba(255,255,255,.9); color: #0891b2; border-color: rgba(8,145,178,.35); }
body.light .prose-block h2 { color: #0f172a; }
body.light .prose-block p, body.light .prose-block li { color: #334155; }
body.light .prose-block strong { color: #0f172a; }
body.light .prose-block section { background: rgba(255,255,255,.75); border-color: rgba(15,23,42,.10); }
body.light .th { color: #475569; }
body.light .verdict.ok   { background: rgba(4,120,87,.12);  color: #047857; }
body.light .verdict.warn { background: rgba(180,83,9,.12);  color: #b45309; }
body.light .verdict.bad  { background: rgba(159,18,57,.12); color: #9f1239; }
body.light .ok-text  { color: #047857; }
body.light .bad-text { color: #9f1239; }

/* ── Signup lure card ───────────────────────────────────────────────────
   The cyan CTA panel read as just another section, so it gets an amber
   border and heading to break the page's own colour rhythm. Same idea as
   the inline card on /ta/sani-peyarchi -- and the same glow-pulse/shine-
   sweep motion, added here once so every page that renders this shared
   card (all 26 yearly-horoscope pages via _yearly_cta, every calculator
   page via calc_common.js's addSignupCard) gets it for free. The button
   animation is scoped to #tendency-cta-link specifically, not the plain
   .btn-primary class those same pages use for their "Calculate" button. */
.cta-panel {
    border-color: rgba(245,158,11,.45); box-shadow: 0 0 25px rgba(245,158,11,.15);
    animation: ctaPanelGlow 2.6s ease-in-out infinite;
}
@keyframes ctaPanelGlow {
    0%, 100% { box-shadow: 0 0 25px rgba(245,158,11,.15); border-color: rgba(245,158,11,.45); }
    50% { box-shadow: 0 0 42px rgba(245,158,11,.4); border-color: rgba(245,158,11,.75); }
}
.cta-title { color: #fcd34d; }
.cta-panel #tendency-cta-link {
    position: relative; overflow: hidden;
    animation: ctaBtnPulse 2.6s ease-in-out infinite;
}
.cta-panel #tendency-cta-link::after {
    content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-20deg);
    animation: ctaBtnShine 3.4s ease-in-out infinite;
}
@keyframes ctaBtnPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes ctaBtnShine { 0% { left: -60%; } 55% { left: 130%; } 100% { left: 130%; } }
body.light .cta-panel {
    border-color: rgba(180,83,9,.40); box-shadow: 0 8px 30px rgba(180,83,9,.12);
    animation: ctaPanelGlowLight 2.6s ease-in-out infinite;
}
@keyframes ctaPanelGlowLight {
    0%, 100% { box-shadow: 0 8px 30px rgba(180,83,9,.12); border-color: rgba(180,83,9,.40); }
    50% { box-shadow: 0 8px 44px rgba(180,83,9,.30); border-color: rgba(180,83,9,.65); }
}
body.light .cta-title { color: #b45309; }

@media (prefers-reduced-motion: reduce) {
    .cta-panel, .cta-panel #tendency-cta-link, .cta-panel #tendency-cta-link::after {
        animation: none !important;
    }
}