@import "codeblock.css";
@import "timeline.css";
@import "image_pop.css";


/* =============================================================================
   CUSTOM PROPERTIES
   ============================================================================= */

:root {
    --primary-color:          #54433a;
    --secondary-color:        #267cb9;
    --muted-color:            #b0a09a;
    --background-color:       #fff;
    --background-color-light: #f9f9f9;
    --code-background:        #f6f4f2;
    --border-color:           #e5e5e5;

    --base-font-size: 15px;
    --border-radius:  13px;

    --primary-font: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --code-font:    "JetBrains Mono", "Lucida Console", Consolas, monospace;

    /* Text hierarchy */
    --text-heading-sub:  #494949;
    --text-label:        #444;
    --text-code-color:   #333;
    --text-strong:       #222;
    --text-muted-alt:    #777;
    --text-description:  #888;

    /* Interactive */
    --link-hover:        #069;
    --nav-hover-bg:      #e0e0e0;
    --row-hover-bg:      #f9f6f4;

    /* Controls (tags, buttons) */
    --control-bg:        #eae1db;
    --control-color:     #1a1a1a;
    --control-bg-hover:  #dcd0c6;
    --control-border:    #d6cbc3;

    /* Inline code badge */
    --wordcode-bg:       #f2e9e1;
    --wordcode-color:    #5a4635;
    --wordcode-border:   #e0d3c9;
}


/* =============================================================================
   BASE STYLES
   ============================================================================= */

html {
    background-color: var(--background-color);
}

body {
    font-size: var(--base-font-size);
    font-family: var(--primary-font);
    color: var(--primary-color);
    background-color: var(--background-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--primary-font);
    font-weight: 600;
    margin: 0 0 5px;
    color: var(--primary-color);
}

h1,
h2,
h3 {
    line-height: 1.1;
}

h1 {
    font-size: 14px;
    font-family: var(--code-font);
    font-weight: 700;
    letter-spacing: -0.02em;
}

h3,
h4,
h5,
h6 {
    color: var(--text-heading-sub);
}

p {
    margin: 0;
}

ol,
ul {
    margin: 0 0 20px;
    padding-left: 25px;
}

table,
pre,
dl {
    margin: 0 0 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    text-align: left;
    padding: 5px 10px;
    border-bottom: 1px solid #e5e5e5;
}

dt,
th {
    color: var(--text-label);
}

code,
pre {
    font-family: var(--code-font);
    font-size: 12px;
    color: var(--text-code-color);
}

pre {
    margin: 10px -18px;
    padding: 8px 18px;
    background: var(--code-background);
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
}

pre,
.highlight pre,
.highlight {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.bubble > pre:first-child {
    margin-top: -15px;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    border-top: none;
}

.bubble > pre:last-child {
    margin-bottom: -15px;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border-bottom: none;
}

a {
    color: var(--secondary-color);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--link-hover);
    text-decoration: underline;
}

a small {
    font-size: 11px;
    color: var(--text-muted-alt);
    margin-top: -0.3em;
    display: block;
}

a:hover small {
    color: var(--text-muted-alt);
}

blockquote {
    border-left: 5px solid #909cab;
    border-radius: 4px;
    margin: 0;
    padding: 10px 0 10px 15px;
    color: #3e3b39;
    background-color: var(--code-background);
}

img {
    max-width: 100%;
}

kbd {
    background-color: #fafbfc;
    border: 1px solid #c6cbd1;
    border-bottom-color: #959da5;
    border-radius: 3px;
    box-shadow: inset 0 -1px 0 #959da5;
    color: #444d56;
    display: inline-block;
    font-size: 11px;
    line-height: 10px;
    padding: 3px 5px;
    vertical-align: middle;
}

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

small {
    font-size: 12px;
}

/* The post subtitle sits next to a mono title. Without its own size, colour and
   gap it reads as a continuation of the heading — "Chain of responsibility"
   instead of "Chain" + "of responsibility". */
small.superscript {
    vertical-align: baseline;
    margin-left: 7px;
    font-family: var(--code-font);
    font-size: 11px;
    font-weight: 400;
    color: var(--muted-color);
}

hr {
    border: 0;
    background: var(--border-color);
    height: 1px;
    margin: 0 0 20px;
}


/* =============================================================================
   LAYOUT
   ============================================================================= */

.wrapper {
    width: 600px;
    margin: 0 auto;
}

header,
footer {
    font-family: var(--primary-font);
    width: 270px;
    float: left;
    -webkit-font-smoothing: subpixel-antialiased;
    margin-bottom: 20px;
}

.footer {
    float: none;
    width: 100%;
    clear: both;
    text-align: center;
    margin-top: 48px;
    margin-bottom: 24px;
}

section {
    width: 600px;
    float: right;
    padding-bottom: 50px;
}


/* =============================================================================
   NAVIGATION
   ============================================================================= */

.menu-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--code-background);
    border-radius: var(--border-radius);
    padding: 10px 20px;
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 600px;
    width: calc(100% - 40px);
    z-index: 1000;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.menu-icon {
    width: 32px;
    height: 32px;
    background-image: url("/assets/img/ava.jpeg");
    background-size: cover;
    border-radius: 10px;
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* transform в переходе выше был объявлен, но на hover не задавался — намерение
   бросили на полпути. Наклон против часовой, а не просто подрост: лицо на
   аватарке от этого будто поворачивается к тебе. */
.menu-icon:hover {
    filter: brightness(1.2);
    transform: scale(1.06) rotate(-2deg);
}

.menu-icon:active {
    transform: scale(0.98) rotate(-2deg);
}

.menu-nav {
    display: flex;
    align-self: stretch;
    align-items: stretch;
    gap: 8px;
}

.menu-nav a {
    display: flex;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: var(--primary-color);
    font-family: var(--code-font);
    font-size: 13px;
    font-weight: 500;
    padding: 5px 11px;
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.menu-nav a:hover {
    background-color: var(--nav-hover-bg);
    color: var(--primary-color);
}

/* Черта под подписью — та же, что помечает текущую страницу: на hover она
   просто проявляется. Выезд слева направо тянул на себя внимание сильнее, чем
   стоит подсказка о наведении.

   У активного пункта она видна сразу: переходы не срабатывают на первом
   применении стиля, поэтому при загрузке ничего не мигает. */
.menu-nav a {
    position: relative;
}

.menu-nav a::after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 11px;
    right: 11px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--primary-color);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.menu-nav a.active::after,
.menu-nav a:hover::after {
    opacity: 1;
}


/* =============================================================================
   TYPOGRAPHY
   ============================================================================= */

article {
    margin: 90px 10px 0;
}

.article-title {
    margin: 0;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.1;
}

.spacer {
    height: 10px;
}

.wordcode {
    background-color: var(--wordcode-bg);
    color: var(--wordcode-color);
    padding: 1px 4px;
    border-radius: 4px;
    border: 1px solid var(--wordcode-border);
    font-family: var(--code-font);
    font-size: 12px;
    display: inline-block;
}

/* =============================================================================
   DATE DIVIDERS
   ============================================================================= */

/* =============================================================================
   BUBBLES
   ============================================================================= */

.bubble {
    position: relative;
    background-color: var(--background-color-light);
    color: var(--primary-color);
    padding: 15px 18px;
    border-radius: 15px;
    font-family: var(--primary-font);
    line-height: 1.5;
    margin: 20px 0;
    border: 1px solid #f6f6f6;
}

.bubble.transparent {
    background-color: transparent;
}

.bubble.yellow {
    background-color: rgba(238, 172, 16, 0.04);
    border: 1px dotted rgba(184, 115, 51, 0.35);
    font-family: var(--code-font);
    font-size: 13px;
    line-height: 1.8;
}

/* Colored stat numbers inside the yellow bubble */
.stat-c {
    font-size: 15px;
    font-weight: 700;
}
.stat-c--movie    { color: #b87333; }
.stat-c--game     { color: #267cb9; }
.stat-c--music    { color: #823cb4; }
.stat-c--podcast  { color: #b03a6a; }
.stat-c--location { color: #468c5a; }

[data-theme="dark"] .stat-c--movie    { color: #d4963d; }
[data-theme="dark"] .stat-c--game     { color: #7dbfe8; }
[data-theme="dark"] .stat-c--music    { color: #c084fc; }
[data-theme="dark"] .stat-c--podcast  { color: #f28bb8; }
[data-theme="dark"] .stat-c--location { color: #6dbc8a; }

.bubble.yellow .bubble-sep {
    border: none;
    border-top: 1px dotted rgba(184, 115, 51, 0.35);
    background: none;
    height: 0;
    margin: 12px 0 10px;
}

[data-theme="dark"] .bubble.yellow .bubble-sep {
    border-top-color: rgba(212, 150, 61, 0.25);
}

.bubble-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.bubble-note-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 8px;
    background-color: rgba(249, 115, 22, 0.12);
}

.bubble-note-mark .log-highlight {
    margin: 0;
}

.bubble-note-mark .highlight-star {
    width: 14px;
    height: 14px;
}

.bubble-note-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.bubble-note-kicker {
    font-family: var(--code-font);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #f97316;
    line-height: 1.2;
}

.bubble-note-body {
    font-family: var(--primary-font);
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted-color);
}

[data-theme="dark"] .bubble-note-mark {
    background-color: rgba(249, 115, 22, 0.16);
}

/* Country flags in the locations bubble */
.country-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}

.country-flag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px;
    border-radius: 6px;
    background-color: rgba(184, 115, 51, 0.06);
    border: 1px solid rgba(184, 115, 51, 0.18);
    font-family: var(--code-font);
    font-size: 11px;
    line-height: 1.5;
    color: var(--muted-color);
    white-space: nowrap;
}

.country-flag-emoji {
    font-size: 14px;
    line-height: 1;
}

[data-theme="dark"] .country-flag {
    background-color: rgba(212, 150, 61, 0.08);
    border-color: rgba(212, 150, 61, 0.22);
}

/* World map in the locations bubble — collapsed by default */
.world-map-toggle {
    margin: 2px 0 10px;
}

.world-map-toggle > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border: 1px dotted rgba(184, 115, 51, 0.35);
    border-radius: 6px;
    font-family: var(--code-font);
    font-size: 11px;
    line-height: 1.5;
    color: var(--muted-color);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.world-map-toggle > summary::-webkit-details-marker {
    display: none;
}

.world-map-toggle > summary::before {
    content: "▸";
    display: inline-block;
    transition: transform 0.15s ease;
}

.world-map-toggle[open] > summary::before {
    transform: rotate(90deg);
}

.world-map-toggle > summary:hover,
.world-map-toggle > summary:focus-visible {
    color: var(--primary-color);
    border-style: solid;
}

[data-theme="dark"] .world-map-toggle > summary {
    border-color: rgba(212, 150, 61, 0.3);
}

.world-map {
    position: relative;
    margin: 10px 0 4px;
}

.world-map-svg {
    display: block;
    width: 100%;
    height: auto;
}

.world-map-land {
    fill: rgba(184, 115, 51, 0.14);
    stroke: rgba(184, 115, 51, 0.38);
    stroke-width: 0.45;
    stroke-linejoin: round;
}

.world-map-borders {
    fill: none;
    stroke: rgba(184, 115, 51, 0.32);
    stroke-width: 0.35;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Pins live in HTML on top of the map, positioned in % of the viewBox */
.world-map-pins {
    position: absolute;
    inset: 0;
}

.world-map-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: default;
}

.world-map-pin-dot {
    display: block;
    width: var(--dot);
    height: var(--dot);
    border-radius: 50%;
    background-color: #468c5a;
    border: 1.5px solid var(--background-color-light);
    opacity: 0.85;
    transition: transform 0.12s ease, opacity 0.12s ease;
}

.world-map-pin:hover .world-map-pin-dot,
.world-map-pin:focus-visible .world-map-pin-dot {
    transform: scale(1.25);
    opacity: 1;
}

.world-map-pin-label {
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 8px;
    border-radius: 6px;
    background-color: var(--primary-color);
    color: var(--background-color-light);
    font-family: var(--code-font);
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    z-index: 2;
}

.world-map-pin:hover .world-map-pin-label,
.world-map-pin:focus-visible .world-map-pin-label {
    opacity: 1;
}

[data-theme="dark"] .world-map-land {
    fill: rgba(212, 150, 61, 0.16);
    stroke: rgba(212, 150, 61, 0.3);
}

[data-theme="dark"] .world-map-pin-dot {
    background-color: #6dbc8a;
}

.bubble.purple {
    background-color: rgba(87, 17, 238, 0.05);
    border: 1px solid rgba(87, 17, 238, 0.08);
}

.bubble.blue {
    background-color: rgba(17, 91, 238, 0.05);
    border: 1px solid rgba(17, 91, 238, 0.08);
}

.bubble.red {
    background-color: rgba(238, 17, 57, 0.05);
    border: 1px solid rgba(238, 17, 57, 0.08);
}

.bubble h1,
.bubble h2,
.bubble h3,
.bubble h4,
.bubble h5,
.bubble h6 {
    color: inherit;
    margin: 0 0 10px;
}


/* =============================================================================
   BOOKMARKS — CARDS VIEW
   ============================================================================= */

.bookmarks-bubble.hidden {
    display: none;
}


/* =============================================================================
   BADGES
   ============================================================================= */

/* =============================================================================
   TAGS
   ============================================================================= */

.tag {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--control-bg);
    color: var(--control-color);
    font-family: var(--code-font);
    font-weight: 600;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 6px;
    margin: 4px 10px 0 0;
    white-space: nowrap;
}

.tag.small {
    font-size: 11px;
    padding: 3px 8px;
    margin-right: 5px;
}

.tag:last-child {
    margin-right: 0;
}

.tag:hover {
    background-color: var(--control-bg-hover);
}

.tag img,
.tag span {
    vertical-align: middle;
    width: 16px;
    height: 16px;
}


/* =============================================================================
   BUTTONS
   ============================================================================= */

button {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--control-bg);
    color: var(--control-color);
    font-family: var(--code-font);
    font-weight: 600;
    font-size: 10px;
    white-space: nowrap;
    border-radius: 6px;
    border: 1px solid var(--control-border);
    padding: 3px 8px;
    margin: 4px 10px 0 0;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

button:hover {
    background-color: var(--control-bg-hover);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

button:focus {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
    box-shadow: none;
}

button:disabled {
    background-color: var(--background-color-light);
    color: var(--muted-color);
    cursor: not-allowed;
    border-color: var(--border-color);
}


.view-btn.active {
    /* A warm pill, like the category tabs in the LOG header — the inverted
       dark fill was the only place on the site that flipped the colours */
    background-color: rgba(184, 115, 51, 0.11);
    color: #b87333;
    border-color: rgba(184, 115, 51, 0.32);
}


/* =============================================================================
   LIST TABLE
   ============================================================================= */

.movie-list-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.movie-list-table thead th {
    font-family: var(--code-font);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-color);
    padding: 0 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.movie-list-table thead th.ml-date {
    text-align: right;
}

.movie-list-table tr {
    border-bottom: 1px solid var(--border-color);
}

.movie-list-table tr:last-child {
    border-bottom: none;
}

.movie-list-table td {
    padding: 8px 6px;
    vertical-align: middle;
}


/* Column: title */
.ml-title {
    width: 100%;
}

.ml-title a {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 14px;
}

.ml-title a:hover {
    text-decoration: underline;
}

/* Column: date */
.ml-date {
    font-family: var(--code-font);
    font-size: 11px;
    color: var(--muted-color);
    white-space: nowrap;
    text-align: right;
}


/* =============================================================================
   BOOKMARKS — LIST VIEW
   ============================================================================= */

tr.bookmarks-bubble {
    display: table-row;
    background-color: transparent;
    border-radius: 0;
    border: none;
    padding: 0;
    margin: 0;
}

tr.bm-row td {
    transition: background-color 0.18s ease;
}

tr.bm-row:hover td {
    background-color: var(--row-hover-bg);
}

/* =============================================================================
   POSTS — PAGE TAGLINE (JetBrains Mono heading + greeting bubble)
   ============================================================================= */

.font-mono {
    font-family: var(--code-font);
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: -0.02em;
}

.bubble.font-mono {
    font-family: var(--code-font);
    font-size: 13px;
    line-height: 1.7;
}


/* =============================================================================
   POSTS — LIST VIEW
   ============================================================================= */

.post-list-content {
    width: 100%;
    vertical-align: top;
    padding-top: 10px;
    padding-bottom: 10px;
}

.post-list-content > a {
    color: var(--primary-color);
    text-decoration: none;
    font-family: var(--code-font);
    font-size: 14px;
    font-weight: 600;
}

.post-list-content > a:hover {
    color: var(--secondary-color);
    text-decoration: none;
}

.post-list-desc {
    font-size: 12px;
    color: var(--text-description);
    margin-top: 3px;
    line-height: 1.4;
}


.bm-content {
    vertical-align: top;
    padding-top: 10px;
    padding-bottom: 10px;
}

.bm-content h3 {
    font-family: var(--code-font);
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--primary-color);
}

.bm-content h3 small {
    font-size: 9px;
    font-weight: 400;
    color: var(--muted-color);
}

.bm-content h3 a {
    color: var(--primary-color);
    text-decoration: none;
}

.bm-content h3 a:hover {
    text-decoration: underline;
}

.bm-content p {
    font-family: var(--primary-font);
    font-size: 11px;
    color: var(--text-description);
    margin: 0;
    line-height: 1.4;
}

.bm-content blockquote {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font-family: var(--primary-font);
    font-size: 11px;
    color: var(--text-description);
    line-height: 1.4;
}

.bm-content blockquote p {
    margin: 0;
}


/* =============================================================================
   LOG LIST — TABLE WITH EXPANDABLE ROWS
   (shared by all logs, game, movie, music, location)
   ============================================================================= */

/* No rules between entries: fifty-odd hairlines read as noise. The year
   headings carry the structure, and hover draws the entry's own bounds.
   The base `th, td` border has to be cleared on the cells themselves — a rule
   on `tr` never overrides it. */
/* =============================================================================
   LOG LIST — TABLE
   -----------------------------------------------------------------------------
   Self-contained on purpose. The list used to borrow .movie-list-table and the
   .ml-* column classes from the bookmarks and posts tables, and those shared
   rules kept winning on specificity: the base `th, td` border, the shared cell
   padding and `.ml-title a`'s font size each silently overrode a rule written
   for this list. Nothing here is shared, so nothing here can be overridden from
   outside.
   ============================================================================= */

.log-table {
    width: 100%;
    margin-top: 8px;
    border-collapse: collapse;
    /* The title column takes what the fixed columns leave, which is what lets
       a long title be truncated at all */
    table-layout: fixed;
}

/* Фильтр по таблице — не отдельный виджет над ней, а её же шапка ярусом выше.
   Ни рамки, ни заливки: сплошная коробка с радиусом была единственной на всей
   странице (у баббла пунктир, у ghost-чипов штрих, у таблицы волосяные линии) и
   читалась как форма из админки, наклеенная поверх. Здесь всё — падинги,
   кегль, разрядка, линия снизу — взято у thead, поэтому строка садится в
   таблицу, а не лежит на ней. */
.log-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding: 0 6px 6px;
    border-bottom: 1px solid var(--border-color);
    transition: border-color 0.2s ease;
}

/* Фокус подсвечивает саму линию под строкой: обводки тут нет, и подсказать, что
   поле активно, больше нечем. */
.log-search:focus-within {
    border-bottom-color: var(--secondary-color);
}

.log-search[hidden] {
    display: none;
}

.log-search-field {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 auto;
    min-width: 0;
}

.log-search-icon {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    color: var(--muted-color);
    transition: color 0.2s ease;
}

.log-search:focus-within .log-search-icon {
    color: var(--primary-color);
}

.log-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--code-font);
    font-size: 12px;
    color: var(--primary-color);
}

.log-search-input:focus {
    outline: none;
}

/* Пустое поле набрано ровно как подписи колонок — так оно и есть ещё одна
   подпись. Набранный запрос переключается на кегль содержимого: это уже не
   заголовок, а данные. Регистр не трогаем — печатать «HORROR», когда вводишь
   «horror», незачем. */
.log-search-input::placeholder {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-color);
    opacity: 1;
}

/* Системный крестик очистки в WebKit рисуется своим цветом и в тёмной теме
   светится белым. Убран — Escape делает то же самое. */
.log-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* На /music/ счётчик носит фирменный оранжевый: заголовок раздела, который
   держал этот цвет, убран, и счётчик занял его место. Оттенки взяты у
   .music-kicker, а не у заголовка: тот красился #f97316 в обеих темах, а на
   белом это 2.8:1 — ниже минимума для текста. В светлой берётся та же тёмная
   охра, что у кикера, в тёмной — исходный яркий. */
.music-archive .log-search-count {
    color: #c2410c;
}

[data-theme="dark"] .music-archive .log-search-count {
    color: #f97316;
}

/* Счётчик встаёт на место DATE — по правому краю и той же типографикой. */
.log-search-count {
    margin-left: auto;
    font-family: var(--code-font);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
    color: var(--muted-color);
}

.log-search-empty {
    flex: 1 0 100%;
    margin: 10px 0 0;
    font-family: var(--code-font);
    font-size: 12px;
    color: var(--muted-color);
}

/* Под строкой фильтра своя линия, под шапкой своя. Зазор нужен, чтобы они
   читались как два яруса, а не как одна утолщённая черта. */
.log-search + .log-table {
    margin-top: 12px;
}

/* У архива музыки шапки нет: под чертой фильтра сразу первая строка. Разводить
   нечего, и зазор там читается провалом. */
.log-search + .music-archive-table {
    margin-top: 0;
}

/* Отфильтрованное уходит из потока целиком — и записи, и опустевшие годы. */
.log-table .is-filtered-out {
    display: none;
}

/* Категория, от которой в году ничего не осталось, исчезает вместе со своим
   нулём: «0» в строке итогов — не итог, а мусор. */
.log-year-stat[hidden] {
    display: none;
}

/* Neutralises the base `th, td` rule: its border and padding are for prose
   tables in posts */
.log-table th,
.log-table td {
    padding: 0 6px;
    text-align: left;
    border-bottom: none;
}

.log-table thead th {
    /* 6px, not 8: the shared table put a border on the row as well as the cell,
       and under border-collapse the pair resolved 2px shorter than one alone */
    padding: 0 6px 6px;
    font-family: var(--code-font);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-color);
    border-bottom: 1px solid var(--border-color);
}

.log-table thead th.log-col-cat {
    text-align: center;
}

.log-table thead th.log-col-rating,
.log-table thead th.log-col-date {
    text-align: right;
}

.log-table .log-col-num {
    font-family: var(--code-font);
    font-size: 12px;
    color: var(--muted-color);
    white-space: nowrap;
}

.log-table .log-col-num a {
    color: var(--muted-color);
    text-decoration: none;
}

.log-table .log-col-num a:hover {
    color: var(--secondary-color);
}

/* Every column width lives here and nowhere else. Widths are content-box: the
   12px of horizontal padding from the rule above is added on top. */
.log-table .log-col-num {
    width: 20px;
}

.log-table .log-col-num a {
    font-size: 11px;
}

.log-table .log-col-title {
    width: 100%;
}

/* Wide enough for the word "Category" in its heading: under a fixed layout a
   heading that does not fit spills into the next column */
.log-table .log-col-cat {
    width: 68px;
    text-align: center;
    white-space: nowrap;
}

.log-table .log-col-rating {
    width: 62px;
    text-align: right;
    white-space: nowrap;
}

/* Day and month only — the year is the section heading above */
.log-table .log-col-date {
    width: 52px;
    font-family: var(--code-font);
    font-size: 11px;
    color: var(--muted-color);
    white-space: nowrap;
    text-align: right;
}

/* One divider per entry, and it belongs to the bottom of the whole entry — so
   it travels down with the note as it opens instead of staying pinned under
   the title. Both the `tr` and the `td` rules have to be cleared: under
   border-collapse a row's border outranks `none` on its cells. */
.log-table tbody tr,
.log-table tbody td,
.log-table tbody th {
    border-bottom: none;
}

.log-table .log-detail-row td {
    border-bottom: 1px dotted var(--border-color);
}

.log-row {
    cursor: pointer;
}

/* One line per row: the title alone is clipped, the source label is never
   pushed out. */
.log-title-row {
    display: flex;
    align-items: center;
    min-width: 0;
    line-height: 20px;
}

/* Second line: verdict + note preview */
.log-subtitle-row {
    display: flex;
    align-items: baseline;
    overflow: hidden;
    max-width: 100%;
    margin-top: 3px;
    font-family: var(--primary-font);
    font-size: 11px;
    color: var(--text-description);
    line-height: 1.3;
}

.log-subtitle-row .log-sub-verdict {
    flex: 0 0 auto;
    font-weight: 500;
    color: var(--muted-color);
    white-space: nowrap;
}

.log-subtitle-row .log-sub-preview {
    flex: 1 1 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.log-subtitle-row .log-sub-genre {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-color);
    opacity: 0.7;
    white-space: nowrap;
}

.log-subtitle-row .log-sub-tag {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 500;
    color: var(--muted-color);
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.log-subtitle-row .log-sub-verdict + .log-sub-genre::before,
.log-subtitle-row .log-sub-verdict + .log-sub-tag::before,
.log-subtitle-row .log-sub-genre + .log-sub-tag::before,
.log-subtitle-row .log-sub-verdict + .log-sub-preview::before,
.log-subtitle-row .log-sub-genre + .log-sub-preview::before,
.log-subtitle-row .log-sub-tag + .music-sub-label::before,
.log-subtitle-row .log-sub-genre + .music-sub-label::before {
    content: " · ";
    white-space: pre;
    color: var(--muted-color);
}

.log-table .log-title {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.log-row td {
    padding: 9px 6px;
    vertical-align: middle;
    transition: background-color 0.15s ease;
}

.log-table .log-entry-group:hover .log-row td,
.log-table .log-entry-group:hover .log-detail-cell {
    background-color: var(--row-hover-bg);
}

.log-table .log-entry-group.expanded .log-row td,
.log-table .log-entry-group.expanded .log-detail-cell {
    background-color: var(--background-color-light);
}

.log-row:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: -2px;
}

/* Year: sticks to the top while its year scrolls past. A box-shadow rather
   than a border, because borders on sticky cells drop out under
   border-collapse: collapse. */
.log-year-row th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 24px 6px 6px;
    text-align: left;
    font-family: var(--code-font);
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
    background-color: var(--background-color);
    box-shadow: inset 0 -1px 0 var(--border-color);
}

/* Итоги года — сколько записей каждой категории. По умолчанию
   их не видно: строка цифр, висящая постоянно, спорила бы за внимание с самой
   таблицей. Проявляются при наведении на строку года — она sticky и держится
   вверху, пока её год листается, так что навести на неё легко в любой момент. */
.log-year-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.log-year-stats {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.log-year-row:hover .log-year-stats,
.log-year-row:focus-within .log-year-stats {
    opacity: 1;
}

/* Там, где наведения нет вовсе, цифры показываются всегда: иначе на телефоне их
   не достать никак. */
@media (hover: none) {
    .log-year-stats {
        opacity: 1;
    }
}

/* Цвет иконки и числа приходит из .stat-c--<категория>: палитра там уже задана
   для обеих тем. Сам .stat-c не подключаем — он тянет свои 15px/700 из жёлтого
   баббла, а здесь цифры должны быть тише года. */
.log-year-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.log-year-stat .cat-icon {
    width: 11px;
    height: 11px;
}


/* Column: title */
.log-title {
    font-family: var(--code-font);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--primary-color);
}

/* The source, named rather than pointed at: a smaller sibling of the category
   tags above the table. Quiet until its row is hovered or focused. */
.log-table .log-ext {
    display: inline-block;
    flex: 0 0 auto;
    margin-left: 7px;
    padding: 1px 4px;
    border-radius: 4px;
    background-color: transparent;
    color: var(--muted-color);
    font-family: var(--code-font);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.5;
    vertical-align: 1px;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.log-table .log-entry-group:hover .log-ext,
.log-table .log-ext:focus-visible {
    background-color: var(--control-bg);
    color: var(--control-color);
}

.log-table .log-ext:hover {
    opacity: 1;
    color: var(--control-color);
    background-color: var(--control-bg-hover);
    text-decoration: none;
}

/* Rating: five pip dots — filled / half / empty */
.log-rating-pips {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    vertical-align: middle;
}

.pip {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.pip-full {
    background-color: var(--primary-color);
}

.pip-half {
    background: linear-gradient(to right, var(--primary-color) 50%, var(--border-color) 50%);
}

.pip-empty {
    background-color: var(--border-color);
}


/* =============================================================================
   LOG LIST — THE OPEN NOTE
   ============================================================================= */

.log-table .log-detail-cell {
    padding: 0 6px;
    transition: background-color 0.15s ease;
}

/* 0fr → 1fr animates a height the browser can't otherwise interpolate */
.log-detail-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
}

.log-entry-group.expanded .log-detail-wrap {
    grid-template-rows: 1fr;
}

.log-detail-inner {
    overflow: hidden;
}

.log-detail-body {
    padding: 4px 12px 20px 46px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.log-detail-main {
    flex: 1;
    min-width: 0;
    max-width: 52ch;
}

.log-detail-poster {
    flex: 0 0 auto;
    width: 72px;
    border-radius: 6px;
    object-fit: cover;
    object-position: top;
    margin-top: 2px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Слабее, чем у превью локаций: те открываются во весь экран по клику, а постер
   никуда не ведёт, и обещать ему нечего. Здесь движение только оживляет. */
.log-detail-poster:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}


/* The note itself: a hanging quote mark in the gutter instead of a rule */
.log-note-body {
    position: relative;
}

.log-note-body blockquote {
    position: relative;
    border: none;
    border-radius: 0;
    background: none;
    margin: 0;
    padding: 0;
}

.log-note-body blockquote::before {
    content: "“";
    position: absolute;
    left: -28px;
    top: -6px;
    /* A serif face draws a real curly quote; Rubik's is a pair of tick marks */
    font-family: Georgia, "Times New Roman", serif;
    font-size: 40px;
    line-height: 1;
    color: var(--muted-color);
    opacity: 0.5;
}

.log-note-body p {
    margin: 0 0 8px;
    font-family: var(--primary-font);
    font-size: 13px;
    line-height: 1.72;
    color: var(--text-heading-sub);
}

.log-note-body p:last-child {
    margin-bottom: 0;
}

.log-note-body a {
    color: var(--secondary-color);
}

.log-note-body iframe {
    width: 100%;
    border-radius: 8px;
}

.log-note-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.log-thumb {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.9;
    transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.log-thumb:hover {
    transform: scale(1.05);
    opacity: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.log-detail-foot {
    margin-top: 12px;
}

.log-permalink {
    font-family: var(--code-font);
    font-size: 10.5px;
    color: var(--muted-color);
    text-decoration: none;
}

.log-permalink:hover {
    color: var(--secondary-color);
}

@media (prefers-reduced-motion: reduce) {
    .log-detail-wrap,
    .log-ext,
    .log-thumb,
    .log-detail-poster,
    .log-row td,
    .menu-icon,
    .menu-nav a::after,
    .tag,
    .log-cats .tag .cat-icon,
    .log-cats .tag .highlight-star,
    .theme-icon {
        transition: none;
    }

    /* Одного отключения перехода мало: без него декоративный сдвиг просто
       происходит рывком, что для этой настройки ничем не лучше. Движение,
       которое ничего не сообщает, здесь убирается совсем — в отличие от черты
       под пунктом меню, она говорит, куда ты попадёшь. */
    .menu-icon:hover,
    .menu-icon:active,
    .log-thumb:hover,
    .log-detail-poster:hover,
    .log-cats .tag:hover,
    .tag[data-tag]:hover,
    .tag-reset:hover,
    .log-cats .tag:hover .cat-icon,
    .log-cats .tag:hover .highlight-star,
    .theme-toggle:hover .theme-icon,
    .theme-toggle:active .theme-icon {
        transform: none;
    }
}


/* =============================================================================
   LOG — SINGLE ENTRY PAGE
   ============================================================================= */

.log-entry-page {
    background-color: var(--background-color-light);
    border: 1px dotted var(--border-color);
    border-radius: 16px;
    padding: 20px 22px 24px;
    margin-bottom: 20px;
}

.log-entry-page.is-highlight {
    border-color: rgba(184, 115, 51, 0.4);
}

[data-theme="dark"] .log-entry-page.is-highlight {
    border-color: rgba(212, 150, 61, 0.35);
}

/* Header: breadcrumb + external link */
.lep-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.lep-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--code-font);
    font-size: 11px;
    color: var(--muted-color);
}

.lep-breadcrumb a:first-child {
    color: var(--muted-color);
    text-decoration: none;
}

.lep-breadcrumb a:first-child:hover {
    color: var(--secondary-color);
}

.lep-breadcrumb > span {
    color: var(--border-color);
}

/* Category badge with colour (used in header breadcrumb) */
.lep-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 6px;
    font-family: var(--code-font);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.lep-cat-badge:hover { opacity: 0.75; text-decoration: none; }

.lep-cat-badge .cat-icon { width: 12px; height: 12px; }

.lep-cat-badge--movie    { background-color: rgba(184, 115, 51, 0.12); color: #b87333; }
.lep-cat-badge--game     { background-color: rgba(38, 124, 185, 0.12); color: #267cb9; }
.lep-cat-badge--music    { background-color: rgba(130, 60, 180, 0.12); color: #823cb4; }
.lep-cat-badge--podcast  { background-color: rgba(176, 58, 106, 0.12); color: #b03a6a; }
.lep-cat-badge--location { background-color: rgba(70, 140, 90, 0.12);  color: #468c5a; }

[data-theme="dark"] .lep-cat-badge--movie    { background-color: rgba(212, 150, 61, 0.13);  color: #d4963d; }
[data-theme="dark"] .lep-cat-badge--game     { background-color: rgba(125, 191, 232, 0.10); color: #7dbfe8; }
[data-theme="dark"] .lep-cat-badge--music    { background-color: rgba(192, 132, 252, 0.10); color: #c084fc; }
[data-theme="dark"] .lep-cat-badge--podcast  { background-color: rgba(242, 139, 184, 0.10); color: #f28bb8; }
[data-theme="dark"] .lep-cat-badge--location { background-color: rgba(109, 188, 138, 0.10); color: #6dbc8a; }

/* External link button */
.lep-ext-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--code-font);
    font-size: 11px;
    font-weight: 600;
    color: var(--muted-color);
    text-decoration: none;
    padding: 3px 9px;
    border-radius: 6px;
    background-color: var(--control-bg);
    border: 1px solid var(--control-border);
    transition: color 0.15s, background-color 0.15s;
}

.lep-ext-link:hover {
    color: var(--primary-color);
    background-color: var(--control-bg-hover);
    text-decoration: none;
}

/* Body: info + optional poster */
.lep-body {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.lep-info {
    flex: 1;
    min-width: 0;
}

.lep-poster {
    flex: 0 0 auto;
    width: 90px;
    border-radius: 12px;
    object-fit: cover;
    object-position: top;
    display: block;
    align-self: flex-start;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Title */
.lep-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.lep-icon {
    font-size: 28px;
    line-height: 1;
    flex: 0 0 auto;
}

.lep-title {
    font-family: var(--primary-font);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--primary-color);
    margin: 0;
}

/* Verdict */
.lep-verdict {
    font-family: var(--primary-font);
    font-size: 13px;
    color: var(--text-description);
    margin: 0 0 12px;
    line-height: 1.4;
}

/* Meta row: rating pips + tag + date */

.lep-genre {
    font-family: var(--code-font);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-color);
    background-color: var(--control-bg);
    padding: 2px 8px;
    border-radius: 20px;
}


.lep-tag {
    display: inline-block;
    font-family: var(--code-font);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-color);
    background-color: var(--control-bg);
    padding: 3px 10px;
    border-radius: 20px;
}


.lep-tag-line {
    margin: 6px 0 4px;
}

.lep-date {
    display: block;
    font-family: var(--code-font);
    font-size: 11px;
    color: var(--muted-color);
    margin-bottom: 8px;
}

/* Dotted divider */
.lep-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 20px 0;
}

.lep-divider--dotted {
    border-top-style: dotted;
}

.lep-footer-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}


/* Content */
.lep-content {
    font-family: var(--primary-font);
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-heading-sub);
}

.lep-content blockquote {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    color: inherit;
}

.lep-content p {
    margin: 0 0 12px;
}

.lep-content p:last-child { margin-bottom: 0; }

.lep-content a { color: var(--secondary-color); }

/* Prev / next navigation */
.lep-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.lep-nav a {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 46%;
    font-family: var(--code-font);
    font-size: 11px;
    color: var(--muted-color);
    text-decoration: none;
    padding: 7px 10px;
    border-radius: 8px;
    background-color: var(--background-color-light);
    border: 1px dotted var(--border-color);
    transition: color 0.15s, border-color 0.15s;
}

.lep-nav a:hover {
    color: var(--primary-color);
    border-color: var(--muted-color);
    text-decoration: none;
}

.lep-nav-next { margin-left: auto; }

.lep-nav-arrow {
    flex: 0 0 auto;
    color: var(--border-color);
}

.lep-nav a:hover .lep-nav-arrow {
    color: var(--muted-color);
}

.lep-nav-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.bm-tags {
    padding-left: 8px;
    padding-top: 12px;
    white-space: nowrap;
    vertical-align: top;
}


/* =============================================================================
   FOOTNOTES
   ============================================================================= */

.footnotes {
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid #eaecef;
    font-size: 0.9em;
    color: #666;
}

.footnotes p {
    margin: 0.5em 0;
}

.footnotes a,
.footnote-ref,


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


.footnote-backref {
    margin-left: 0.5em;
}


/* =============================================================================
   UTILITIES
   ============================================================================= */

.full-width-rounded-image {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    object-fit: cover;
    filter: grayscale(90%);
    position: relative;
}


/* =============================================================================
   DARK THEME
   ============================================================================= */

:root {
    color-scheme: light;
}

/* Тёмной теме нужен свой color-scheme, иначе браузер продолжает рисовать по
   светлым правилам всё, что рисует сам: полосы прокрутки, поля ввода, меню
   выбора. Тема переключается атрибутом, а не системной настройкой, поэтому
   само по себе это не подхватывается. */
[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="dark"] {
    --primary-color:          #ddd0c8;
    --secondary-color:        #7dbfe8;
    --muted-color:            #8a7568;
    --background-color:       #1c1411;
    --background-color-light: #261d19;
    --code-background:        #2e2420;
    --border-color:           #3e2e28;
    color-scheme: dark;

    --text-heading-sub:  #c8bdb8;
    --text-label:        var(--muted-color);
    --text-code-color:   #c8bdb8;
    --text-strong:       #f0e8e2;
    --text-muted-alt:    var(--muted-color);
    --text-description:  #a89888;
    --link-hover:        #9dd0f0;
    --nav-hover-bg:      #3a2b25;
    --row-hover-bg:      var(--code-background);
    --control-bg:        #3a2b25;
    --control-color:     #c8bdb8;
    --control-bg-hover:  #4a3830;
    --control-border:    #4a3830;
    --wordcode-bg:       var(--code-background);
    --wordcode-color:    #c8bdb8;
    --wordcode-border:   #4a3830;
}

/* Smooth transitions on theme switch — only elements without existing transitions */
body,
.menu-container,
.bubble,
.tag {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease,
                transform 0.15s ease;
}

/* Подъём — только у чипов, по которым кликают: вкладки логов, фильтр по тегам и
   Reset. Ярлыки навыков в резюме на вид такие же, но никуда не ведут, и
   отзываться на наведение им незачем. */
.log-cats .tag:hover,
.tag[data-tag]:hover,
.tag-reset:hover {
    transform: translateY(-1px);
}

/* Нажатие возвращает чип на место — иначе клик по нему ничем не отзывается. */
.log-cats .tag:active,
.tag[data-tag]:active,
.tag-reset:active {
    transform: translateY(0);
}

/* Table borders in dark mode */
[data-theme="dark"] td,
[data-theme="dark"] th {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] blockquote {
    border-left-color: #5a6b7a;
    color: #b8a89e;
}

[data-theme="dark"] hr {
    background: var(--border-color);
}

[data-theme="dark"] kbd {
    background-color: var(--code-background);
    border-color: #5a4a44;
    border-bottom-color: var(--border-color);
    box-shadow: inset 0 -1px 0 var(--border-color);
    color: #c0b0a8;
}

/* Navigation */
[data-theme="dark"] .menu-nav a:hover {
    color: var(--primary-color);
}

/* Bubbles */
[data-theme="dark"] .bubble {
    border-color: #2e2420;
}

[data-theme="dark"] .bubble.yellow {
    background-color: rgba(160, 109, 0, 0.07);
    border-color: rgba(212, 150, 61, 0.25);
}

[data-theme="dark"] .bubble.purple {
    background-color: rgba(87, 17, 238, 0.07);
    border-color: rgba(87, 17, 238, 0.12);
}

[data-theme="dark"] .bubble.blue {
    background-color: rgba(17, 91, 238, 0.07);
    border-color: rgba(17, 91, 238, 0.12);
}

[data-theme="dark"] .bubble.red {
    background-color: rgba(238, 17, 57, 0.07);
    border-color: rgba(238, 17, 57, 0.12);
}

/* Buttons — only the dark-specific overrides that can't be handled by variables */
[data-theme="dark"] button:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}


[data-theme="dark"] .view-btn.active {
    background-color: rgba(212, 150, 61, 0.14);
    color: #d4963d;
    border-color: rgba(212, 150, 61, 0.32);
}

/* Log expandable blockquote — border only (color via variable) */
[data-theme="dark"] .log-note-body blockquote {
    border-left-color: #5a4a44;
}

/* Misc */
[data-theme="dark"] .footnotes {
    border-top-color: var(--border-color);
    color: #7a6a62;
}

[data-theme="dark"] .footnotes a,
[data-theme="dark"] .footnote-ref,


/* Theme toggle button in nav */
.theme-toggle {
    /* Set apart from the links: sitting flush against them it read as another
       menu item rather than a control */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 6px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--primary-color);
    cursor: pointer;
    border-radius: 8px;
    line-height: 1;
    box-shadow: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.theme-toggle:hover {
    background-color: var(--border-color);
    box-shadow: none;
}

.theme-toggle:focus {
    box-shadow: none;
    outline: none;
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

.theme-icon {
    display: block;
    width: 15px;
    height: 15px;
    color: var(--muted-color);
    transition: color 0.2s ease, transform 0.2s ease;
}

.theme-toggle:hover .theme-icon {
    color: var(--primary-color);
    transform: rotate(20deg);
}

.theme-toggle:active .theme-icon {
    transform: rotate(20deg) scale(0.88);
}

/* Only one of the two is ever shown */
.theme-icon--sun {
    display: none;
}

[data-theme="dark"] .theme-icon--moon {
    display: none;
}

[data-theme="dark"] .theme-icon--sun {
    display: block;
}


/* =============================================================================
   MEDIA QUERIES
   ============================================================================= */

@media (min-width: 601px) {
    .menu-container {
        width: 600px;
    }
}

@media screen and (max-width: 600px) {
    /* The category is one tap away via the tabs above — the column can go */
    .ml-cat {
        display: none;
    }

    .log-detail-body {
        padding-left: 28px;
    }

    .log-detail-poster {
        display: none;
    }

    .log-note-body blockquote::before {
        left: -20px;
        font-size: 28px;
    }

    .log-nav a {
        max-width: 48%;
    }
}

@media print, screen and (max-width: 600px) {
    .wrapper,
    header,
    section,
    footer {
        width: auto;
        float: none;
        position: static;
    }

    section {
        border: 1px solid var(--border-color);
        border-width: 1px 0;
        padding: 20px 0;
        margin: 0 0 20px;
    }

    /* Правило выше написано для section как контейнера страницы. Разделы внутри
       колонки — закладок и музыки — наследовали от него рамку сверху и снизу,
       и на узком экране она читалась как лишние черты между блоками. */
    .bm-section,
    .music-hero,
    .music-archive,
    .music-playlists {
        border: 0;
        padding: 0;
    }

    .bm-section + .bm-section {
        margin-top: 26px;
    }

    .music-hero,
    .music-archive,
    .music-playlists {
        margin-top: 26px;
    }

    .music-hero {
        border: 1px dashed rgba(84, 67, 58, 0.28);
        padding: 14px;
    }

    [data-theme="dark"] .music-hero {
        border-color: rgba(255, 255, 255, 0.16);
    }

    .music-hero.is-favourite,
    [data-theme="dark"] .music-hero.is-favourite {
        border-color: rgba(249, 115, 22, 0.45);
    }

    header a small {
        display: inline;
    }

    header ul {
        position: absolute;
        top: 52px;
    }

    body {
        word-wrap: break-word;
        font-size: 14px;
    }

    small {
        font-size: 11px;
    }

    pre,
    code {
        word-wrap: normal;
    }

    .bm-row {
        font-size: 13px;
    }

    .log-table .log-col-cat,
    .log-table thead th.log-col-cat {
        display: none;
    }
}

@media print {
    body {
        font-size: 12pt;
        color: #444;
    }
}


/* =============================================================================
   CATEGORY ICONS (inline SVG, Phosphor Fill — MIT)
   ============================================================================= */

/* A fixed square box, aligned by flex rather than by baseline: otherwise every
   silhouette sits at its own height and the labels next to them jitter. */
.cat-icon {
    display: block;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

/* Scoped to .log-cats so the bookmark and post tags keep their own size */
.log-cats .tag.small {
    font-size: 13px;
    padding: 5px 11px;
    border-radius: 8px;
    margin-right: 6px;
}

.log-cats .tag.small a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Глобальное a:hover подчёркивает текст ссылки — внутри чипа это лишнее: он и
   так целиком отзывается подъёмом и цветом, а черта под подписью разрезает
   пилюлю пополам. Снято только здесь: обычным ссылкам подчёркивание нужно. */
.log-cats .tag a:hover,
.log-cats .tag a:focus {
    text-decoration: none;
}

.log-cats .cat-icon {
    width: 16px;
    height: 16px;
}

.log-cats .tag .cat-icon,
.log-cats .tag .highlight-star {
    transition: transform 0.2s ease;
}

.log-cats .tag:hover .cat-icon,
.log-cats .tag:hover .highlight-star {
    transform: scale(1.12);
}

/* Category tag colours — mirrors the table cat-pill scheme */
.log-cats .cat-tag--movie    { background-color: rgba(184, 115, 51, 0.12); }
.log-cats .cat-tag--game     { background-color: rgba(38, 124, 185, 0.12); }
.log-cats .cat-tag--music    { background-color: rgba(130, 60, 180, 0.12); }
.log-cats .cat-tag--podcast  { background-color: rgba(176, 58, 106, 0.12); }
.log-cats .cat-tag--location { background-color: rgba(70, 140, 90, 0.12); }

.log-cats .cat-tag--movie    .cat-icon { color: #b87333; }
.log-cats .cat-tag--game     .cat-icon { color: #267cb9; }
.log-cats .cat-tag--music    .cat-icon { color: #823cb4; }
.log-cats .cat-tag--podcast  .cat-icon { color: #b03a6a; }
.log-cats .cat-tag--location .cat-icon { color: #468c5a; }

.log-cats .cat-tag--movie:hover    { background-color: rgba(184, 115, 51, 0.20); }
.log-cats .cat-tag--game:hover     { background-color: rgba(38, 124, 185, 0.20); }
.log-cats .cat-tag--music:hover    { background-color: rgba(130, 60, 180, 0.20); }
.log-cats .cat-tag--podcast:hover  { background-color: rgba(176, 58, 106, 0.20); }
.log-cats .cat-tag--location:hover { background-color: rgba(70, 140, 90, 0.20); }

/* Best — срез по highlight, а не категория, поэтому он не берёт заливку из
   палитры разделов, а носит ghost-стиль (см. .tag-ghost). Единственный цвет
   здесь — сама звезда, тот же оранжевый, которым помечены записи.

   Рамка добавляет пилюле 2px по обеим осям, а соседние табы её не имеют:
   padding урезан на пиксель, чтобы Best не оказался выше остального ряда. */
.log-cats .tag-ghost {
    padding: 4px 10px;
}

.log-cats .tag-ghost a         { color: var(--muted-color); }
.log-cats .tag-ghost:hover a   { color: var(--primary-color); }

/* Звезда в табах живёт по правилам иконок категорий, а не по своим: в списке
   она 12px, здесь у соседей 16px. Плюс лишний пиксель на оптику — у звезды
   лучи тонкие, и в равном боксе она читается мельче сплошного силуэта.
   Отступ обнулён: расстояние до подписи задаёт gap самой ссылки. */
.log-cats .cat-tag--best .log-highlight { margin-right: 0; }

.log-cats .cat-tag--best .highlight-star {
    width: 17px;
    height: 17px;
    vertical-align: 0;
}

/* Dark mode */
[data-theme="dark"] .log-cats .cat-tag--movie    { background-color: rgba(212, 150, 61, 0.13); }
[data-theme="dark"] .log-cats .cat-tag--game     { background-color: rgba(125, 191, 232, 0.10); }
[data-theme="dark"] .log-cats .cat-tag--music    { background-color: rgba(192, 132, 252, 0.10); }
[data-theme="dark"] .log-cats .cat-tag--podcast  { background-color: rgba(242, 139, 184, 0.10); }
[data-theme="dark"] .log-cats .cat-tag--location { background-color: rgba(109, 188, 138, 0.10); }

[data-theme="dark"] .log-cats .cat-tag--movie    .cat-icon { color: #d4963d; }
[data-theme="dark"] .log-cats .cat-tag--game     .cat-icon { color: #7dbfe8; }
[data-theme="dark"] .log-cats .cat-tag--music    .cat-icon { color: #c084fc; }
[data-theme="dark"] .log-cats .cat-tag--podcast  .cat-icon { color: #f28bb8; }
[data-theme="dark"] .log-cats .cat-tag--location .cat-icon { color: #6dbc8a; }

[data-theme="dark"] .log-cats .cat-tag--movie:hover    { background-color: rgba(212, 150, 61, 0.22); }
[data-theme="dark"] .log-cats .cat-tag--game:hover     { background-color: rgba(125, 191, 232, 0.18); }
[data-theme="dark"] .log-cats .cat-tag--music:hover    { background-color: rgba(192, 132, 252, 0.18); }
[data-theme="dark"] .log-cats .cat-tag--podcast:hover  { background-color: rgba(242, 139, 184, 0.18); }
[data-theme="dark"] .log-cats .cat-tag--location:hover { background-color: rgba(109, 188, 138, 0.18); }

.log-table .log-col-cat .cat-icon {
    width: 16px;
    height: 16px;
    margin: 0 auto;
    color: inherit;
}

/* Category pill — rounded badge wrapping the icon */
.cat-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.log-table .log-entry-group:hover .cat-pill {
    opacity: 1;
}

/* Category colours */
.cat-pill--movie    { background-color: rgba(184, 115, 51, 0.12); }
.cat-pill--game     { background-color: rgba(38, 124, 185, 0.12); }
.cat-pill--music    { background-color: rgba(130, 60, 180, 0.12); }
.cat-pill--podcast  { background-color: rgba(176, 58, 106, 0.12); }
.cat-pill--location { background-color: rgba(70, 140, 90, 0.12); }

.log-table .log-col-cat .cat-pill--movie    .cat-icon { color: #b87333; }
.log-table .log-col-cat .cat-pill--game     .cat-icon { color: #267cb9; }
.log-table .log-col-cat .cat-pill--music    .cat-icon { color: #823cb4; }
.log-table .log-col-cat .cat-pill--podcast  .cat-icon { color: #b03a6a; }
.log-table .log-col-cat .cat-pill--location .cat-icon { color: #468c5a; }

/* Dark mode — brighter tints against dark background */
[data-theme="dark"] .cat-pill--movie    { background-color: rgba(212, 150, 61, 0.13); }
[data-theme="dark"] .cat-pill--game     { background-color: rgba(125, 191, 232, 0.10); }
[data-theme="dark"] .cat-pill--music    { background-color: rgba(192, 132, 252, 0.10); }
[data-theme="dark"] .cat-pill--podcast  { background-color: rgba(242, 139, 184, 0.10); }
[data-theme="dark"] .cat-pill--location { background-color: rgba(109, 188, 138, 0.10); }

[data-theme="dark"] .log-table .log-col-cat .cat-pill--movie    .cat-icon { color: #d4963d; }
[data-theme="dark"] .log-table .log-col-cat .cat-pill--game     .cat-icon { color: #7dbfe8; }
[data-theme="dark"] .log-table .log-col-cat .cat-pill--music    .cat-icon { color: #c084fc; }
[data-theme="dark"] .log-table .log-col-cat .cat-pill--podcast  .cat-icon { color: #f28bb8; }
[data-theme="dark"] .log-table .log-col-cat .cat-pill--location .cat-icon { color: #6dbc8a; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The recommendation mark sits next to the title in the list,
   and next to the rating pips on the entry page */
.log-highlight {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-right: 5px;
}

.highlight-star {
    width: 12px;
    height: 12px;
    fill: #f97316;
    vertical-align: -1px;
}

.log-rating-pips .log-highlight {
    margin-right: 3px;
}


/* =============================================================================
   CV PAGE
   Built in the same language as the LOG section: mono headings, uppercase
   column labels, category colours, dotted separators. The experience table
   reuses .log-table for its base rules; only the columns are redefined.
   ============================================================================= */

/* ---- Facts block inside the yellow bubble ---- */

.cv-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 7px 18px;
    margin: 0;
}

.cv-fact {
    display: contents;
}

.cv-facts dt {
    font-family: var(--code-font);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-color);
    align-self: center;
}

.cv-facts dd {
    margin: 0;
    font-family: var(--code-font);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}


.cv-elsewhere {
    gap: 14px;
}

/* ---- Section headings ---- */

.cv-section {
    margin: 34px 0 12px;
    font-family: var(--code-font);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-color);
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border-color);
}

/* ---- Skills: one row per group, colour-coded like log categories ---- */

.cv-skills {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 10px 18px;
    align-items: baseline;
}

.cv-skill-group {
    display: contents;
}

.cv-skill-label {
    font-family: var(--code-font);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-color);
    padding-top: 4px;
}

.cv-skill-items {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.cv-chip {
    padding: 2px 9px;
    border-radius: 6px;
    font-family: var(--code-font);
    font-size: 11px;
    line-height: 1.6;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* Same hues the LOG categories use, so the two pages read as one system */
.cv-chip--lang      { color: #267cb9; background-color: rgba(38, 124, 185, 0.09);  border-color: rgba(38, 124, 185, 0.18); }
.cv-chip--framework { color: #b87333; background-color: rgba(184, 115, 51, 0.09);  border-color: rgba(184, 115, 51, 0.2); }
.cv-chip--state     { color: #823cb4; background-color: rgba(130, 60, 180, 0.09);  border-color: rgba(130, 60, 180, 0.18); }
.cv-chip--data      { color: #468c5a; background-color: rgba(70, 140, 90, 0.09);   border-color: rgba(70, 140, 90, 0.2); }
.cv-chip--tool      { color: var(--text-muted-alt); background-color: rgba(120, 120, 120, 0.07); border-color: rgba(120, 120, 120, 0.16); }
.cv-chip--ai        { color: #c2410c; background-color: rgba(249, 115, 22, 0.09);  border-color: rgba(249, 115, 22, 0.2); }

[data-theme="dark"] .cv-chip--lang      { color: #7dbfe8; background-color: rgba(125, 191, 232, 0.1); border-color: rgba(125, 191, 232, 0.2); }
[data-theme="dark"] .cv-chip--framework { color: #d4963d; background-color: rgba(212, 150, 61, 0.1);  border-color: rgba(212, 150, 61, 0.22); }
[data-theme="dark"] .cv-chip--state     { color: #c084fc; background-color: rgba(192, 132, 252, 0.1); border-color: rgba(192, 132, 252, 0.2); }
[data-theme="dark"] .cv-chip--data      { color: #6dbc8a; background-color: rgba(109, 188, 138, 0.1); border-color: rgba(109, 188, 138, 0.2); }
[data-theme="dark"] .cv-chip--tool      { color: var(--muted-color); background-color: rgba(200, 200, 200, 0.07); border-color: rgba(200, 200, 200, 0.14); }
[data-theme="dark"] .cv-chip--ai        { color: #fb923c; background-color: rgba(251, 146, 60, 0.1);  border-color: rgba(251, 146, 60, 0.2); }

/* ---- Experience table ---- */

.cv-table {
    margin-top: 4px;
}

/* table-layout is fixed, so every column but the flexible one needs a width */
.cv-table .cv-col-mark    { width: 42px; vertical-align: top; padding-top: 12px; }
.cv-table .cv-col-company { width: 100%; vertical-align: top; padding-top: 10px; }
.cv-table .cv-col-span    { width: 150px; vertical-align: top; padding-top: 12px; text-align: right; }
.cv-table .cv-col-where   { width: 118px; vertical-align: top; padding-top: 12px; text-align: right; }

.cv-table thead th.cv-col-span,
.cv-table thead th.cv-col-where {
    text-align: right;
}

/* Platform mark — the same rounded square the LOG list uses for categories */
.cv-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 20px;
    padding: 0 5px;
    border-radius: 6px;
    font-family: var(--code-font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.cv-mark--flutter { background-color: rgba(38, 124, 185, 0.12); color: #267cb9; }
.cv-mark--ios     { background-color: rgba(184, 115, 51, 0.12); color: #b87333; }

[data-theme="dark"] .cv-mark--flutter { background-color: rgba(125, 191, 232, 0.14); color: #7dbfe8; }
[data-theme="dark"] .cv-mark--ios     { background-color: rgba(212, 150, 61, 0.14); color: #d4963d; }

.cv-title-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.cv-company {
    font-family: var(--code-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
}

.cv-site {
    font-family: var(--code-font);
    font-size: 10px;
    color: var(--muted-color);
    opacity: 0.75;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.cv-entry:hover .cv-site {
    opacity: 1;
}

.cv-site:hover {
    color: var(--secondary-color);
    text-decoration: none;
}

.cv-badge {
    padding: 1px 7px;
    border-radius: 20px;
    background-color: rgba(70, 140, 90, 0.13);
    color: #3d7a4e;
    font-family: var(--code-font);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

[data-theme="dark"] .cv-badge {
    background-color: rgba(109, 188, 138, 0.16);
    color: #6dbc8a;
}

.cv-subtitle-row {
    margin-top: 3px;
    font-size: 12px;
    color: var(--text-muted-alt);
}

.cv-aside {
    color: var(--muted-color);
    font-size: 11px;
}

.cv-aside::before {
    content: " · ";
}

/* Dates stack over the duration so the column stays narrow and both align right */
.cv-years,
.cv-duration {
    display: block;
    font-family: var(--code-font);
    white-space: nowrap;
}

.cv-years {
    font-size: 11px;
    color: var(--text-muted-alt);
}

.cv-duration {
    margin-top: 2px;
    font-size: 10px;
    color: var(--muted-color);
    opacity: 0.8;
}

.cv-col-where {
    font-family: var(--code-font);
    font-size: 11px;
    color: var(--muted-color);
    white-space: nowrap;
}

/* A flag emoji is two code points — letter-spacing would break the pair */
.cv-flag {
    letter-spacing: 0;
    margin-right: 4px;
}

/* The note hangs under the company column, indented past the platform mark.
   The dotted rule goes on every cell of the row, not just the note cell —
   otherwise it stops short of the platform-mark column. */
.cv-note-cell {
    padding-bottom: 18px !important;
}

.cv-table .cv-note-row td {
    /* `.log-table tbody td` clears borders for the LOG list and outranks a bare
       class here, so the selector has to carry .cv-table to win */
    border-bottom: 1px dotted rgba(184, 115, 51, 0.34);
}

[data-theme="dark"] .cv-table .cv-note-row td {
    border-bottom-color: rgba(212, 150, 61, 0.3);
}

.cv-table .cv-entry:last-child .cv-note-row td {
    border-bottom: none;
}

/* Breathing room after the rule, before the next company */
.cv-entry + .cv-entry .cv-row td {
    padding-top: 18px;
}

.cv-note {
    max-width: 62ch;
    font-size: 13px;
    line-height: 1.7;
}

.cv-note p {
    margin: 0;
}

.cv-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
}


/* Mobile: the fixed columns do not fit 390px, so dates and location fall back
   to a line under the role, and the skills grid stacks */
.cv-meta-mobile {
    display: none;
}

@media screen and (max-width: 600px) {
    .cv-table .cv-col-span,
    .cv-table thead th.cv-col-span,
    .cv-table .cv-col-where,
    .cv-table thead th.cv-col-where {
        display: none;
    }

    .cv-meta-mobile {
        display: block;
        margin-top: 5px;
        font-family: var(--code-font);
        font-size: 10px;
        color: var(--muted-color);
    }

    /* minmax(0, …), not 1fr: a bare 1fr keeps a max-content minimum and the
       column stretches to the longest chip instead of wrapping */
    .cv-skills,
    .cv-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .cv-skill-label,
    .cv-facts dt {
        padding-top: 10px;
    }

    .cv-note {
        max-width: none;
    }
}


/* ---- Home page: post list ----------------------------------------------- */

/* Post icon, in the spirit of the bookmark headings. Sits outside the link so
   it is not underlined on hover, and opts out of the mono font so the emoji
   keeps its own metrics. */
.post-icon {
    margin-right: 7px;
    font-family: var(--primary-font);
    font-size: 13px;
    line-height: 1;
}

.post-tag-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

/* Ghost pill: an action or a cross-section, not a tag — it sits apart and
   stays quiet until hovered. Used by Reset in the tag filters and by Best in
   the LOGs tabs, which is why the style lives here rather than with either. */
.tag-ghost,
.tag-reset {
    background-color: transparent;
    border: 1px dashed var(--control-border);
    color: var(--muted-color);
}

.tag-ghost:hover,
.tag-reset:hover {
    border-style: solid;
    color: var(--primary-color);
}

/* Reset trails a row of tags and needs the extra gap; Best opens no row */
.tag-reset {
    margin-left: 6px;
}


/* ---- Bookmarks ----------------------------------------------------------- */

/* Раздел закладок. Заголовок повторяет kicker из логов — моно, капсом, оранжевый:
   он делит длинный список на части, но не спорит с названиями самих закладок. */
/* Куда бы ни вёл пункт оглавления — в раздел закладок или в строку года в
   таблице логов, — цель не должна упереться в фиксированное меню. Его нижняя
   кромка на 65px, остальное — небольшой воздух под ней. */
[data-toc] {
    scroll-margin-top: 74px;
}

.bm-section {
    /* Глобальное правило section {} написано для контейнера страницы и задаёт
       ширину, float и нижний отступ. Семантические разделы внутри колонки его
       наследовать не должны — иначе между ними встают пустые провалы. */
    width: auto;
    float: none;
    padding-bottom: 0;
}

.bm-section {
    margin-top: 34px;
}

.bm-section-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
    font-family: var(--code-font);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #f97316;
}

/* Заголовок раздела и его первый элемент читаются как одно целое, поэтому
   зазор под линией убран у обоих видов — и у списка, и у карточек. */
.bm-section .movie-list-table {
    margin-top: 0;
}

/* Подпись в шапке закладок набрана моноширинным, как и весь их bubble.
   В логах тот же элемент остаётся на основном шрифте — отсюда .font-mono. */
.bubble.font-mono .bubble-note-body {
    font-family: var(--code-font);
    letter-spacing: -0.01em;
}

/* Счётчик — служебное число, поэтому он тише подписи и набран табличными цифрами:
   у разделов они выстраиваются в колонку и не пляшут по ширине. */
.bm-section-count,
.toc-count {
    font-size: 10px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--muted-color);
    opacity: 0.8;
}

.bm-section-count::before,
.toc-count::before {
    content: "·";
    margin-right: 5px;
}

/* Дата в списке. Столбец узкий и прижат вправо, цифры табличные — иначе строки
   с разной шириной символов ломают правый край. */
.bm-date {
    width: 68px;
    text-align: right;
    vertical-align: top;
    padding-top: 2px;
    font-family: var(--code-font);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--muted-color);
    white-space: nowrap;
}

/* Эмодзи в начале заголовка — единственная картинка в строке, и в прежнем размере
   она терялась. ::first-letter достаёт её, не трогая название: обёртки вокруг знака
   в markdown закладок нет, а заводить её в 25 файлах ради кегля не стоит.

   Селектор привязан к .bm-section: класс .bm-row носят и строки постов на главной,
   где заголовки крупнее и трогать их незачем. */
.bm-section .bm-row h3::first-letter {
    font-size: 1.5em;
    line-height: 1;
}

/* Строка статистики в шапке. Кегль остаётся прежним — выделены только числа,
   иначе подпись начинает спорить с самим списком. */
.bm-stat {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #f97316;
}

/* Подписи в этом bubble нужен воздух от заголовка: строка стала длиннее одной. */
.bubble.font-mono .bubble-note-copy {
    gap: 5px;
}

/* ---- Оглавление ---------------------------------------------------------- */

/* Оглавление страницы: закладки перечисляют разделы, логи — годы. .wrapper —
   фиксированные 600px по центру, поэтому панель встаёт от середины плюс полширины
   колонки. Ниже 1000px её прячет медиазапрос в конце файла. */
.toc {
    position: fixed;
    top: 50%;
    left: calc(50% + 324px);
    width: 152px;
    transform: translateY(-50%);
    z-index: 10;
}

.toc-title {
    display: block;
    margin-bottom: 10px;
    font-family: var(--code-font);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-color);
    opacity: 0.7;
}

.toc-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Полоска слева отмечает активный пункт. Она нарисована на каждом, но проявляется
   только у текущего — так строка не дёргается по горизонтали при прокрутке. */
.toc-link {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 0 4px 10px;
    border-left: 2px solid transparent;
    font-family: var(--code-font);
    font-size: 11px;
    color: var(--muted-color);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

/* Глобальное a:focus подчёркивает ссылки и по специфичности бьёт одиночный
   класс, поэтому подчёркивание снимается сразу во всех состояниях: клик по
   пункту оставляет фокус, и активный пункт иначе оказывался подчёркнут. */
.toc-link,
.toc-link:hover,
.toc-link:focus,
.toc-link:active,
.toc-link.active {
    text-decoration: none;
}

.toc-link:hover {
    color: var(--primary-color);
    border-left-color: var(--border-color);
}

.toc-link:focus-visible {
    outline: 2px solid #f97316;
    outline-offset: 2px;
    border-radius: 2px;
}

.toc-link.active {
    color: var(--primary-color);
    border-left-color: #f97316;
}

.toc-link.active .toc-count {
    color: #f97316;
    opacity: 1;
}


/* Domain label after the bookmark name. Everything on this site links inward,
   so bookmarks need to say where they actually go — the same job the IMDb and
   Maps labels do in the LOG list. */
.bm-host {
    margin-left: 8px;
    font-family: var(--code-font);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--muted-color);
    opacity: 0.75;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.bm-row:hover .bm-host {
    opacity: 1;
    color: var(--secondary-color);
}


/* ---- Unlisted page ------------------------------------------------------- */

.unlisted-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.unlisted-links li {
    padding: 12px 0;
}

.unlisted-links li + li {
    border-top: 1px dotted rgba(184, 115, 51, 0.26);
}

[data-theme="dark"] .unlisted-links li + li {
    border-top-color: rgba(212, 150, 61, 0.24);
}

.unlisted-links a {
    font-family: var(--code-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

.unlisted-links a:hover {
    color: var(--secondary-color);
}

.unlisted-note {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: var(--text-muted-alt);
}


/* Оглавление живёт в поле справа от 600px-колонки. Когда поля меньше
   ~190px, панель наезжает на текст — там её не показываем вовсе. */
@media screen and (max-width: 1000px) {
    .toc {
        display: none;
    }
}

/* =============================================================================
   MUSIC — релиз месяца, архив и плейлисты
   ============================================================================= */

/* Глобальное section {} задаёт ширину и float для контейнера страницы; блокам
   внутри колонки это не нужно — иначе между ними встают пустые провалы. */
.music-hero,
.music-archive,
.music-playlists {
    width: auto;
    float: none;
    padding-bottom: 0;
    margin-top: 34px;
}

/* Вкладки раздела музыки. Цвет второй берётся от фиолетового логов — он уже
   закреплён за музыкой в палитре категорий, и вкладки читаются как одна семья. */
/* Вкладки выстроены флексом, а не строкой: как инлайновые элементы пилюли
   вставали по базовой линии текста, а она зависит от того, что внутри, и
   соседние вкладки расходились по вертикали на несколько пикселей. */
.music-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

.music-tabs .tag.small {
    margin: 0;
}

.log-cats .cat-tag--playlist        { background-color: rgba(130, 60, 180, 0.10); }
.log-cats .cat-tag--playlist:hover  { background-color: rgba(130, 60, 180, 0.18); }

[data-theme="dark"] .log-cats .cat-tag--playlist       { background-color: rgba(192, 132, 252, 0.10); }
[data-theme="dark"] .log-cats .cat-tag--playlist:hover { background-color: rgba(192, 132, 252, 0.18); }

/* Текущая вкладка отмечена рамкой, а не заливкой: заливка у каждой своя. */
.log-cats .tag.is-current {
    box-shadow: inset 0 0 0 1px var(--muted-color);
}

/* ---- Плейлисты ----------------------------------------------------------- */

.playlist-item {
    width: auto;
    float: none;
    padding-bottom: 0;
    margin-top: 26px;
}

.playlist-item .bm-section-head {
    align-items: center;
    justify-content: space-between;
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
}

.playlist-link {
    font-family: var(--code-font);
    font-size: 10px;
    font-weight: 400;
    color: var(--muted-color);
    text-decoration: none;
}

.playlist-link:hover {
    color: #1db954;
    text-decoration: none;
}

.playlist-note {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--muted-color);
}

/* Плеер занимает всю ширину колонки; высоту задаёт сам Spotify */
.playlist-embed {
    display: block;
    width: 100%;
    border: 0;
}

.playlist-empty {
    margin-top: 20px;
    font-family: var(--code-font);
    font-size: 12px;
    color: var(--muted-color);
}

/* Релиз месяца — карточка, а не просто строка с картинкой: собственный фон и
   рамка отделяют выбор месяца от архива под ним. На узком экране — в колонку. */
.music-hero {
    position: relative;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 18px;
    border: 1px dashed rgba(84, 67, 58, 0.28);
    border-radius: 15px;
    background-color: var(--background-color-light);
    overflow: hidden;
    isolation: isolate;
}

/* Обводка пунктирная, как у жёлтого блока выше, и намеренно бесцветная: под ней
   размытая обложка, которая каждый месяц своя, и любой собственный оттенок
   рамки спорил бы то с синим, то с красным. Полупрозрачная берёт тон от фона. */
[data-theme="dark"] .music-hero {
    border-color: rgba(255, 255, 255, 0.16);
}

/* Обложка размытым фоном: каждый месяц блок окрашивается под свой релиз.
   Слой отдельным псевдоэлементом, потому что filter на самом блоке размыл бы
   и текст. Масштаб 1.15 прячет светлую кромку, которую blur оставляет по краям. */
.music-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--music-cover);
    background-size: cover;
    background-position: center;
    transform: scale(1.15);
    /* В светлой теме обложка приглушается сильнее и обесцвечивается: на кремовом
       фоне насыщенный слой читается как чужая картинка, а не как оттенок, и
       холодные обложки выбивают карточку из тёплой палитры сайта. */
    filter: blur(38px) saturate(0.75);
    opacity: 0.13;
}

[data-theme="dark"] .music-hero::before {
    filter: blur(38px) saturate(1.5);
    opacity: 0.22;
}

/* У избранного релиза рамка берёт цвет звезды — тот же приём, что у вкладки Best */
.music-hero.is-favourite,
[data-theme="dark"] .music-hero.is-favourite {
    border-color: rgba(249, 115, 22, 0.45);
}

/* Обложка «парит» над блоком: две тени — ближняя очерчивает край, дальняя
   уходит вниз и даёт высоту. Обе тёплые: на кремовом фоне нейтральная серая
   выглядит грязной. */
.music-cover {
    width: 264px;
    height: 264px;
    flex: 0 0 auto;
    border-radius: 12px;
    cursor: zoom-in;
    box-shadow:
        0 4px 10px -4px rgba(84, 67, 58, 0.35),
        0 24px 44px -16px rgba(84, 67, 58, 0.45);
}

[data-theme="dark"] .music-cover {
    box-shadow:
        0 4px 10px -4px rgba(0, 0, 0, 0.55),
        0 26px 50px -16px rgba(0, 0, 0, 0.7);
}

/* Звезда в заголовке стоит перед названием и не должна тянуть строку вверх */
.music-title .log-highlight {
    margin-right: 7px;
}

.music-title .highlight-star {
    width: 16px;
    height: 16px;
    vertical-align: -1px;
}

.music-hero-copy {
    min-width: 0;
}

/* Оранжевый берётся темнее светлого варианта: яркий #f97316 на голубом или
   зелёном фоне обложки даёт грязный контраст комплементарных цветов. В тёмной
   теме фон глухой, и там работает исходный. */
.music-kicker {
    display: block;
    margin-bottom: 8px;
    font-family: var(--code-font);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #c2410c;
}

[data-theme="dark"] .music-kicker {
    color: #f97316;
}

.music-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.music-artist {
    margin: 2px 0 0;
    font-family: var(--code-font);
    font-size: 13px;
    color: var(--secondary-color);
}


/* Текст берёт основной цвет, а не приглушённый: под ним размытая обложка,
   и на цветном фоне описательный оттенок терял контраст. */
/* Кавычка рисуется левее текста и вылезает за его край, поэтому блоку нужен
   собственный отступ — иначе она обрежется краем карточки. */
.music-note {
    padding-left: 26px;
}

.music-note p {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--primary-color);
}


/* Заголовок раздела и первая строка читаются как одно целое: у .log-table свой
   верхний отступ, рассчитанный на страницы логов. Зазор над таблицей задаёт
   строка фильтра, стоящая выше. */
.music-archive-table {
    margin-top: 0;
}

/* Архив — та же таблица, что в логах: раскрытие строки, ховер и анимация
   достаются от .log-table даром. Своя здесь только колонка с обложкой. */
.music-col-cover {
    width: 60px;
}

/* Рецензия занимает почти всю ширину строки: прежний отступ под колонки номера
   и обложки оставлял слева пустую полосу в сотню пикселей. Остаётся ровно
   столько, сколько нужно кавычке, которая рисуется левее текста. */
.music-archive-table .log-detail-body {
    padding-left: 44px;
}

.music-archive-table .log-detail-main {
    max-width: none;
}

.music-row-cover {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    cursor: zoom-in;
    transition: transform 0.18s ease;
}

.log-row:hover .music-row-cover {
    transform: scale(1.06);
}

/* Формат, лейбл и дата — метками в ряд. Формат выделен: он отвечает на первый
   вопрос к записи в разделе, который называется release, а не album. */
.music-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 10px 0 0;
}

/* Метки лежат на размытой обложке, поэтому фон у них не из палитры интерфейса,
   а полупрозрачный: плашка --control-bg была тёплой и на синей или зелёной
   обложке смотрелась грязным пятном. Прозрачная берёт тон от того, что под ней. */
.music-pill {
    padding: 3px 8px;
    border-radius: 6px;
    background-color: rgba(84, 67, 58, 0.07);
    border: 1px solid rgba(84, 67, 58, 0.12);
    color: var(--muted-color);
    font-family: var(--code-font);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

[data-theme="dark"] .music-pill {
    background-color: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.11);
    color: var(--text-code-color);
}

/* Жанр — вторая по важности метка после формата, поэтому у него свой оттенок,
   но спокойнее оранжевого: формат отвечает «что это», жанр — «какая музыка». */
.music-pill--genre {
    background-color: rgba(130, 60, 180, 0.10);
    border-color: rgba(130, 60, 180, 0.28);
    color: #6d2f97;
    font-weight: 600;
}

[data-theme="dark"] .music-pill--genre {
    background-color: rgba(192, 132, 252, 0.14);
    border-color: rgba(192, 132, 252, 0.3);
    color: #c084fc;
}

.music-pill--format {
    background-color: rgba(249, 115, 22, 0.10);
    border-color: rgba(249, 115, 22, 0.3);
    color: #c2410c;
    font-weight: 600;
}

[data-theme="dark"] .music-pill--format {
    background-color: rgba(249, 115, 22, 0.16);
    border-color: rgba(249, 115, 22, 0.32);
    color: #f97316;
}

/* Колонка даты держит свою ширину, а подпись обрезается многоточием: при
   нехватке места текст должен уходить за край, а не жаться в узкий столбик,
   ломаясь по слогам. */
.music-archive-table .log-col-title {
    overflow: hidden;
}

.music-archive-table .log-title-row,
.music-archive-table .log-subtitle-row {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-archive-table .music-col-date {
    width: 52px;
}

/* Дата стоит в два яруса: месяц крупнее, год под ним тише — он повторяется
   у соседних записей и не должен читаться первым. */
.music-col-date {
    text-align: right;
    line-height: 1.25;
}

.music-date-month,
.music-date-year {
    display: block;
    font-variant-numeric: tabular-nums;
}

/* Месяц капсом моноширинным, год под тонкой чертой и тише — колонка читается
   как штемпель, а не как две строки текста. */
.music-date-month {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary-color);
}

.music-date-year {
    font-size: 10px;
    color: var(--muted-color);
}

/* Лейбл в подстроке — последняя по важности деталь, поэтому он тише прочих */
.music-sub-label {
    font-family: var(--code-font);
    font-size: 10px;
    color: var(--muted-color);
    opacity: 0.8;
}

/* Ссылки под рецензией и в карточке месяца — иконками сервисов */
.music-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
}

.music-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--control-border);
    border-radius: 8px;
    color: var(--muted-color);
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.music-icon svg {
    width: 15px;
    height: 15px;
}

/* Цвет сервиса проявляется при наведении: в покое ряд иконок остаётся
   спокойным и не спорит с обложкой, которая теперь красит весь блок. */
.music-icon--spotify:hover {
    background-color: rgba(29, 185, 84, 0.14);
    border-color: rgba(29, 185, 84, 0.6);
    color: #1db954;
}

.music-icon--bandcamp:hover {
    background-color: rgba(98, 154, 169, 0.16);
    border-color: rgba(98, 154, 169, 0.6);
    color: #4f8494;
}

[data-theme="dark"] .music-icon--bandcamp:hover {
    color: #7fb3c4;
}

/* Архив — та же таблица, что в логах: раскрытие строки, ховер и анимация
   достаются от .log-table даром. Своя здесь только колонка с обложкой. */
.music-col-cover {
    width: 60px;
}

/* Рецензия занимает почти всю ширину строки: прежний отступ под колонки номера
   и обложки оставлял слева пустую полосу в сотню пикселей. Остаётся ровно
   столько, сколько нужно кавычке, которая рисуется левее текста. */
.music-archive-table .log-detail-body {
    padding-left: 44px;
}

.music-archive-table .log-detail-main {
    max-width: none;
}

.music-row-cover {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    cursor: zoom-in;
    transition: transform 0.18s ease;
}

.log-row:hover .music-row-cover {
    transform: scale(1.06);
}

/* Формат, лейбл и дата — метками в ряд. Формат выделен: он отвечает на первый
   вопрос к записи в разделе, который называется release, а не album. */
.music-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 10px 0 0;
}

.music-pill {
    padding: 3px 8px;
    border-radius: 6px;
    background-color: var(--control-bg);
    color: var(--control-color);
    font-family: var(--code-font);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.music-pill--format {
    background-color: rgba(249, 115, 22, 0.10);
    border-color: rgba(249, 115, 22, 0.3);
    color: #c2410c;
    font-weight: 600;
}

[data-theme="dark"] .music-pill--format {
    background-color: rgba(249, 115, 22, 0.16);
    border-color: rgba(249, 115, 22, 0.32);
    color: #f97316;
}

/* Ссылки под рецензией и в карточке месяца */
.music-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
}


@media screen and (max-width: 600px) {
    .music-hero {
        flex-direction: column;
    }

    /* Лейбл — последняя по важности деталь строки, на узком экране он уходит
       первым, чтобы название и артист остались целыми. */
    .music-archive-table .music-sub-label,
    .music-archive-table .log-subtitle-row .log-sub-genre + .music-sub-label::before {
        display: none;
    }

    .music-cover {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .music-grid {
        grid-template-columns: 1fr;
    }
}