/* ——— Reset & base ——— */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'Blankon';
    src: url('assets/fonts/Blankon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Palette sampled straight from assets/bg.jpg — no outside colors */
    --bg: #2b2c3d;            /* wallpaper navy */
    --fg: #eee0db;            /* wallpaper cream (character linework) */
    --fg-secondary: #c9b8b0;  /* cream, dimmed */
    --fg-muted: #797b8e;      /* wallpaper mid gray-blue */
    --border: #46485a;        /* wallpaper mid navy */
    --accent: #eee0db;        /* cream, used for "active" marks */

    /* Paper widgets: cream card, ink-navy text — reversed from the page */
    --paper: rgba(238, 224, 219, 0.95);
    --paper-edge: #46485a;
    --ink: #2b2c3d;
    --ink-soft: #4c4d61;
    --ink-faint: #79768e;

    --surface: rgba(43, 44, 61, 0.45);       /* navy, translucent (non-paper use) */
    --hover-surface: rgba(70, 72, 90, 0.5);

    --mono: 'JetBrainsMono Nerd Font', 'JetBrains Mono', ui-monospace, monospace;
    --display: 'Blankon', var(--mono);
    --serif: var(--mono);
    --sans: var(--mono);
    --radius: 0px;            /* Woodblock sharp square edges */
}

html, body {
    min-height: 100vh;
    background: var(--bg) url("assets/bg.jpg") center center / cover no-repeat fixed;
    color: var(--fg);
    font-family: var(--sans);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--fg);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.12s ease;
}

a:visited {
    color: var(--fg);
}

a:hover {
    color: var(--fg-secondary);
}

body {
    padding: 0 1.5rem;
}

::selection {
    background: var(--fg);
    color: var(--bg);
}

/* Scrollbar styling (only used if items overflow slightly) */
::-webkit-scrollbar {
    width: 4px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

/* ——— Dashboard layout ——— */
.dashboard-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 0 1rem;
}

/* ——— Header ——— */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

/* ——— Widget column ——— */
.dashboard-grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin: 1rem 0;
    max-width: min(64vw, 980px);
}

/* ——— Widget cards: paper, cut from the wallpaper's own cream ——— */
.grid-card {
    /* Re-scope the theme tokens to the paper palette for everything inside */
    --fg: var(--ink);
    --fg-secondary: var(--ink-soft);
    --fg-muted: var(--ink-faint);
    --border: var(--paper-edge);

    background: var(--paper);
    border: 1px solid var(--paper-edge);
    border-radius: var(--radius);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.widget {
    width: 280px;
    max-height: 46vh;
}

.widget-wide {
    width: 620px;
    max-height: none;
}

.widget-row {
    display: flex;
    gap: 1rem;
}

.widget-row .widget {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
}

/* ——— Activity heatmap ——— */
.activity-heatmap {
    display: flex;
    gap: 3px;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.activity-week {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.activity-cell {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: transparent;
    border: 1px solid var(--paper-edge);
}

.activity-cell.active {
    background: var(--ink);
    border-color: var(--ink);
}

.activity-legend {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.6rem;
    font-size: 0.68rem;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.activity-stat {
    margin-left: auto;
    color: var(--fg-secondary);
    text-transform: none;
    letter-spacing: 0;
}

.card-header-label {
    font-family: var(--display);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--fg-muted);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.4rem;
    margin-bottom: 0.65rem;
    flex-shrink: 0;
}

.card-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ——— Course progress ring ——— */
.course-content {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    overflow: visible;
}

.course-ring-wrap {
    position: relative;
    width: 88px;
    height: 88px;
    flex-shrink: 0;
}

.course-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.course-ring-progress {
    fill: none;
    stroke: var(--ink);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.4s ease;
}

.course-ring-number {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-size: 1.4rem;
    color: var(--ink);
}

.course-info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.course-title {
    font-family: var(--display);
    font-size: 1.05rem;
    color: var(--ink);
}

.course-sub {
    font-size: 0.78rem;
    color: var(--fg-secondary);
    line-height: 1.4;
}

.course-cert {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    overflow: visible;
}

.cert-logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    fill: var(--ink);
}

.cert-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.cert-name {
    font-family: var(--display);
    font-size: 1.05rem;
    color: var(--ink);
    line-height: 1.25;
}

.skill-content {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    overflow: visible;
}

.skill-logo {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    fill: var(--ink);
}

.skill-name {
    font-family: var(--display);
    font-size: 1.05rem;
    color: var(--ink);
}

/* ——— Footer ——— */
.site-footer {
    margin-top: auto;
    text-align: center;
    font-size: 0.75rem;
    color: var(--fg-muted);
    letter-spacing: 0.04em;
    font-style: italic;
    flex-shrink: 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

/* ——— Responsive ——— */
@media (max-width: 1366px) and (min-width: 601px) {
    .dashboard-grid {
        max-width: min(70vw, 700px);
    }

    .widget {
        width: 240px;
    }

    .grid-card {
        padding: 0.85rem;
    }
}

@media (max-width: 600px) {
    .dashboard-container {
        padding: 1rem 0;
    }

    .dashboard-grid {
        max-width: 100%;
        margin: 1.5rem 0;
    }

    .widget {
        width: 100%;
        max-height: none;
    }

    .widget-wide {
        width: 100%;
    }

    .widget-row {
        flex-direction: column;
    }
}