/* ============================================================
   Additions to (and a few deliberate overrides of) telegra.ph's
   core.min.css — a top category menu, category listing pages,
   Write/Delete buttons, the XCharter serif, and the edit-mode header.
   ============================================================ */

:root {
  --sans: CustomSansSerif, 'Lucida Grande', Arial, sans-serif;
  --serif: CustomSerif, Georgia, Cambria, 'Times New Roman', serif;
  --muted: #79828b;   /* telegra.ph's meta/secondary grey */
}

/* Our serif = XCharter. We RE-DECLARE telegra.ph's "CustomSerif" family to
   point at XCharter: this file loads after core.min.css, so these faces win,
   and every serif selector (body, blockquote, editor) picks up XCharter with
   zero selector changes. XCharter includes Cyrillic, so it renders both the
   Latin and the Russian text (no Georgia fallback needed). */
@font-face {
  font-family: CustomSerif; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/xcharter/xcharter-regular.woff2') format('woff2'),
       url('/fonts/xcharter/xcharter-regular.woff') format('woff');
}
@font-face {
  font-family: CustomSerif; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/xcharter/xcharter-italic.woff2') format('woff2'),
       url('/fonts/xcharter/xcharter-italic.woff') format('woff');
}
@font-face {
  font-family: CustomSerif; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/xcharter/xcharter-bold.woff2') format('woff2'),
       url('/fonts/xcharter/xcharter-bold.woff') format('woff');
}
@font-face {
  font-family: CustomSerif; font-style: italic; font-weight: 700; font-display: swap;
  src: url('/fonts/xcharter/xcharter-bolditalic.woff2') format('woff2'),
       url('/fonts/xcharter/xcharter-bolditalic.woff') format('woff');
}

/* Edit mode: keep the header (Title + "Category · Date") visible, exactly like
   read mode — telegra.ph hides it. The title is editable; the meta stays plain
   (the <address> is never contenteditable). */
.tl_article_edit .tl_article_header { display: block; }
/* an empty contenteditable <h1> collapses to 0 height (no <br> like a Quill
   block), letting the meta ride up over it — reserve one line. */
.tl_article_edit .tl_article_header h1 { outline: none; min-height: 34px; }
.tl_article_edit .tl_article_header h1.empty { position: relative; }
.tl_article_edit .tl_article_header h1.empty::before {
  content: 'Title';
  position: absolute; left: 0; right: 0;
  color: rgba(0, 0, 0, 0.44); font-weight: 700;
  pointer-events: none;
}
/* telegra.ph underlines the author link in edit mode (theirs is an editable
   URL); our category isn't editable, so drop the underline. */
.tl_article_edit .tl_article_header address a[href] { border-bottom: none; }

/* Always reserve the scrollbar gutter, so short pages (category) and long
   pages (article) centre the column identically — otherwise the menu and
   title jump sideways by the scrollbar width when switching between them. */
html { scrollbar-gutter: stable; }

/* ---------- Top line-menu + divider ---------- */
.tl_topmenu {
  position: relative;   /* positioning context for the night-mode toggle */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid #ececec;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 18px;
}
.tl_topmenu a { color: var(--muted); text-decoration: none; }
.tl_topmenu a:hover { color: #333; }
.tl_topmenu a.active { color: #000; font-weight: 700; }

/* ---------- Page buttons: aligned to the Title line ----------
   telegra.ph fixes these to the viewport (top:0; margin-top:46px),
   which assumes no top menu. We anchor them to the page column
   instead, so they sit on the title line regardless of the menu.
   The <aside> is the first child of <main>, so when the gutter is
   too narrow it falls into flow at the top, right-aligned. */
.tl_page { position: relative; padding-top: 0; }

/* 16px breathing room above and below the article title+subtitle block. Only
   article pages carry a subtitle, so scope to .tl_article_editable (category
   pages keep their title flush). The padding shifts the title down by 16px;
   the buttons pin to the title line, so they get the same +16px below. */
.tl_article_editable .tl_article_header { padding: 16px 0; }
.tl_article_editable .tl_article_buttons { top: 41px; }

.tl_article_buttons {
  position: absolute;
  top: 25px;               /* aligns with the title (21px h1 top margin + 4px) */
  left: 100%;
  margin: 0 0 0 10px;
  white-space: nowrap;
}
/* Match telegra.ph's .edit_button, which is position:absolute so it sits on
   the aside's top edge (a static inline-block rides up on the baseline). */
.tl_article_buttons .write_button { visibility: visible; opacity: 1; position: absolute; }
.tl_article_buttons .delete_button { margin-left: 10px; }
.tl_article_edit .delete_button { visibility: visible; opacity: 1; }
.tl_article_saving .delete_button { visibility: hidden; opacity: 0; }

/* ---------- Category listing: picture-left cards ----------
   The list is a flex column: flex ignores the whitespace text nodes
   between cards, which would otherwise render as tall line boxes
   (content inherits telegra.ph's line-height:1.58 / 18px). */
.cat_list { display: flex; flex-direction: column; padding: 8px 0 0; }
/* .cat_item is an <a> inside .tl_article_content, so telegra.ph's content-link
   underline (border-bottom) draws a line under each card — override it. */
.cat_list a.cat_item {
  display: flex;
  gap: 18px;
  margin: 0 21px;
  padding: 6px 0;
  text-decoration: none;
  border-bottom: none;
  color: inherit;
}
.cat_thumb {
  width: 140px;
  height: 96px;
  flex-shrink: 0;
  object-fit: cover;
  background: #f2f2f2;
  border-radius: 3px;
}
.cat_body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cat_item_title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 21px;
  line-height: 25px;
  color: #000;
}
.cat_item:hover .cat_item_title { text-decoration: underline; }
.cat_item_excerpt {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.7);
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cat_item_date { color: var(--muted); font-size: 14px; margin-top: 8px; }
.cat_empty { color: var(--muted); margin: 20px 21px; }

/* ============================================================
   Narrow: the side gutters can't hold the menu or the buttons,
   so both drop into the flow. 732 + 2*(200+24) = 1180.
   ============================================================ */
@media (max-width: 1200px) {
  .tl_article_buttons {
    position: static;
    left: auto;
    margin: 0 21px 6px;
    text-align: right;
  }
  .cat_thumb { width: 104px; height: 72px; }
}

/* ---------- Embedded media spacing + inline audio ---------- */
/* 16px above and below every figure (images and audio). core.min.css ships
   `margin: 0 21px 16px` (no top gap); this adds the matching 16px on top. */
.tl_article .tl_article_content figure { margin: 16px 21px; }

/* Inline audio player: same figure/figcaption frame as an image (so it gets the
   image spacing and the muted, centred caption for free). Kept deliberately
   simple — a full-width native control that follows the page's colour-scheme
   (light/dark) via the color-scheme set on :root in night mode. */
.tl_article .tl_article_content .audio_figure audio {
  display: block;
  width: 100%;
  vertical-align: top;
}
/* Audio insert button, beside the image "+" in the blocks panel. */
#_audio_button { padding: 2px; background: none; }
#_audio_button svg { display: block; width: 20px; height: 20px; fill: #b3b3b3; }
#_audio_button:hover svg { fill: #333; }

/* ============================================================
   Night-mode toggle — sits on the nav line, directly above the
   Write/Edit buttons. Those anchor to the right edge of the 732px
   column (.tl_page, centred): column-right = 50% + 366px, buttons
   start +10px beyond that. The nav is full-width and position:relative,
   and left:% resolves against its full width, so the same x is
   `50% + 376px`. top:50% + translateY centres it on the nav line.
   ============================================================ */
.theme_toggle {
  position: absolute;
  top: 50%;
  left: calc(50% + 376px);
  transform: translateY(-50%);
  margin: 0;
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 0;
  color: var(--muted);
  -webkit-tap-highlight-color: transparent;
}
.theme_toggle:hover { color: #333; }
.theme_toggle svg {
  display: block;
  height: 19px;
  width: auto;
  fill: currentColor;
  overflow: visible;   /* the sun glyph's path extends past its viewBox */
}
/* Day mode shows the moon (→ switch to night); night mode shows the sun. */
.theme_toggle .ti_day { display: none; }
.theme_toggle .ti_night { display: block; }

@media (max-width: 1200px) {
  /* column now fills the gutters; pin the toggle to the nav's right edge */
  .theme_toggle { left: auto; right: 16px; }
}

/* ============================================================
   Night theme. #1A1A1A background, #FFFFFF primary text; telegra.ph's
   rgba(0,0,0,x) tones are mirrored to rgba(255,255,255,x) so the type
   hierarchy inverts cleanly. Toggled via [data-theme="night"] on <html>.
   ============================================================ */
:root[data-theme="night"] { color-scheme: dark; background: #1A1A1A; }
[data-theme="night"] body { background: #1A1A1A; }

/* toggle glyph swap + hover */
[data-theme="night"] .theme_toggle:hover { color: #fff; }
[data-theme="night"] .theme_toggle .ti_day { display: block; }
[data-theme="night"] .theme_toggle .ti_night { display: none; }

/* primary reading text */
[data-theme="night"] .tl_article .tl_article_content,
[data-theme="night"] .tl_article .tl_article_content .ql-editor,
[data-theme="night"] .tl_article .tl_article_header,
[data-theme="night"] .tl_article .tl_article_header h1 { color: #FFFFFF; }

/* secondary tones mirrored from rgba(0,0,0,x) */
[data-theme="night"] .tl_article h2 { color: rgba(255, 255, 255, 0.5); }
[data-theme="night"] .tl_article .tl_article_content aside { color: rgba(255, 255, 255, 0.6); }
[data-theme="night"] .tl_article a[href] { border-bottom-color: rgba(255, 255, 255, 0.6); }
[data-theme="night"] .tl_article .tl_article_content blockquote { border-left-color: rgba(255, 255, 255, 0.85); }
[data-theme="night"] .tl_article .tl_article_content blockquote.dir_rtl { border-right-color: rgba(255, 255, 255, 0.85); }
[data-theme="night"] .tl_article .tl_article_content code,
[data-theme="night"] .tl_article .tl_article_content pre { background: #23262B; }
[data-theme="night"] .tl_article .tl_article_content hr:after { border-top-color: #3a3a3a; }
[data-theme="night"] .tl_article ::selection { background: #3a3d42; }
[data-theme="night"] .tl_article ::-moz-selection { background: #3a3d42; }

/* the editor's Title/placeholder ghost text */
[data-theme="night"] .tl_article_edit .tl_article_header h1.empty::before,
[data-theme="night"] .tl_article.tl_article_edit [data-placeholder].empty:before { color: rgba(255, 255, 255, 0.44); }

/* top menu + category listing */
[data-theme="night"] .tl_topmenu { border-bottom-color: #2a2a2a; }
[data-theme="night"] .tl_topmenu a:hover { color: #ccc; }
[data-theme="night"] .tl_topmenu a.active { color: #fff; }
[data-theme="night"] .cat_item_title { color: #fff; }
[data-theme="night"] .cat_item_excerpt { color: rgba(255, 255, 255, 0.7); }
[data-theme="night"] .cat_thumb { background: #2a2a2a; }

/* owner buttons (Write/Edit/Publish/Delete) */
[data-theme="night"] .button { color: #fff; border-color: #555; }