/* ════════════════════════════════════════════════════════════════════════════
   RECATOOLS Share Studio — Share-Card design system
   Shared card templates + share toolbar + accessible modal + reduced-motion.
   Paired with public/assets/js/share-card.js (window.RecaShareCard).
   Self-hosted only; no third-party CDN. CSP: style-src allows 'unsafe-inline'.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Export-only CJK face ──────────────────────────────────────────────────
   A subset of Noto Sans SC (SIL OFL 1.1 — see fonts/noto-sans-sc/OFL.txt),
   covering GB2312 + Big5-L1 (SC+TC). Declared here but the on-screen card uses
   a system-CJK fallback stack, so this 1.36 MB file is fetched ONLY when the
   engine calls document.fonts.load() right before a CJK card is exported (so
   html2canvas rasterises real glyphs, not tofu). Bump ?v on any font rebuild. */
@font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/noto-sans-sc/NotoSansSC-card.woff2?v=1') format('woff2');
}

/* Export-only math-alphanumerics face (U+1D400–1D7FF) for fancy-text cards —
   IBM Plex's Latin subset lacks them, so without this they tofu in the PNG on
   systems with no math font. Lazy-loaded by the engine only on math-glyph
   export. SIL OFL 1.1 — fonts/noto-sans-math/OFL.txt. */
@font-face {
    font-family: 'Noto Sans Math';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/noto-sans-math/NotoSansMath-card.woff2?v=1') format('woff2');
}

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
    --sc-navy: #0d1b2a;
    --sc-navy-card: #0c1827;
    --sc-cream: #f6f4ef;
    --sc-coral: #e8622a;
    /* On-screen card font stack — system CJK fallback (no Noto fetch on view) */
    --sc-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto,
        'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
    --sc-font-serif: 'IBM Plex Serif', Georgia, 'Songti SC', serif;
}

/* ── Card frame (the exportable node) ─────────────────────────────────────
   Fixed portrait 1080×1350 (IG/Pinterest). Rendered off-screen at full size
   and scaled to fit its on-screen preview wrapper via .sc-stage. */
.sc-card {
    box-sizing: border-box;
    width: 1080px;
    height: 1350px;
    position: relative;
    overflow: hidden;
    font-family: var(--sc-font);
    color: var(--sc-cream);
    background: var(--sc-navy-card);
    padding: 96px 88px 120px;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

.sc-card * {
    box-sizing: border-box;
}

/* Responsive preview: the 1080px card is scaled down to fit its column.
   --sc-scale is set by the engine/tool from the wrapper width. */
.sc-stage {
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
}
.sc-stage .sc-card {
    transform: scale(var(--sc-scale, 1));
    transform-origin: top left;
}

/* ── Templates ────────────────────────────────────────────────────────── */
.sc-celestial {
    background:
        radial-gradient(120% 90% at 75% 8%, #1c2c47 0%, #0c1827 55%, #070f1a 100%);
    color: #eef2fb;
}
.sc-parchment {
    background:
        radial-gradient(120% 90% at 50% 0%, #fcf7ea 0%, #f4ead0 70%, #ecdfbf 100%);
    color: #3a2f1c;
}
.sc-editorial {
    background: var(--sc-cream);
    color: #1a1814;
}
.sc-gradient {
    background: linear-gradient(150deg, #12233d 0%, #2a3a5c 45%, #e8622a 160%);
    color: #fff;
}

/* ── Card building blocks ─────────────────────────────────────────────── */
.sc-eyebrow {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--sc-coral);
    margin: 0 0 26px;
}
.sc-title {
    font-family: var(--sc-font-serif);
    font-size: 116px;
    line-height: 1.02;
    font-weight: 700;
    margin: 0 0 18px;
    letter-spacing: -1px;
}
.sc-sub {
    font-size: 40px;
    line-height: 1.3;
    opacity: 0.86;
    margin: 0;
}
.sc-spacer {
    flex: 1 1 auto;
}

/* Footer brand lockup baked into every exported card */
.sc-footer {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 40px;
}
.sc-footer .sc-tile {
    width: 76px;
    height: 76px;
    border-radius: 17px;
    flex: 0 0 auto;
}
.sc-footer .sc-wordmark {
    font-size: 46px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1;
}
.sc-footer .sc-wordmark b {
    color: var(--sc-coral);
    font-weight: 700;
}
.sc-footer .sc-url {
    margin-left: auto;
    font-size: 28px;
    opacity: 0.66;
}
.sc-parchment .sc-footer .sc-url,
.sc-editorial .sc-footer .sc-url {
    opacity: 0.6;
}

/* ── Share toolbar (on-page controls under the preview) ───────────────── */
.sc-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.sc-btn {
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1.5px solid var(--border, #ebebeb);
    background: var(--card-bg, #fff);
    color: var(--t1, #1a1814);
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.sc-btn:hover {
    transform: translateY(-1px);
    border-color: var(--sc-coral);
}
.sc-btn-primary {
    background: var(--sc-coral);
    border-color: var(--sc-coral);
    color: #fff;
}
.sc-btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}
.sc-btn:focus-visible {
    outline: 3px solid var(--sc-coral);
    outline-offset: 2px;
}
.sc-toast {
    margin-top: 10px;
    font-size: 0.9rem;
    color: var(--t2, #6b6760);
    min-height: 1.2em;
}

/* ── Accessible modal (shared) ────────────────────────────────────────── */
.sc-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 22, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
}
.sc-modal-backdrop[hidden] {
    display: none;
}
.sc-modal {
    background: var(--card-bg, #fff);
    color: var(--t1, #1a1814);
    border-radius: 16px;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    padding: 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.sc-modal h2 {
    margin: 0 0 12px;
    font-size: 1.3rem;
}
.sc-modal-close {
    float: right;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--t2, #6b6760);
    padding: 4px 8px;
}
.sc-modal-close:focus-visible {
    outline: 3px solid var(--sc-coral);
    outline-offset: 2px;
}

/* ── Visually-hidden helper (text alternatives for visual results) ───── */
.sc-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Reduced motion: kill all card/animation motion ──────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sc-btn,
    .sc-card,
    .sc-card * {
        transition: none !important;
        animation: none !important;
    }
}