/* ============================================================
   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 { margin: 0 0 12px; padding-left: 20px; }
.prose-block li { font-size: 14.5px; line-height: 1.7; color: #cbd5e1; margin-bottom: 6px; }
.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; }