/* temp/web/css/style-page.css */
/* Стили для шапки опубликованной страницы */
.header {
text-align: center;
margin-bottom: 20px;
color: #555;
width: 100%;
max-width: 700px;}
/* Стили для подвала с автором и датой */
.author-info {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #eee;
text-align: right;
font-size: 0.9em;
color: #777;}
.author-info p {margin: 5px 0;}
/* --- Стиль даты в карточке --- */
.card-date {font-size: 0.85em; color: #999; margin-left: 8px;}
/* --- Ссылка на автора --- */
.author-link {
    color: #007bff; /* Стандартный синий или ваш цвет темы */
    text-decoration: none;
    border-bottom: 1px dotted #007bff;}
.author-link:hover {color: #0056b3; border-bottom: 1px solid #0056b3;}
/* --- Стили для всплывающей иконки комментария --- */
.comment-bubble {
    position: absolute; /* Позиционируется относительно всей страницы */
    display: none;      /* По умолчанию иконка невидима */
    background-color: #333;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1000;} /* Чтобы была поверх всего */
.content-view {padding: 40px 50px;}
/* Стили для контейнера опубликованного контента */
.editor-container.content-view {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 40px 50px;
    position: relative;}
/* Контейнер для кнопок (желтой) */
.edit-container {position: absolute; top: 20px; right: 15px;}
/* Стили для круглой кнопки редактирования */
.action-button.edit-button {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    cursor: pointer;
    background-color: #ffc107; /* Желтый */
    transition: transform 0.2s;}
.action-button.edit-button:hover {transform: scale(1.1);}
/* Остальные стили для страницы просмотра */
.content h1 {text-align: center;}
/* --- ТЕГИ КАК ТАБЛЕТКИ (Visual Pills) --- */
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px; /* Отступ между таблетками */
    margin-top: 10px;}
.tag {
    display: inline-block;
    background-color: #eef2f5; /* Светло-серый фон */
    color: #555;
    padding: 4px 10px;
    border-radius: 16px; /* Закругление "таблетки" */
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid #e0e0e0;}
.tag:hover {
    background-color: #e0e5e9;
    color: #333;
    border-color: #ccc;
    text-decoration: none;}
/* Немного уменьшим теги в футере карточки, чтобы не были огромными */
.card-footer .tag {padding: 2px 8px; font-size: 0.75rem;}
.tags-container .tag {margin-right: 8px; display: inline-block;}
/* --- Стили для числовых сносок --- */
.citation-index {
    font-size: 0.75em;
    vertical-align: super;
    color: #fff; /* Белый текст */
    background-color: #f1c40f; /* Желтый фон (как бейджики) */
    padding: 1px 5px;
    border-radius: 8px; /* Овальная форма */
    margin-left: 2px;
    margin-right: 2px;
    cursor: pointer; /* Курсор-рука */
    user-select: none;
    font-weight: bold;
    transition: transform 0.1s ease, background-color 0.2s;
    display: inline-block; /* Чтобы padding работал корректно */
    line-height: 1.2;}
.citation-index:hover {
    background-color: #f39c12; /* Темнее при наведении */
    transform: scale(1.15); /* Чуть увеличивается */
    z-index: 10;}
/* Состояние, когда карточка сноски открыта/активна */
.citation-index.active {background-color: #e67e22; box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.3);}
/* Статичная подсказка при клике на сноску */
.citation-popup {
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 8px 12px;
    border-radius: 4px;
    z-index: 2000;
    font-size: 0.9em;
    max-width: 250px;
    word-wrap: break-word;}
.citation-popup-link {
    color: #3498db;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px dotted #3498db;
    cursor: pointer;}
.citation-popup-link:hover {border-bottom: 1px solid #2980b9; color: #2980b9;}
/* --- Меню навигации по тегам --- */
.tag-popup {
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    padding: 10px;
    border-radius: 6px;
    z-index: 2000;
    min-width: 220px;
    max-width: 350px;
    text-align: left;}
.tag-popup-header {
    font-size: 0.8em;
    color: #999;
    text-transform: uppercase;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 5px;}
.tag-popup-list {list-style: none; padding: 0; margin: 0;}
.tag-popup-item {margin-bottom: 6px; line-height: 1.3;}
.tag-popup-link {
    color: #333;
    text-decoration: none;
    font-size: 0.95em;
    cursor: pointer;
    border-bottom: 1px dotted #ccc;
    transition: color 0.2s;}
.tag-popup-link:hover {color: #3498db; border-bottom-color: #3498db;}
/* === АДАПТИВНОЕ ВИДЕО (ACP) === */
iframe, video, embed, object {
    max-width: 100%;
    width: 100% !important; 
    height: auto !important;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: block;
    margin: 15px 0;}
/* На мобильных убираем поля, если есть контейнер */
@media (max-width: 600px) {iframe { border-radius: 4px; }}
/* === БЛОК КОДА (PRE) - Стилизация и Перенос === */
pre {
    background-color: #f5f7f9; /* Легкий серый фон */
    border: 1px solid #e1e4e8; /* Рамка */
    border-radius: 6px;
    padding: 12px;
    margin: 15px 0;
    /* ГЛАВНОЕ: ПЕРЕНОС СТРОК */
    white-space: pre-wrap;       /* Сохраняет пробелы, но переносит текст */
    word-wrap: break-word;       /* Разрывает длинные слова */
    overflow-wrap: break-word;
    max-width: 100%;
    overflow-x: auto;            /* Скролл только если слово совсем не влезает */
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.9em;
    line-height: 1.45;
    color: #24292e;}
.content ul, .content ol,
.card-content ul, .card-content ol {
    padding-left: 24px;
    margin: 10px 0;}