/* 
  Swiss Digital Minimalism - Design System
  Centralized styles and tokens
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* Palette Tokens */
    --color-bg: #121212;
    --color-surface: #1c1c1c;
    --color-border: #2d2d2d;
    --color-text: #f5f5f5;
    --color-accent: #95c11f;
    --color-hover: #252525;
}

body { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* Typography System */
.mono { 
    font-family: 'JetBrains Mono', monospace; 
}

.hairline { 
    border: 1px solid var(--color-border); 
}

/* Component Patterns */
.system-card {
    background-color: var(--color-surface);
    transition: background-color 0.3s ease;
}

.system-card:hover {
    background-color: var(--color-hover);
}

/* Content Styles */
/* Ссылки в контенте (статьи, страницы): акцентный цвет + подчёркивание; hover — темнее акцент */
.prose-custom a,
[data-post-body] a,
[data-custom-frame] a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(149, 193, 31, 0.5);
    transition: color 0.2s, text-decoration-color 0.2s;
}

.prose-custom a:hover,
[data-post-body] a:hover,
[data-custom-frame] a:hover {
    color: #7da61a;
    text-decoration-color: currentColor;
}

.prose-custom p {
    margin-bottom: 1.5rem;
    line-height: 1.75;
    opacity: 0.8;
}

/* Инлайн-акцент: «|слово» внутри текста — слово в акцентном цвете.
   Работает весь сайт (статьи, проекты, страницы, навигация); внутри <code>/<pre> | остаётся как есть. */
.accent-mark {
    color: var(--color-accent);
}

.prose-custom h2 {
    font-size: 1.875rem;
    font-weight: 700;
    margin-top: 3rem;
    margin-bottom: 1rem;
    letter-spacing: -0.025em;
}

/* Цитаты в контенте (рёбра проставляет pages.js/custom-page.js классом .quote-accent): акцентная левая полоса */
.quote-accent {
    border-left: 4px solid var(--color-accent);
}

/* Скролл-лок при открытом модальном окне (lightbox) */
body.modal-open { overflow: hidden; }

/* fix: original had invalid "tracking-tighter;" line — replaced by letter-spacing above */

/* ---------- code blocks + highlight.js theme (Citrus Green adaptation) ---------- */
.prose-custom pre,
[data-post-body] pre {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    border-radius: 0;
    margin: 2rem 0;
    position: relative;
}

/* thin scrollbar for code */
[data-post-body] pre::-webkit-scrollbar { height: 6px; }
[data-post-body] pre::-webkit-scrollbar-track { background: var(--color-bg); }
[data-post-body] pre::-webkit-scrollbar-thumb { background: var(--color-border); }
[data-post-body] pre::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

[data-post-body] pre code,
.prose-custom pre code {
    background: transparent;
    padding: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.7;
    color: #d8d8d2;
    display: block;
}

[data-post-body] code { font-family: 'JetBrains Mono', monospace; }

[data-post-body] pre code.hljs { padding: 0; background: transparent; }

/* highlight.js token colors — adapted to Velvet Night + Citrus Green */
.hljs { color: #d8d8d2; background: transparent; }
.hljs-comment, .hljs-quote { color: #6a6a60; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal { color: #e8b24a; }          /* warm amber: keywords */
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-meta { color: #95c11f; }        /* citrus: literals/nums */
.hljs-string, .hljs-addition { color: #8fc7a0; }                                /* soft mint: strings */
.hljs-title, .hljs-section, .hljs-name { color: #f0f0ea; font-weight: 600; }    /* bright: titles */
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable { color: #c8a2e0; }
.hljs-built_in, .hljs-type, .hljs-class { color: #7fc0d8; }
.hljs-tag { color: #9a9a8a; }
.hljs-punctuation { color: #8a8a7e; }
.hljs-doctag, .hljs-strong { font-weight: bold; color: #f0f0ea; }
.hljs-emphasis { font-style: italic; }
.hljs-deletion { color: #d87676; background: transparent; }
.hljs-addition { color: #8fc7a0; background: rgba(149,193,31,.08); }

/* ---------- Nav: iOS-style glass (blur + gradient darken) over scrolling content ---------- */
/* Public pages only (nav.fixed): CMS-шапка имеет solid bg и скроллить под неё нечего. */
nav.fixed::before {
    content: "";
    position: absolute;
    inset: -1px 0 0 0;             /* cover nav padding area, minus bottom fade zone */
    height: calc(100% + 36px);     /* soft tail under the links row, как у iOS navbar */
    pointer-events: none;
    z-index: -1;                   /* за содержимым nav (ссылки не размываются), но над контентом страницы */
    background: linear-gradient(
        to bottom,
        rgba(18, 18, 18, 0.72) 0%,
        rgba(18, 18, 18, 0.55) 55%,
        rgba(18, 18, 18, 0.0) 100%
    );
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    /* fade the blur+darken out toward the bottom, like iOS navbar material */
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 100%);
}

/* ---------- Мобильный бургер (<768px) ----------
   Кнопка в право-вернем углу, в гриде шапки: hairline-квадрат 44×44 (та же hairline-сетка,
   что и у .system-card/карточек), линии 2px — как hairline-бордюры. Цвет текста/иконок = --color-text.
   Состояние — класс .nav-open на nav (ставит burger.js): панель flex, линии — «крест»,
   по аналогии с lightbox (✕ hairline-кнопка). */
.burger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
}
nav.fixed [data-burger] { gap: 5px; display: flex; }
/* панель: стёкло как у nav, скрыта по умолчанию, открыта при .nav-open */
[data-nav-panel] {
    display: none;
    padding: 110px 24px 48px;
    flex-direction: column;
    background: rgba(18,18,18,.95);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--color-border);
    pointer-events: auto;
}
nav.nav-open [data-nav-panel] { display: flex; }
/* крест при открытом состоянии: крайние линии сходятся в центр */
nav.nav-open [data-burger] .burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.nav-open [data-burger] .burger-line:nth-child(2) { opacity: 0; }
nav.nav-open [data-burger] .burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* на мобильном бокс ссылок скрыт (живёт в бургер-панели); на десктопе панель скрыта */
@media (max-width: 767px) {
    nav.fixed [data-nav-links] { display: none !important; }
}
@media (min-width: 768px) {
    [data-burger] { display: none !important; }
    [data-nav-panel] { display: none !important; }
}
/* пункты в панели: первый без верхней границы (hairline-паттерн соседства, как у табличных строк) */
[data-nav-panel] a { margin: 0 -8px; padding: 14px 8px; }
[data-nav-panel] a:first-child { padding-top: 8px; }

/* ---------- Служебные/динамические стили (были inline в шаблонах и JS) ---------- */

/* CMS логин: фото-обложка + iOS-autofill не должен ломать тёмную тему */
.login-photo { object-fit: cover; width: 100%; height: 100%; }
.login-photo.login-photo-error { background: linear-gradient(135deg, #1c1c1c, #1a240a); }
.login-photo.login-photo-fallback { background: linear-gradient(135deg, #1c1c1c, #1a240a 70%, #95c11f22); }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset; -webkit-text-fill-color: var(--color-text); }

/* Flash-статусы в CMS (data-flash): успех / ошибка */
[data-flash].flash-ok { color: var(--color-accent); }
[data-flash].flash-err { color: rgb(239 68 68); }

/* ---------- Лайтбокс (assets/lightbox.js строит разметку с этими классами) ---------- */
#lightbox {
    position: fixed; inset: 0; z-index: 9999; display: none;
    background: rgba(10,10,10,.94);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    align-items: center; justify-content: center;
}
#lightbox.open { display: flex; }
#lightbox [hidden] { display: none !important; }
#lightbox [data-lb-bg] { position: absolute; inset: 0; }
#lightbox button {
    position: absolute;
    background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text);
    cursor: pointer; transition: all .2s;
}
#lightbox [data-lb-close] { top: 24px; right: 28px; width: 44px; height: 44px; font: 700 14px 'JetBrains Mono', monospace; }
#lightbox [data-lb-prev]  { left: 24px; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 20px; }
#lightbox [data-lb-next]  { right: 24px; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 20px; }
#lightbox button:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
#lightbox figure {
    position: relative; z-index: 2;
    max-width: min(90vw, 1200px); max-height: 86vh; margin: 0;
    display: flex; flex-direction: column; gap: 12px; align-items: center;
}
#lightbox [data-lb-img] {
    max-width: 100%; max-height: 78vh; min-width: 220px; object-fit: contain;
    border: 1px solid var(--color-border); background: #111;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .7);
}
#lightbox figcaption { display: flex; justify-content: space-between; gap: 24px; width: 100%; color: var(--color-text); }
#lightbox figcaption span { font: 500 11px 'JetBrains Mono', monospace; letter-spacing: .14em; }
#lightbox [data-lb-cap]   { text-transform: uppercase; opacity: .6; }
#lightbox [data-lb-count] { opacity: .4; }

/* ---------- Медиа-плитки CMS медиатеки (cms/media.js) ---------- */
.media-thumb-img {
    width: 100%; height: 120px; object-fit: cover; display: block;
}
.media-thumb-icon {
    width: 100%; height: 120px; display: flex; align-items: center; justify-content: center;
    font-size: 40px; opacity: .25;
}

/* Внешний embed-плеер на странице проекта (pages.js) */
[data-embed-frame] { border: 0; display: block; }

/* Медиа, вставляемые rich-editor в контент статей/страниц (сам контент рендерится
   на публичных страницах и в предпросмотре — стили общие для figure-вставок) */
.prose-custom figure img, .prose-custom figure video { max-width: 100%; height: auto; }
[data-rich-body] figure img  { max-width: 100%; height: auto; }
[data-rich-body] figure video { max-width: 100%; width: 100%; }
[data-rich-body] figure audio { width: 100%; }