/* Unique v7 (owner 2026-10-11: «Давай попробуем в стиле Apple сделать»): the calm of Apple Support. White and one light
   grey, Apple's text and link colours, green only in the main button, one breakpoint (phone up to 734px, wide from
   735px), a 980px container and a 692px reading column, the same gap between all sections. Values: design-v7.md. */

/* Heebo ships in two weights here, 400 and 600, and the CSS asks for exactly these two (v6.1-fix). Weight synthesis is
   off, so no faux bold is drawn. On iPhone and Mac the system font comes first; Heebo everywhere else. */
@font-face {
  font-family: "Heebo";
  src: url("assets/heebo-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Heebo";
  src: url("assets/heebo-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light;
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --line: #d2d2d7;
  --bg: #ffffff;
  --bg-2: #f5f5f7;
  --link: #0066cc;
  /* Green: the main button only. v7.3: calmer, darker, greener (owner: «слишком кислотный»). */
  --btn: #2e7d32;
  --btn-hover: #276b2b;
  --btn-active: #1f5b23;
  --btn-2: #e8e8ed;
  --btn-2-hover: #dcdce1;
  --radius: 18px;
  --radius-field: 12px;
  /* v7.3: buttons, the ☰ and the skip link are almost square (owner: «ближе к квадрату»). */
  --radius-button: 4px;
  /* Between sections, header → first block and last block → footer: 64px on a phone, 80px from 735px. */
  --gap: 64px;
  /* Inside a section, heading → content: 24px on a phone, 32px from 735px. */
  --inner: 24px;
  /* Header, footer and cookie notice: 24px at the sides, the 980px container centred on a wide screen. */
  --pad: max(24px, (100% - 980px) / 2);
  /* Names the copied feed and cookie-notice rules use (v6.1), mapped onto the v7 colours. */
  --ink: var(--text);
  --bg-alt: var(--bg-2);
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-24: 1.5rem;
  --space-8: 8px;
  --space-16: 16px;
  /* The feed only (v6 part 2): Telegram's own values from its CSS; blue, grey and the day plaque darkened
     to WCAG AA (design-v6.md, test_feed_tokens_keep_wcag_aa_where_telegram_does_not). */
  --tg-wall-1: #dbddbb;
  --tg-wall-2: #6ba587;
  --tg-wall-3: #d5d88d;
  --tg-wall-4: #88b884;
  --tg-bubble: #ffffff;
  --tg-blue: #2070b2;
  --tg-grey: #747678;
  --tg-quote-bg: #e4f0f9;
  --tg-service: rgb(20 82 1 / 0.7);
  --tg-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  --tg-radius: 15px;
  /* Telegram's quote and link-preview corners (v6.1 used --radius, then 4px; in v7 --radius is the 18px card). */
  --tg-quote-radius: 4px;
  --tg-pad-block: 12px;
  --tg-pad-inline: 17px;
  --tg-bleed: -17px;
  --tg-avatar: 36px;
  --tg-avatar-offset: 45px;
  --tg-gap: 6px;
  --tg-bar: 3px;
  --tg-quote-pad-block: 5px;
  --tg-quote-pad-start: 12px;
  --tg-quote-pad-end: 6px;
  --tg-album-gap: 2px;
  --tg-service-pad-block: 3px;
  --tg-service-pad-inline: 12px;
  --tg-service-radius: 13px;
  --tg-footer-pull: -12px;
}

@media (min-width: 735px) {
  :root {
    --gap: 80px;
    --inner: 32px;
  }
}

* { box-sizing: border-box; }

/* Leave room for the focus ring during native keyboard scrolling. */
html { background: var(--bg); scroll-padding-block: 0.5rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Heebo", "Segoe UI", Arial, sans-serif;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.5625rem;
  letter-spacing: normal;
  font-kerning: normal;
  font-synthesis-weight: none;
  overflow-wrap: anywhere;
}

/* The search hides questions, sections and the topic tiles with the hidden attribute; no layout rule may show them. */
[hidden] { display: none !important; }

bdi { unicode-bidi: isolate; }

strong { font-weight: 600; }

h1,
h2,
h3,
p,
ul,
ol,
figure,
blockquote { margin: 0; }

/* Type (phone; the wide sizes at the end): H1 32/36, H2 28/32, H3 21/25, text 17/25. */
h1,
h2,
h3 {
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: 2rem;
  line-height: 2.25rem;
}

h2 {
  font-size: 1.75rem;
  line-height: 2rem;
}

h3 {
  font-size: 1.3125rem;
  line-height: 1.5625rem;
}

p { text-wrap: pretty; }

.lead {
  font-size: 1.1875rem;
  line-height: 1.6875rem;
}

/* Captions, sources, dates: 14/20 in the secondary grey. */
.caption,
.quiet,
.updated,
.nav-source,
.search-status {
  color: var(--text-2);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* Links: Apple's blue, no line at rest; a 1px line on hover only. Every link is a target of at least 44×44 (the
   project's rule since v4; Apple's HIG asks the same for touch). */
a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  max-inline-size: 100%;
  color: var(--link);
  text-decoration: none;
  transition: color 0.15s;
}

/* Inside running text the target hangs into the space around its line, so the line stays as tall as the text.
   Tiles and quick cards are blocks of their own and keep their boxes. */
main :is(p, li) > a:not(.pill, .pill-secondary, .text-action, .tile, .quick-card) {
  margin-block: calc((1lh - 44px) / 2);
}

a:hover {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

main:focus { outline: none; }

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

.skip-link {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 24px;
  z-index: 4;
  /* Never wider than the page minus 24px each side, so its focus ring stays on screen at 200% text. */
  max-inline-size: calc(100% - 48px);
  padding: 8px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  transform: translateY(-200%);
}

.skip-link:focus { transform: translateY(0); }

/* A «more» link: its text and a chevron 0.7em after it (forward is to the left in Hebrew). */
.more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

.more-link svg {
  flex: none;
  inline-size: 0.7em;
  block-size: 0.7em;
}

.nowrap { white-space: nowrap; }

/* Buttons: the main one green (the only green on the site), the secondary one grey; both 44px, 4px corners (v7.3). */

.pill,
.pill-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 44px;
  padding: 0 22px;
  border-radius: var(--radius-button);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.5625rem;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.pill {
  background: var(--btn);
  color: var(--bg);
}

.pill:hover {
  background: var(--btn-hover);
  color: var(--bg);
  text-decoration-line: none;
}

.pill:active {
  background: var(--btn-active);
  color: var(--bg);
}

.pill[aria-disabled="true"] {
  background: var(--btn-2);
  color: #86868b;
  pointer-events: none;
}

.pill-secondary {
  background: var(--btn-2);
  color: var(--text);
}

.pill-secondary:hover,
.pill-secondary:active {
  background: var(--btn-2-hover);
  color: var(--text);
  text-decoration-line: none;
}

.pill-small {
  min-block-size: 44px;
  padding: 0 16px;
  /* The pill you see is 36px; a transparent 4px border makes the target 44px. The corner you see is the outer
     radius minus that border: the same 4px as every button. */
  border: 4px solid transparent;
  border-radius: calc(var(--radius-button) + 4px);
  background-clip: padding-box;
  font-size: 0.9375rem;
  line-height: 1.25rem;
}

/* «להצטרפות בטלגרם» on a wide screen, «להצטרפות» on a phone: the span's leading space joins the pill's one line. */
.cta-more { display: contents; }

/* Header: one row of 52px with a 1px line under it, not sticky. Unique, the menu, the small join button; on a phone
   (v7.3) Unique and the ☰ alone, the join button is the bar at the bottom of the screen (.dock). */

.site-header {
  position: relative;
  z-index: 2;
  background: var(--bg);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 52px;
  /* Room for the focus ring of a 44px target when the text grows (200%): the ring never leaves the page. */
  padding-block: 4px;
  padding-inline: var(--pad);
  border-block-end: 1px solid var(--line);
}

.brand {
  margin-inline-end: auto;
  color: var(--text);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1;
}

.brand:hover { text-decoration-line: none; }

nav { display: flex; }

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

.menu-links a { color: var(--text); }

.menu-links a[aria-current="page"] { color: var(--text-2); }

.menu-toggle {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  color: var(--text);
  border-radius: var(--radius-button);
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s;
}

.menu-toggle::-webkit-details-marker { display: none; }

.menu-toggle svg { display: block; }

.menu-toggle:hover { background: var(--bg-2); }

/* Main: the same gap between all its blocks and to the header and the footer. Blocks sit in the 980px container
   with 24px at the sides; reading blocks in the 692px column; the grey band runs the full width. */

main {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding-block: var(--gap);
}

main > * {
  inline-size: calc(100% - 48px);
  max-inline-size: 980px;
  margin-inline: auto;
}

main > .column { max-inline-size: 692px; }

.head-center { text-align: center; }

/* Search: a 56px field, the search button at the start of the line (the right), the field no wider than 692px. */

.search {
  position: relative;
  max-inline-size: 692px;
  margin-inline: auto;
}

.search-field {
  display: block;
  inline-size: 100%;
  min-block-size: 56px;
  margin: 0;
  padding-block: 0;
  padding-inline: 48px 16px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  font: inherit;
  font-size: 1.0625rem;
  line-height: 1.5625rem;
  appearance: none;
  transition: border-color 0.15s;
}

.search-field::placeholder {
  color: var(--text-2);
  opacity: 1;
}

.search-field:focus { border-color: var(--link); }

.search-button {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  inline-size: 48px;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--text-2);
  border: 0;
  border-radius: var(--radius-field);
  font: inherit;
  cursor: pointer;
}

.search-button svg { display: block; }

.head-center .search { margin-block-start: 32px; }

.search-status:not(:empty) { margin-block-start: 12px; }

/* Topic tiles, like Apple's row of products: a grey circle with the icon, the caption under it. Two in a row on a phone,
   four on a wide screen; an incomplete row is centred. */

.tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 16px;
  margin-block: 0;
  padding: 0;
  list-style: none;
}

.tiles > li { flex: 0 0 calc((100% - 16px) / 2); }

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-align: center;
}

.tile:hover { text-decoration-line: none; }

/* Topic icons (owner 2026-10-12): his Higgsfield set as PNG files in the site's ink, assets/topic-*.png; 44px in
   the circle. Lucide stays for the small signs. */
.tile-icon {
  display: grid;
  place-items: center;
  inline-size: 88px;
  block-size: 88px;
  background: var(--bg-2);
  color: var(--text);
  border-radius: 50%;
}

.tile-label {
  font-size: 1.0625rem;
  line-height: 1.5625rem;
  transition: color 0.15s;
}

.tile:hover .tile-label { color: var(--link); }

/* Quick answers, like Apple's three grey cards: icon, 16, the question in link blue. No shadows. */

.quick-cards {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  block-size: 100%;
  min-block-size: 180px;
  padding: 32px 24px;
  background: var(--bg-2);
  color: var(--text);
  border-radius: var(--radius);
  text-align: center;
}

.quick-card-text {
  color: var(--link);
  font-size: 1.0625rem;
  line-height: 1.5625rem;
}

/* Home */

.hero {
  padding: 48px 24px;
  background: var(--bg-2);
  border-radius: var(--radius);
  text-align: center;
}

.hero h1 {
  font-size: 2.5rem;
  line-height: 2.75rem;
}

.hero-mission {
  margin-block-start: 16px;
  font-size: 1.3125rem;
  line-height: 1.8125rem;
}

.hero-note {
  max-inline-size: 560px;
  margin: 12px auto 0;
  color: var(--text-2);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
  margin-block-start: 32px;
}

.home-head h2 {
  font-size: 2rem;
  line-height: 2.25rem;
}

.subhead {
  margin-block-start: 16px;
  font-size: 1.3125rem;
  line-height: 1.8125rem;
}

/* The grey band with one white card: «עדכונים מהקהילה», the owner's sentence, the join button, the feed. */
main > .band {
  inline-size: 100%;
  max-inline-size: none;
  padding: var(--gap) 24px;
  background: var(--bg-2);
}

.band-card {
  max-inline-size: 980px;
  margin-inline: auto;
  padding: 48px 24px;
  background: var(--bg);
  border-radius: var(--radius);
  text-align: center;
}

.band-card > h2 + p { margin-block-start: var(--inner); }
.band-card > .band-action { margin-block-start: 24px; }
.band-card > .band-action + .caption { margin-block-start: 12px; }
.band-card > .feed-frame { margin-block-start: 32px; }

/* The feed window: at most 560px, centred; inside it the feed's own v6 rules (below), with links as they were. */
.feed-frame {
  max-inline-size: 560px;
  margin-inline: auto;
  text-align: start;
}

:where(.feed-frame) a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-inline-size: 44px;
  max-inline-size: 100%;
  color: var(--ink);
  font-weight: 600;
}

:where(.feed-frame) a:hover { text-decoration-line: none; }

/* Page heads of the guide and the channel: H1, 16, the lead, then the search or the join button. */
.page-head > .lead { margin-block-start: 16px; }

/* The guide: one section per topic in the reading column; the H2 starts with the topic's icon. */

.topic-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topic-title img { flex: none; }

.navigator-intro {
  margin-block-start: 8px;
  color: var(--text-2);
}

/* A question: a 1px line between questions, 24px above and under each (32px wide); the last one ends the section. */
.nav-item {
  padding-block: 24px;
  scroll-margin-block-start: 24px;
}

.nav-item:not([hidden]) ~ .nav-item:not([hidden]) { border-block-start: 1px solid var(--line); }

.nav-item:not(:has(~ .nav-item:not([hidden]))) { padding-block-end: 0; }

.nav-item > p { margin-block-start: 12px; }

.nav-item .nav-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-block-start: 16px;
}

.text-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  line-height: 1.25rem;
}

.text-action svg,
.pill-secondary svg { flex: none; }

/* A grey note card. */
.note-card {
  padding: 32px 24px;
  background: var(--bg-2);
  border-radius: var(--radius);
}

.navigator-closing > * + * { margin-block-start: 16px; }

/* The channel */

.join-how { margin-block-start: 32px; }

.join-how > .caption { margin-block-start: 12px; }

.join-how > .caption + .caption { margin-block-start: 0; }

.join-inside,
.join-updates,
.join-share { text-align: center; }

.features {
  display: grid;
  gap: 24px;
  margin: var(--inner) 0 0;
  padding: 0;
  list-style: none;
}

.features li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.features img { flex: none; }

.join-updates > h2 + *,
.join-updates > .feed-frame,
.join-share > h2 + p { margin-block-start: var(--inner); }

.share-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-block-start: 24px;
}

/* Articles (about, accessibility, privacy, terms), like an Apple article: one column, everything from the right. */

.prose > .updated { margin-block-start: 8px; }

.prose > .lead { margin-block-start: 16px; }

.prose h2 { margin-block-start: 48px; }

.prose h2 + * { margin-block-start: 16px; }

.prose :is(p, ul, ol) + :is(p, ul, ol) { margin-block-start: 16px; }

.prose ul { padding-inline-start: 20px; }

.prose li + li { margin-block-start: 8px; }

.slogan-line {
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.8125rem;
}

/* Footer, as Apple's: grey, 13/18. The name line, a line, three columns of one-line links (a 26px step), a line, ©. */

.site-footer {
  padding: 32px var(--pad) 24px;
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 0.8125rem;
  line-height: 1.125rem;
}

.footer-wordmark {
  color: var(--text);
  font-weight: 600;
}

.footer-groups {
  display: grid;
  gap: 24px;
  margin-block: 16px;
  padding-block: 16px;
  border-block: 1px solid var(--line);
}

.footer-heading {
  margin-block-end: 8px;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.125rem;
}

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

/* One line per link, as tall as its 44px target, nothing between the lines. */
.footer-links a {
  display: flex;
  min-block-size: 44px;
  color: #424245;
  white-space: nowrap;
}

.footer-links a[aria-current="page"] { color: var(--text-2); }

/* Phone (up to 734px): the menu folds behind ☰; open, it is a white panel under the header, rows of 48px. */
@media (max-width: 734px) {
  .menu-links {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    padding-inline: var(--pad);
    background: var(--bg);
    border-block-end: 1px solid var(--line);
  }

  .menu-links li + li { border-block-start: 1px solid var(--line); }

  .menu-links a {
    display: flex;
    align-items: center;
    min-block-size: 48px;
    font-size: 1.0625rem;
    line-height: 1.5625rem;
  }

  .cta-more { display: none; }

  .header-cta { display: none; }
}

/* Wide (from 735px): the menu is always open in the row and the ☰ is gone; type steps up. */
@media (min-width: 735px) {
  .menu::details-content {
    display: block;
    content-visibility: visible;
  }

  .menu-toggle { display: none; }

  .header-inner { gap: 40px; }

  .brand { margin-inline-end: 0; }

  .header-cta { margin-inline-start: auto; }

  .menu-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
  }

  .menu-links a {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  h1 {
    font-size: 3rem;
    line-height: 3.25rem;
  }

  h2 {
    font-size: 2rem;
    line-height: 2.25rem;
  }

  h3 {
    font-size: 1.5rem;
    line-height: 1.75rem;
  }

  .lead {
    font-size: 1.3125rem;
    line-height: 1.8125rem;
  }

  .hero { padding: 80px 48px; }

  .hero h1 {
    font-size: 4rem;
    line-height: 4.25rem;
  }

  .hero-mission {
    font-size: 1.75rem;
    line-height: 2.25rem;
  }

  .home-head h2 {
    font-size: 3rem;
    line-height: 3.25rem;
  }

  .subhead {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .band-card > h2 {
    font-size: 2.5rem;
    line-height: 2.75rem;
  }

  .band-card { padding: 56px 48px; }

  .tiles { gap: 24px; }

  .tiles > li { flex-basis: calc((100% - 72px) / 4); }

  .quick-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .nav-item { padding-block: 32px; }

  .note-card { padding: 40px; }

  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .prose h2 { margin-block-start: 56px; }

  .footer-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

/* Inside running text a thin line may appear on hover; nowhere else. */
p a:hover,
.tg-text a:hover {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.join-updates .tg-window { max-inline-size: 48rem; }

/* Telegram channel window (v6 part 2, owner: «стили брать из ленты Телеграма»). The fragment comes from
   feed/telegram_feed.py via SSI. Values are Telegram's own (design-options/v6-peanut/telegram-*.css), kept as
   --tg-* tokens; the head is a channel's head, the feed its wallpaper, each post a bubble. design-v6.md, part 2.
   v6.1: framed by one hairline; the avatar is the site icon (white U on ink), the foot a white bar. */

.tg-window {
  background: var(--bg);
  border: 1px solid var(--line);
}

.tg-window-head {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
  background: var(--bg);
  border-block-end: 1px solid var(--line);
}

.tg-window-head > div { min-inline-size: 0; }

/* The channel's avatar: the site icon, a white «U» on ink. */
.tg-mark {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: var(--tg-avatar);
  block-size: var(--tg-avatar);
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 1;
}

.tg-window-title {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 1.3;
}

.tg-window-head .quiet { margin: 0; }

/* The wallpaper: the channel's standard Telegram wallpaper (canvas data-colors) as four soft gradients
   at the points Telegram starts them from; no canvas, script, picture or pattern. */
.tg-window-feed {
  padding: var(--space-16);
  background-color: var(--tg-wall-1);
  background-image:
    radial-gradient(farthest-corner at 80% 10%, var(--tg-wall-1), transparent 45%),
    radial-gradient(farthest-corner at 35% 25%, var(--tg-wall-2), transparent 65%),
    radial-gradient(farthest-corner at 20% 90%, var(--tg-wall-3), transparent 65%),
    radial-gradient(farthest-corner at 65% 75%, var(--tg-wall-4), transparent 65%);
}

.tg-window-foot {
  display: flex;
  justify-content: center;
  padding: 0 var(--space-16);
  background: var(--bg);
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-14);
}

.tg-window-foot a { color: var(--tg-blue); }

.tg-feed {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Telegram's date between days (.tgme_widget_message_service_date): white 14px on a translucent green plaque,
   centred over the wallpaper. The empty state and the fallback are the same kind of service message. */
.tg-day,
.tg-empty {
  inline-size: fit-content;
  max-inline-size: 100%;
  margin: 0 auto var(--space-8);
  padding: var(--tg-service-pad-block) var(--tg-service-pad-inline);
  background: var(--tg-service);
  color: var(--bg);
  border-radius: var(--tg-service-radius);
  font-size: var(--fs-14);
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}

.tg-empty { margin: 0 auto; }

.tg-post + .tg-post > .tg-day { margin-block-start: var(--space-8); }

/* The bubble (.tgme_widget_message_bubble on t.me/s): white, no frame, Telegram's drop shadow, padding 12px 17px,
   15px corners and none where the tail is: the top start corner, on the right in Hebrew. */
.tg-article {
  position: relative;
  max-inline-size: 34rem;
  margin-inline-start: var(--tg-avatar-offset);
  padding: var(--tg-pad-block) var(--tg-pad-inline);
  background: var(--tg-bubble);
  color: var(--ink);
  border-radius: var(--tg-radius);
  border-start-start-radius: 0;
  filter: var(--tg-shadow);
  font-size: var(--fs-16);
  line-height: 1.6;
}

/* The tail: Telegram's 9×20 curve (.tgme_widget_message_bubble_tail), mirrored for RTL. */
.tg-article::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -8px;
  inline-size: 9px;
  block-size: 19px;
  background: var(--tg-bubble);
  clip-path: path("M1 0L0 0L0 19L1 19L1 17C1.193 14.161 1.876 11.233 3.05 8.218C3.954 5.893 5.496 3.733 7.675 1.738C8.083 1.365 8.11 0.732 7.737 0.325C7.548 0.118 7.28 0 7 0Z");
}

/* The avatar: a 36px circle at the start of the line, level with the top of the bubble; the site icon. */
.tg-article::after {
  content: "U" / "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(var(--tg-avatar-offset) * -1);
  display: grid;
  place-items: center;
  inline-size: var(--tg-avatar);
  block-size: var(--tg-avatar);
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 1;
}

/* The channel name at the top: 14px in Telegram blue (Telegram sets it 500; Heebo here has 400 and 600). */
.tg-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-8);
  font-size: var(--fs-14);
  line-height: 1.45;
}

.tg-channel {
  color: var(--tg-blue);
  font-weight: 600;
}

/* Small grey meta text, as Telegram's --second-color. Older fragments still show the date in the head. */
.tg-date,
.tg-edited,
.tg-views {
  color: var(--tg-grey);
  font-size: var(--fs-13);
  font-weight: 400;
}

/* Text 16px/21px. Heebo is the Hebrew companion of Roboto, Telegram's face. */
.tg-text {
  margin-block-start: var(--tg-gap);
  font-size: var(--fs-16);
  line-height: 1.3125;
}

/* Links in posts: Telegram blue, no line (a thin one on hover, as in running text elsewhere). */
.tg-text a {
  color: var(--tg-blue);
  font-weight: 400;
}

.tg-text a:hover { color: var(--tg-blue); }

/* Quote and link preview as in Telegram: a tinted block and a 3px bar at the start, painted as a background.
   This is the one 3px line on the site, by the owner's wish for Telegram's look; the bar sits on the right in RTL. */
.tg-text blockquote,
.tg-link-preview {
  inline-size: fit-content;
  max-inline-size: 100%;
  margin: var(--tg-gap) 0 0;
  padding-block: var(--tg-quote-pad-block);
  padding-inline: var(--tg-quote-pad-start) var(--tg-quote-pad-end);
  background-color: var(--tg-quote-bg);
  background-image: linear-gradient(var(--tg-blue), var(--tg-blue));
  background-size: var(--tg-bar) 100%;
  background-repeat: no-repeat;
  background-position: right top;
  color: var(--ink);
  border-radius: var(--tg-quote-radius);
}

.tg-text pre {
  margin: var(--space-8) 0;
  white-space: pre-wrap;
}

/* Photos run the whole width of the bubble between the name and the text (Telegram: margin 12px -17px);
   an album is a grid with Telegram's 2px seams. */
.tg-media {
  display: grid;
  gap: var(--tg-album-gap);
  margin-block: var(--tg-pad-block);
  margin-inline: var(--tg-bleed);
}

.tg-media:has(> .tg-photo + .tg-photo) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tg-media > .tg-photo:first-child:nth-last-child(odd) { grid-column: 1 / -1; }

.tg-photo { margin: 0; }

.tg-photo img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 28rem;
  object-fit: cover;
}

.tg-media:has(> .tg-photo + .tg-photo) img { aspect-ratio: 1; }
.tg-media:has(> .tg-photo + .tg-photo) > :first-child:nth-last-child(odd) img { aspect-ratio: 16 / 9; }

.tg-video-label {
  padding: var(--space-8);
  background: var(--ink);
  color: var(--bg);
  font-size: var(--fs-14);
  font-weight: 600;
  line-height: 1.45;
}

/* Link preview: Telegram's 14px block; the site name in blue, title and description in the text colour. */
.tg-link-preview {
  font-size: var(--fs-14);
  line-height: 1.25;
}

.tg-link-preview a {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  color: var(--ink);
}

.tg-link-site {
  color: var(--tg-blue);
  font-weight: 600;
}

.tg-link-title { font-weight: 600; }

.tg-link-description { margin: 0; }

/* The end of the bubble: «נערך» and the time, small and grey; the time links to the post, as Telegram's date.
   The 44px target reaches into the bubble's bottom padding. */
.tg-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0 var(--space-8);
  margin-block-end: var(--tg-footer-pull);
}

.tg-post-link {
  color: var(--tg-grey);
  font-size: var(--fs-13);
  font-weight: 400;
}

.tg-post-link:hover { color: var(--ink); }

/* Telegram drops the avatar on narrow screens (354px); the bubble keeps room for its tail. */
@media (max-width: 22.49rem) {
  .tg-article { margin-inline-start: var(--space-8); }
  .tg-article::after { display: none; }
}

@media (forced-colors: active) {
  .tg-article,
  .tg-empty,
  .tg-day,
  .photo-slot { border: 1px solid CanvasText; }

  .tg-article::before { display: none; }
}

/* The bottom dock (v7.3): the last element of the page, the cookie notice and under it the phone's join bar.
   Sticky at the end of the page: at the very bottom it sits in the flow under the footer,
   so it never covers the last link. Focus scrolls into view above it (scroll-padding below). */

.dock {
  position: sticky;
  inset-block-end: 0;
  z-index: 3;
}

/* Cookie notice (v5.5): a flat band under one hairline; no card. */

.cookie-notice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 var(--space-8);
  align-items: center;
  padding: var(--space-8) var(--pad);
  background: var(--bg-alt);
  color: var(--ink);
  border-block-start: 1px solid var(--line);
}

.cookie-notice[hidden] { display: none; }

.cookie-notice p {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.45;
}

/* A small × in the inline-end corner (the left in RTL); its hit area stays 44×44. */
.cookie-close {
  align-self: start;
  min-block-size: 44px;
  min-inline-size: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: var(--fs-24);
  line-height: 1;
  cursor: pointer;
}

.cookie-close:hover { background: var(--bg); }

/* Reserve the open notice's height for focus scrolling (WCAG 2.4.11), also at 200% text. */
html:has(.cookie-notice:not([hidden])) { scroll-padding-block-end: min(40vh, 10rem); }

/* The join bar (v7.3, owner: «кнопку «Присоединиться» фиксировано в нижней части экрана»): a phone only; from 735px
   the small button in the header. White under one hairline, the main button across the width of the header row. */
.join-bar { display: none; }

@media (max-width: 734px) {
  .join-bar {
    display: block;
    padding: 8px var(--pad) calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
    border-block-start: 1px solid var(--line);
  }

  .join-bar .pill {
    display: flex;
    inline-size: 100%;
  }

  /* The bar's height for focus scrolling: 8 + 8px, the 1px line and up to two lines of the button (1.5625rem each);
     with the notice open, its reserve on top. */
  html { scroll-padding-block-end: calc(17px + 3.125rem); }

  html:has(.cookie-notice:not([hidden])) { scroll-padding-block-end: calc(min(40vh, 10rem) + 17px + 3.125rem); }
}

/* Icons: Lucide (https://lucide.dev), inline in the pages.
   ISC License. Copyright (c) 2026 Lucide Icons and Contributors.
   The icons Lucide derives from Feather (among them chevron-left, link and search): MIT License,
   Copyright (c) 2013-present Cole Bemis. Full texts: design-options/v7-apple/icons/LICENSE-lucide.txt. */