/* ========== Цветовые переменные ========== */
:root {
    --color-bg-dark: #2a2a2a;
    --color-bg-lighter: #b7b7b7;
    --color-bg-light: #f2f2f2;
    --color-text-primary: #eaeaea;
    --color-text-secondary: #e0e0e0;
    --color-text-tertiary: #d0d0d0;
    --color-text-muted: #aaaaaa;
    --color-text-em: #f0f0f0;
    --color-text-strong: #ffffff;
    --color-text-dark: #1b1b1b;
    --color-link: #9fd3ff;
    --color-link-hover: #b7e1ff;
    --color-link-rgb: 159, 211, 255;
    --color-quote-border: #9fd3ff;
    --color-quote-border-hover: #6fb8f0;
    --color-quote-author: #9fd3ff;
    --color-white-rgb: 255, 255, 255;
    --color-list-dots: rgba(var(--color-link-rgb), 0.3);
    --color-list-date: var(--color-text-muted);
    --color-list-hover: rgba(var(--color-link-rgb), 0.1);
    --spacing-list-item: 10px;
}

/* ========== Общие настройки ========== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Courier New", Courier, monospace;
    background-color: var(--color-bg-light);
    color: var(--color-text-primary);
    line-height: 1.6;
}
/* ========== Ссылки (глобально) ========== */
a {
    color: var(--color-link);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--color-link-rgb), 0.35);
    transition: border-color 0.2s ease, color 0.2s ease;
}

a:hover {
    color: var(--color-link-hover);
    border-bottom-color: rgba(var(--color-link-rgb), 0.8);
}

/* ========== Центральный контейнер ========== */
.container {
    max-width: 800px;
    margin: 60px auto;
    padding: 40px;
    background-color: var(--color-bg-dark);
    border-radius: 6px;
    animation: fadeIn 0.6s ease-out;
}

/* ========== Заголовки ========== */
h2, h3 {
    position: relative;
    padding-left: 14px;
}

h2::before,
h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    bottom: 0.2em;
    width: 3px;
    background: linear-gradient(
        to bottom,
        rgba(var(--color-link-rgb), 0.8),
        rgba(var(--color-link-rgb), 0.2)
    );
    border-radius: 2px;
}

/*h2::after,
h3::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: 6px;
    background: linear-gradient(
        to right,
        rgba(var(--color-white-rgb), 0.25),
        rgba(var(--color-white-rgb), 0.05),
        transparent
    );
}*/


.article > h2 {
    margin-top: 40px;
    background: linear-gradient(
        to right,
        rgba(var(--color-white-rgb), 0.04),
        transparent
    );
}


/* ========== Навигация ========== */
.nav {
    margin-bottom: 40px;
}

.nav a {
    margin-right: 20px;
    color: var(--color-link);
    text-decoration: none;
}

.nav a:hover {
    text-decoration: underline;
}

/* ========== Текст ========== */
p {
    margin-bottom: 1.1em;
    text-align: justify;
}

p + p {
    margin-top: 0.2em;
}

.lead {
    padding: 10px 14px;
    background: rgba(var(--color-white-rgb), 0.04);
    /*border-left: 3px solid rgba(var(--color-link-rgb), 0.5);*/
    border-radius: 3px;
}


.article p:first-of-type:not(.lead) {
    font-size: 1.05em;
}

.article p + p {
    text-indent: 1.5em;
}
.article p {
    transition: background-color 0.2s ease;
}

.article p:hover {
    background-color: rgba(var(--color-white-rgb), 0.02);
}


em {
    color: var(--color-text-em);
    font-style: italic;
}

strong {
    font-weight: normal;
    color: var(--color-text-strong);
}

.article p + p {
    text-indent: 1.5em;
    position: relative;
}

/*.article p + p::before { Может это и прикольно, но надо доработать
    content: "";
    position: absolute;
    left: -14px;
    top: 0.2em;
    bottom: 0.2em;
    width: 5px;
    background: rgba(var(--color-white-rgb), 0.08);
}*/

/* ========== Статьи ========== */
.article-title {
    margin-bottom: 10px;
}

.article-meta {
    font-size: 0.9em;
    color: var(--color-text-muted);
    margin-bottom: 30px;
    /*font-variant: small-caps; Не уверен, что мне это нравится*/ 
    letter-spacing: 0.04em;
}

/* ========== Кнопка назад ========== */
.back-button {
    display: inline-block;
    margin-bottom: 30px;
    color: var(--color-link);
    text-decoration: none;
}

.back-button:hover {
    text-decoration: underline;
}

/* ========== Простая анимация ========== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== Цитаты ========== */
.quote {
    border-left: 3px solid var(--color-quote-border);
    padding: 20px 40px 20px 50px;
    margin: 25px 0;
    background-color: rgba(var(--color-white-rgb), 0.05);
    position: relative;
    font-style: italic;
    color: var(--color-text-tertiary);
    transition: all 0.3s ease;
}

.quote:hover {
    background-color: rgba(var(--color-white-rgb), 0.08);
    transform: translateX(3px);
    border-left-color: var(--color-quote-border-hover);
}

.quote::before {
    content: "❝";
    font-size: 2.5em;
    color: var(--color-quote-border);
    opacity: 0.3;
    position: absolute;
    left: 15px;
    top: 8px;
}

.quote::after {
    content: "❞";
    font-size: 2.5em;
    color: var(--color-quote-border);
    opacity: 0.3;
    position: absolute;
    right: 20px;
    bottom: -10px;
}

.quote p {
    margin-bottom: 10px;
    line-height: 1.7;
    position: relative;
    z-index: 1;
    text-indent: -0.4em;
    padding-left: 0.4em;
}

/*
p,
.quote p,
.article p {
    max-width: 80ch;
}
Портит layout imho
*/

.quote p:first-child {
    text-indent: 0.5em;
}

.quote .quote-author {
    font-style: normal;
    text-align: right;
    font-size: 0.9em;
    color: var(--color-quote-author);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(var(--color-white-rgb), 0.1);
}

.quote .quote-author::before {
    content: "— ";
}

/* ========== Списки (добавлено) ========== */
.article ul,
.article ol {
    max-width: 65ch;
    margin: 1.1em 0;
    padding-left: 2em;
}

.article li {
    margin-bottom: 0.5em;
    line-height: 1.6;
}

.article li:last-child {
    margin-bottom: 0;
}

/* ========== Подпись статьи (добавлено) ========== */
.article-signature {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(var(--color-white-rgb), 0.1);
    color: var(--color-text-muted);
    font-size: 0.9em;
    font-style: italic;
    text-align: right;
    /*max-width: 80ch; Questionable*/
}

/*
.article-signature::before {
    content: "— ";
    Выглядит так себе
}*/

/* =============Дата в articles.html ==============*/

.article-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.article-list-item {
    display: flex;
    align-items: baseline;
    padding: var(--spacing-list-item) var(--spacing-list-item) var(--spacing-list-item) var(--spacing-list-item);
    border-bottom: 1px solid rgba(var(--color-white-rgb), 0.08);
    position: relative;
    transition: background-color 0.2s ease;
}

.article-list-date {
    color: var(--color-list-date);
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding: 2px 10px 2px 10px;
    background-color: var(--color-bg-dark);
    position: relative;
    z-index: 1;
    transition: all 0.2s ease; /* Add transition for smooth hover */
}
.article-list-item:hover .article-list-date {
    color: var(--color-link-hover); /* Match link hover color */
    background-color: var(--color-list-hover);
    transform: translateX(3px); /* Slight movement with the item */
}

.article-list-item:hover {
    background-color: var(--color-list-hover);
    transform: translateX(3px);
}

/* The article title/link */
.article-list-link {
    flex: 1;
    color: var(--color-link);
    text-decoration: none;
    border-bottom: none;
    position: relative;
    padding-right: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article-list-link:hover {
    color: var(--color-link-hover);
    border-bottom: none;
}

/* The dots between title and date */
.article-list-link::after {
    /*Не уверен, что это действительно необходимо
    content: " ......................................................................................................................................................................................................................................................................................................................................................................................................................................";*/
    /* Lots of dots! Overflow will be hidden */
    position: absolute;
    left: 100%;
    bottom: -2px;
    margin-left: 10px;
    color: var(--color-list-dots);
    opacity: 0.5;
    letter-spacing: 2px;
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
    width: calc(100vw - 800px); /* Adjust based on your container width */
    max-width: 300px;
}

/* The date on the right */
.article-list-date {
    color: var(--color-list-date);
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    white-space: nowrap;
    padding-left: 20px;
    background-color: var(--color-bg-dark); /* To appear above dots */
    position: relative;
    z-index: 1;
}

/* Alternative approach using CSS grid (more modern) */
.article-list-grid {
    list-style: none;
    padding: 0;
    margin: 40px 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: baseline;
}

.article-list-grid-item {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: baseline;
    padding: var(--spacing-list-item) 0;
    border-bottom: 1px solid rgba(var(--color-white-rgb), 0.08);
}

.article-list-grid-item:hover {
    background-color: var(--color-list-hover);
}

/* The dotted line for grid version */
.article-list-grid-item::before {
    content: "";
    grid-column: 1;
    border-bottom: 1px dotted var(--color-list-dots);
    margin-top: -3px;
    opacity: 0.5;
}

/* Hover effects for grid version */
.article-list-grid-item:hover::before {
    opacity: 0.8;
}

.article-list-grid-link {
    color: var(--color-link);
    text-decoration: none;
    border-bottom: none;
    padding-right: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    grid-column: 1;
    background-color: var(--color-bg-dark); /* Cover part of the dots */
    position: relative;
    z-index: 1;
}

.article-list-grid-link:hover {
    color: var(--color-link-hover);
    border-bottom: none;
}

.article-list-grid-date {
    color: var(--color-list-date);
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    grid-column: 2;
    background-color: var(--color-bg-dark); /* Cover part of the dots */
    position: relative;
    z-index: 1;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
    .article-list-item,
    .article-list-grid-item {
        flex-direction: column;
        grid-template-columns: 1fr;
        gap: 5px;
    }
    
    .article-list-link::after {
        display: none; /* Hide dots on mobile */
    }
    
    .article-list-date,
    .article-list-grid-date {
        margin-left: 0;
        padding-left: 0;
        align-self: flex-start;
        font-size: 0.8em;
        opacity: 0.8;
    }
    
    .article-list-grid-item::before {
        display: none; /* Hide dots on mobile */
    }
}

/* Уравнения */

.equation {
    display: block;
    text-align: center;
    margin: 10px auto;
}

.equation image {
    max-width: 100%;
    height: auto;
}

/* Код */

.code-block {
    margin: 16px 0;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(var(--color-white-rgb), 0.94);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    border-left: 3px solid rgba(var(--color-link-rgb), 0.4);
}

.code-header {
    background: var(--color-bg-lighter);
    color: var(--color-bg-dark);
    font-size: 0.85rem;
    padding: 6px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.code-block pre {
    margin: 0;
    padding: 0;
    overflow-x: auto;
}

.code-block code {
    display: block;
    padding: 10px 14px;
    color: var(--color-text-dark);
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre;
}

/*Фигуры*/


figure {
    margin: 20px 0;
    padding: 10px 14px;
    background: rgba(var(--color-white-rgb), 0.04);
    border-left: 3px solid rgba(var(--color-link-rgb), 0.35);
    border-radius: 4px;
}

figure img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 3px;
}

figcaption {
    margin-top: 8px;
    padding-top: 6px;
    font-size: 0.85em;
    color: var(--color-text-muted);
    line-height: 1.4;
    text-align: center;
}


/* Sorting indicators (for future JS implementation) 
.article-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(var(--color-link-rgb), 0.3);
}

.sort-button {
    background: none;
    border: none;
    color: var(--color-link);
    font-family: inherit;
    font-size: 0.9em;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.sort-button:hover {
    background-color: rgba(var(--color-link-rgb), 0.1);
}

.sort-button.active {
    background-color: rgba(var(--color-link-rgb), 0.2);
    font-weight: bold;
}

<div class="article-list-header">
    <h3>Articles</h3>
    <div>
        <button class="sort-button" data-sort="name">Sort by Name</button>
        <button class="sort-button active" data-sort="date">Sort by Date</button>
    </div>
</div>

*/