/* ===== Yours&Mine Dashboard shared styling ===== */

.ym-dashboard-intro {
    font-size: 0.95rem;
    opacity: 0.8;
}

/* Generic card look for our own info blocks */
.ym-card {
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    background-color: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: background-color 0.25s ease, color 0.25s ease,
                box-shadow 0.25s ease, border-color 0.25s ease;
}

.ym-card-title {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    opacity: 0.7;
    margin-bottom: 0.4rem;
}

.ym-card-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.ym-card-meta {
    font-size: 0.85rem;
    opacity: 0.75;
}

/* Code / explanation block card */
.ym-card-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.82rem;
    background: #0f172a;
    color: #e5e7eb;
    border-radius: 14px;
    padding: 1rem 1.2rem;
    overflow-x: auto;
}

.ym-card-code .ym-step {
    margin-bottom: 0.4rem;
}

.ym-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid rgba(148, 163, 184, 0.6);
    background: rgba(248, 250, 252, 0.9);
    margin-right: 0.25rem;
}

/* Small badge for framework version etc. */
.ym-badge-soft {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    border-radius: 999px;
    background: rgba(59,130,246,0.08);
    color: #1d4ed8;
}

/* ---------- Dark mode tweaks for Cork ---------- */

/* When Cork dark mode is active, we toggle .ym-dark on body from JS */
body.ym-dark .ym-card {
    background-color: #0b1220;       /* deep slate */
    border-color: rgba(148, 163, 184, 0.25);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.8);
    color: #e5e7eb;
}

body.ym-dark .ym-card-title {
    opacity: 0.8;
    color: #cbd5f5;
}

body.ym-dark .ym-card-meta {
    opacity: 0.85;
}

body.ym-dark .ym-badge-soft {
    background: rgba(59,130,246,0.22);
    color: #bfdbfe;
    border-color: rgba(96,165,250,0.7);
}

body.ym-dark .ym-chip {
    background: rgba(15,23,42,0.9);
    border-color: rgba(148,163,184,0.7);
    color: #e5e7eb;
}

/* Keep dark code block readable against dark background */
body.ym-dark .ym-card-code {
    background: #020617;
    color: #e5e7eb;
}