/* Geologica (variable, weight 100-900), self-hosted.
   Source: https://fonts.google.com/specimen/Geologica · SIL Open Font License 1.1 */
@font-face {
  font-family: "Geologica";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geologica-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Geologica";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geologica-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Geologica";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geologica-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geologica";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geologica-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --bg: #f4f6f9;
  --panel: #ffffff;
  --panel-2: #fbfcfd;
  --ink: #14161c;
  --muted: #5b6270;
  --line: #dfe3ec;
  --line-strong: #8d94a3;
  --accent: #2b5cf6;
  --accent-soft: #eaefff;
  --accent-2: #0f766e;
  --warn: #a34a08;
  --warn-soft: #fef3c7;
  /* Mirrored into <meta name="theme-color"> so the browser chrome matches the
     theme that is actually on screen. The meta ships with the dark value. */
  --theme-color: #f4f6f9;

  /* One hue per category, shared by the drawer tag and the statistics bars. */
  --cat-vocal: #2b5cf6;
  --cat-vocal-soft: #eaefff;
  --cat-instrumental: #0f766e;
  --cat-instrumental-soft: #e0f2f0;
  --cat-arrThemes: #9333ea;
  --cat-arrThemes-soft: #f4ebfe;
  --cat-arrVocal: #be123c;
  --cat-arrVocal-soft: #fce8ee;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow: 0 10px 30px rgba(15, 23, 42, .1);
  --radius: 10px;
  --radius-sm: 6px;
}

/* The inline bootstrap in index.html resolves the OS preference into a
   data-theme attribute before first paint, so the dark tokens only need to be
   written once. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1117;
  --panel: #161b22;
  --panel-2: #12161d;
  --ink: #e6edf3;
  --muted: #8b949e;
  --line: #2b3341;
  --line-strong: #6e7681;
  --accent: #7aa2ff;
  --accent-soft: #16233f;
  --accent-2: #4fd1c5;
  --warn: #f0b429;
  --warn-soft: #3a2c12;
  --theme-color: #0d1117;
  --cat-vocal: #7aa2ff;
  --cat-vocal-soft: #16233f;
  --cat-instrumental: #4fd1c5;
  --cat-instrumental-soft: #0f2b28;
  --cat-arrThemes: #c084fc;
  --cat-arrThemes-soft: #241a3a;
  --cat-arrVocal: #fb7185;
  --cat-arrVocal-soft: #3a1622;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

/* Any element can adopt a category hue by carrying data-cat. The --cat and
   --cat-soft values inherit, and fall back to the accent when absent. */
[data-cat="vocal"] { --cat: var(--cat-vocal); --cat-soft: var(--cat-vocal-soft); }
[data-cat="instrumental"] { --cat: var(--cat-instrumental); --cat-soft: var(--cat-instrumental-soft); }
[data-cat="arrThemes"] { --cat: var(--cat-arrThemes); --cat-soft: var(--cat-arrThemes-soft); }
[data-cat="arrVocal"] { --cat: var(--cat-arrVocal); --cat-soft: var(--cat-arrVocal-soft); }

* { box-sizing: border-box; }

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

/* The hidden attribute means "not rendered", so it has to beat any component
   display rule (.facet-item is display:flex, which would otherwise win over
   the user agent's [hidden] { display: none }). */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Geologica", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3 { line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }

a { color: var(--accent-2); }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: var(--bg);
  padding: .6rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* ---------------------------------------------------------------- header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem clamp(1rem, 4vw, 2.5rem);
  background: var(--panel);
  /* A solid accent tint: unlike a gradient it resolves to a real colour, so
     contrast checkers can still verify the header text. */
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius);
}
.brand:hover .brand-text h1,
.brand:focus-visible .brand-text h1 { color: var(--accent); }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.brand-mark {
  width: 56px;
  height: 56px;
  padding: 2px;
  border-radius: 50%;
  background: var(--accent);
  overflow: hidden;
  flex: none;
  /* A soft accent halo behind the portrait, sitting outside the accent ring.
     Spread wider than the mark and blurred, so it reads as light around the
     ring rather than a colour cast on the photo. */
  box-shadow: var(--shadow-sm);
  box-shadow: 0 5px 22px -2px color-mix(in srgb, var(--accent) 50%, transparent);
}
.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.brand-text h1 { margin: 0; font-size: clamp(1rem, 2.2vw, 1.3rem); font-weight: 800; letter-spacing: -.02em; }
.brand-text p { margin: .1rem 0 0; color: var(--muted); font-size: .82rem; }

.header-actions { display: flex; align-items: center; gap: .6rem; }

/* Narrow screens: give the brand its own row so the title stops wrapping. */
@media (max-width: 620px) {
  .site-header { flex-wrap: wrap; }
  .brand { flex: 1 1 100%; }
  .header-actions { margin-left: auto; }
}

/* One segmented pill shared by the theme and language toggles. The track is
   inset and the active segment is a thumb with its own radius, instead of a
   full-bleed fill clipped by the pill's own border. */
.lang-toggle,
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
}
.lang-toggle button,
.theme-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.5rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
/* Both pills hold two segments of the same width, so the two switches read as
   a pair instead of the theme one looking pinched. The language labels are the
   widest content either pill carries, and a fixed width keeps the segments even
   whatever the font does to the glyphs — a min-width left "МК" and "EN"
   slightly different sizes. */
.lang-toggle button,
.theme-toggle button { width: 2.4rem; padding: 0; }
.lang-toggle button:not([aria-pressed="true"]):hover,
.theme-toggle button:not([aria-pressed="true"]):hover {
  background: var(--accent-soft);
  color: var(--ink);
}
.lang-toggle button[aria-pressed="true"],
.theme-toggle button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--bg);
}
.lang-toggle button:focus-visible,
.theme-toggle button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.toggle-icon {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------------ tabs */
.tabs-nav {
  position: sticky;
  top: 0;
  z-index: 20;
}
.tabs {
  display: flex;
  gap: 1.5rem;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  background: var(--panel);
  /* The rule is an inset shadow, not a border, so it is painted inside the
     padding box where the selected tab's underline can sit on top of it. The
     bar scrolls horizontally, so anything painted past the padding box would
     make it grow a vertical scrollbar as well. */
  box-shadow: inset 0 -1px 0 var(--line);
  overflow-x: auto;
}
.tabs button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: .9rem;
  text-transform: uppercase;
  padding: 1rem 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

main { padding: 2rem clamp(1rem, 4vw, 2.5rem) 4rem; flex-grow: 1; }

.view { width: 100%; }

/* --------------------------------------------------------------- toolbar */
.toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.search {
  flex: 1 1 320px;
  min-width: 200px;
  padding: .7rem 1.1rem;
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}
.search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.check {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--muted);
  font-size: .9rem;
  cursor: pointer;
}

.btn {
  padding: .6rem 1rem;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }

.link-btn {
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* ---------------------------------------------------------------- layout */
.layout {
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 2rem;
  align-items: start;
}
.filters {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .4rem 1.1rem 1rem;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 68px;
  max-height: calc(100vh - 88px);
  overflow-y: auto;
}
@media (max-width: 1240px) {
  .layout { grid-template-columns: 1fr; }
  .filters { position: static; max-height: none; }
}

.filters-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .9rem 0 .5rem;
}
.filters-head h2 { font-size: .95rem; margin: 0; }

/* ---------------------------------------------------------------- export */
.export {
  position: relative;
  margin-top: .75rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
}
.export-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}
.export-btn .chev { transition: transform .15s ease; transform: rotate(90deg); }
.export-btn[aria-expanded="true"] .chev { transform: rotate(270deg); }

.menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + .35rem);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .3rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.menu button {
  width: 100%;
  padding: .5rem .7rem;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.menu button:hover,
.menu button:focus-visible { background: var(--accent-soft); color: var(--accent); outline: 2px solid var(--accent); outline-offset: -2px; }

/* --------------------------------------------------------------- facets */
.facet { border-top: 1px solid var(--line); }

.facet > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .15s ease;
}
.facet > summary::-webkit-details-marker { display: none; }
.facet > summary:hover { color: var(--ink); }
.facet .chev { margin-left: auto; transition: transform .15s ease; }
.facet[open] .chev { transform: rotate(90deg); }

.facet-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 0;
}

.facet-body { padding-bottom: 1rem; }

.facet-filter {
  width: 100%;
  margin-bottom: .5rem;
  padding: .4rem .6rem;
  font: inherit;
  font-size: .85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--ink);
}

.facet-list {
  display: flex;
  flex-direction: column;
  gap: .05rem;
}
.facet-list--scroll {
  max-height: 230px;
  overflow-y: auto;
}
/* Stacked layout: the filter panel spans the full width, so let the facet
   lists flow into columns and keep each label next to its count. */
@media (max-width: 1240px) {
  .facet-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .05rem 2rem;
  }
  .facet-list--scroll { max-height: 280px; }
}
.facet-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .3rem .4rem;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  cursor: pointer;
  transition: background-color .12s ease;
}
.facet-item:hover { background: var(--accent-soft); }
/* A small colour key so the category facets tie back to the chart and tags. */
.facet-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--cat, var(--accent));
  flex: none;
}
/* Checkboxes follow the accent, or the category hue when the item carries one. */
.facet-item input[type="checkbox"] { accent-color: var(--cat, var(--accent)); }
.facet-item .count {
  margin-left: auto;
  color: var(--muted);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

.range-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .8rem;
  color: var(--muted);
  padding: .2rem 0;
}
.range-row input[type="range"] { width: 100%; accent-color: var(--accent); }

/* --------------------------------------------------------------- results */
.results { min-width: 0; }
.result-meta { margin: 0 1rem 1rem; color: var(--muted); font-size: .88rem; }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.catalog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.catalog-table th,
.catalog-table td {
  text-align: left;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.catalog-table thead th {
  position: sticky;
  top: 0;
  background: var(--panel);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 600;
  z-index: 1;
}
.catalog-table tbody tr:last-child td { border-bottom: 0; }
.catalog-table tbody tr { cursor: pointer; transition: background-color .12s ease; }
.catalog-table tbody tr:hover { background: var(--accent-soft); }
.catalog-table td.cell-title { font-weight: 500; }
.row-open {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.row-open:hover { color: var(--accent); text-decoration: underline; }
.row-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.catalog-table td.cell-perf,
.catalog-table td.cell-comp { color: var(--muted); }

th.sortable { padding: 0; }
/* A <button> does not inherit text-transform from its parent, so the th's
   uppercase has to be handed down explicitly. Without this the sortable
   headers render in sentence case while the plain ones are all caps. */
.th-sort {
  display: flex;
  align-items: center;
  gap: .3rem;
  width: 100%;
  padding: .85rem 1.1rem;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
}
.th-arrow::after { content: ""; opacity: .5; }
th.sortable[data-dir="asc"] .th-arrow::after { content: "▲"; font-size: .6rem; opacity: 1; }
th.sortable[data-dir="desc"] .th-arrow::after { content: "▼"; font-size: .6rem; opacity: 1; }

td.dur { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
td.sig {
  white-space: nowrap;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .82rem;
  color: var(--muted);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  margin-left: .45rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: .68rem;
  font-weight: 700;
  vertical-align: middle;
}

.empty { color: var(--muted); padding: 2.5rem; text-align: center; }

.table-more { display: flex; justify-content: center; padding: 1.25rem 0 0; }

/* ------------------------------------------------------------ statistics */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.card {
  flex: 1 1 165px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
  box-shadow: var(--shadow-sm);
}
.card .value { font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.card .label { color: var(--muted); font-size: .85rem; margin-top: .1rem; }
.card .sub { color: var(--muted); font-size: .75rem; margin-top: .35rem; }

/* Four small charts + one full-width chart. The column count is fixed so the
   four small charts always fill their rows evenly (no empty cells). */
.charts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
@media (min-width: 680px) {
  .charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1400px) {
  .charts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.chart-block {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.chart-block.wide { grid-column: 1 / -1; }
.chart-block h3 { font-size: .95rem; margin: 0 0 1.1rem; }

.bars { display: flex; flex-direction: column; gap: .7rem; }
.bar-row {
  display: grid;
  grid-template-columns: minmax(110px, 42%) 1fr auto;
  gap: .9rem;
  align-items: center;
  font-size: .85rem;
}
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track {
  display: block;
  height: 10px;
  background: var(--cat-soft, var(--accent-soft));
  border-radius: 999px;
  overflow: hidden;
}
.bar-fill {
  display: block;
  height: 100%;
  background: var(--cat, var(--accent));
  border-radius: 999px;
  transform-origin: left center;
  animation: bar-grow .55s cubic-bezier(.2, .7, .3, 1);
}
@keyframes bar-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.bar-value {
  min-width: 3ch;
  text-align: right;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.section-title { margin: 0 0 1rem; font-size: 1.3rem; }
.intro { color: var(--muted); max-width: 68ch; margin: 0 0 1.5rem; }

/* -------------------------------------------------------------- notes */
.field { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; color: var(--muted); }
.field select {
  padding: .5rem .7rem;
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.sev { font-size: .78rem; font-weight: 600; }
.sev.warning {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
}
.sev.info { color: var(--muted); }

.notes-table td.rule { max-width: 34ch; }
code.raw {
  font-family: ui-monospace, Menlo, monospace;
  font-size: .8rem;
  background: var(--panel-2);
  padding: .1rem .35rem;
  border-radius: 4px;
}
.raw-truncate {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* ---------------------------------------------------------------- drawer */
.drawer { position: fixed; inset: 0; z-index: 50; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(13, 17, 23, .5); }
.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(460px, 92vw);
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 1.75rem 1.6rem 3rem;
  overflow-y: auto;
  animation: slide-in .2s ease-out;
}
@keyframes slide-in { from { transform: translateX(30px); opacity: .4; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .drawer-panel { animation: none; }
  .bar-fill { animation: none; }
}

.drawer-close {
  position: absolute;
  top: .7rem;
  right: .9rem;
  border: 0;
  background: none;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.drawer h2 { margin: 0 1.5rem .4rem 0; font-size: 1.3rem; }
.drawer .cat-tag {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--cat, var(--accent));
  background: var(--cat-soft, var(--accent-soft));
  padding: .15rem .6rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}
.drawer dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.1rem; margin: 0 0 1.25rem; font-size: .9rem; }
.drawer dt { color: var(--muted); }
.drawer dd { margin: 0; min-width: 0; }
/* Drawer section headings, plus a lighter sub-heading for the groups inside a
   section, so "Поврзани дела" reads as the parent of "Ист автор". */
.drawer h3 {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink);
  margin: 1.4rem 0 .5rem;
}
.drawer .related h3 {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 1rem 0 .35rem;
}
.drawer .flags { list-style: none; padding: 0; margin: 0; }
.drawer .flags li { font-size: .85rem; color: var(--muted); padding: .2rem 0; }
/* A record that carries the amber badge in the catalogue shows its notes in the
   same amber, so the colour means one thing in both places. */
.drawer .flags-warn li { color: var(--warn); }
.drawer .empty-note { color: var(--muted); font-size: .85rem; margin: 0; }
.drawer .related ul { list-style: none; padding: 0; margin: 0; }
.drawer .related li { padding: .35rem 0; font-size: .88rem; border-bottom: 1px solid var(--line); }
/* The related lists are capped, so this is the "and N more" note under one. */
.drawer .related .empty-note { margin-top: .4rem; }
.chip-link { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-2); cursor: pointer; text-align: left; }
.raw-hint { color: var(--muted); font-size: .8rem; }

/* ---------------------------------------------------------------- footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 1.5rem clamp(1rem, 4vw, 2.5rem);
  color: var(--muted);
  font-size: .82rem;
}
.site-footer p { margin: .2rem 0; max-width: 80ch; }

@media print {
  .tabs, .toolbar, .filters, .lang-toggle, .theme-toggle, .drawer, .site-footer { display: none !important; }
  .layout { grid-template-columns: 1fr; }
  body { background: #fff; }
}