/* DanDev Learning 1.0.2
 * Uses the DanDev theme variables when available, with standalone fallbacks.
 */

.dandev-learning-panel,
.dandev-learning-overview,
.dandev-learning-summary,
.dandev-learning-empty {
    --dl-bg: var(--dandev-bg, #080b10);
    --dl-surface: var(--dandev-surface, #0f141c);
    --dl-raised: var(--dandev-surface-raised, #151c26);
    --dl-border: var(--dandev-border, #263140);
    --dl-text: var(--dandev-text, #e7edf5);
    --dl-muted: var(--dandev-muted, #94a3b8);
    --dl-accent: var(--dandev-accent, #a78bfa);
    --dl-radius: var(--dandev-radius, 0.75rem);
    color: var(--dl-text);
}

.dandev-learning-eyebrow {
    margin: 0 0 0.35rem;
    color: var(--dl-accent);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.dandev-learning-panel {
    margin: 0 0 2.25rem;
    padding: 1.25rem;
    border: 0;
    border-radius: var(--dl-radius);
    background: var(--dl-raised);
}

.dandev-learning-panel__header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.15rem;
}

.dandev-learning-panel__header .dandev-learning-eyebrow,
.dandev-learning-panel__date {
    margin-bottom: 0;
}

.dandev-learning-panel__date {
    color: var(--dl-muted);
    font-size: 0.85rem;
}

.dandev-learning-field + .dandev-learning-field {
    margin-top: 1rem;
}

.dandev-learning-field h2 {
    margin: 0 0 0.3rem;
    font-size: 0.9rem;
}

.dandev-learning-field p {
    margin: 0;
    color: #cbd5e1;
}

.dandev-learning-field p + p {
    margin-top: 0.6rem;
}

.dandev-learning-overview,
.dandev-learning-summary {
    width: 100%;
}

.dandev-learning-summary__header {
    margin-bottom: 2rem;
}

.dandev-learning-summary__header h2 {
    margin: 0 0 0.55rem;
}

.dandev-learning-summary__header > p:last-child {
    margin: 0;
    color: var(--dl-muted);
}

.dandev-learning-period-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem 1rem;
    align-items: center;
    margin-bottom: 2.25rem;
}

.dandev-learning-period-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    min-width: 0;
}

.dandev-learning-period-nav__side {
    min-width: 0;
}

.dandev-learning-period-nav__side--newer {
    text-align: right;
}

.dandev-learning-period-nav a {
    display: inline-block;
    padding: 0.5rem 0.7rem;
    border-radius: 0.45rem;
    font-size: 0.86rem;
    line-height: 1.35;
}

.dandev-learning-period-nav a {
    background: var(--dl-surface);
    color: var(--dl-text);
    text-decoration: none;
}

.dandev-learning-period-nav a:hover {
    background: var(--dl-raised);
    color: var(--dl-accent);
}


.dandev-learning-period-selector {
    margin: 0;
}

.dandev-learning-period-selector select {
    width: auto;
    min-width: 10.5rem;
    max-width: 100%;
    padding: 0.5rem 2.25rem 0.5rem 0.7rem;
    border: 1px solid var(--dl-border);
    border-radius: 0.45rem;
    background: var(--dl-surface);
    color: var(--dl-text);
    font-size: 0.86rem;
    line-height: 1.35;
}

.dandev-learning-period-selector select:focus {
    border-color: var(--dl-accent);
    outline: 2px solid rgba(167, 139, 250, 0.2);
    outline-offset: 2px;
}

.dandev-learning-week + .dandev-learning-week {
    margin-top: 2.5rem;
}

.dandev-learning-week__heading {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.85rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--dl-border);
}

.dandev-learning-week__heading h3 {
    margin: 0;
}

.dandev-learning-week__heading span,
.dandev-learning-week__empty {
    color: var(--dl-muted);
    font-size: 0.88rem;
}

.dandev-learning-list {
    display: grid;
    gap: 1rem;
}

.dandev-learning-card {
    padding: 1.15rem;
    border-radius: var(--dl-radius);
    background: var(--dl-surface);
    transition: background-color 120ms ease;
}

.dandev-learning-card:hover {
    background: var(--dl-raised);
}

.dandev-learning-card__meta {
    color: var(--dl-muted);
    font-size: 0.8rem;
}

.dandev-learning-card__title {
    margin: 0.4rem 0 1rem;
    font-size: 1.2rem;
}

.dandev-learning-card__title a {
    color: var(--dl-accent);
    text-decoration: none;
}

.dandev-learning-card__title a:hover {
    color: #c4b5fd;
}

.dandev-learning-card__field + .dandev-learning-card__field {
    margin-top: 0.85rem;
}

.dandev-learning-card__field strong {
    display: block;
    margin-bottom: 0.15rem;
    color: #f8fafc;
    font-size: 0.86rem;
}

.dandev-learning-card__field p {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.93rem;
}

.dandev-learning-card__link {
    display: inline-block;
    margin-top: 1rem;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.dandev-learning-summary {
    padding: 1.35rem;
    border-radius: var(--dl-radius);
    background: var(--dl-surface);
}

.dandev-learning-summary__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.35rem;
}

.dandev-learning-stat {
    padding: 1rem;
    background: var(--dl-raised);
}

.dandev-learning-stat__value,
.dandev-learning-stat__label {
    display: block;
}

.dandev-learning-stat__value {
    color: #f8fafc;
    font-size: clamp(1.6rem, 5vw, 2.25rem);
    font-weight: 750;
    line-height: 1;
}

.dandev-learning-stat__label {
    margin-top: 0.4rem;
    color: var(--dl-muted);
    font-size: 0.82rem;
}

.dandev-learning-category-counts {
    border-top: 1px solid var(--dl-border);
}

.dandev-learning-category-count {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.72rem 0;
    border-bottom: 1px solid var(--dl-border);
}

.dandev-learning-category-count strong {
    color: var(--dl-accent);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.dandev-learning-empty {
    padding: 1rem 1.15rem;
    border-left: 3px solid var(--dl-border);
    background: var(--dl-surface);
    color: var(--dl-muted);
}

@media (max-width: 42rem) {
    .dandev-learning-summary__stats {
        grid-template-columns: 1fr;
    }

    .dandev-learning-period-controls {
        grid-template-columns: 1fr;
    }

    .dandev-learning-period-nav {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.4rem;
    }

    .dandev-learning-period-nav a {
        padding: 0.45rem 0.5rem;
        font-size: 0.78rem;
    }

    .dandev-learning-period-selector select {
        width: 100%;
    }
}