/* Tab headers: one flat surface from Telegram's own header down to the page, one title that shrinks into the bar.
   Motion is transform and opacity only. */
:root {
  --nav-h: 52px;
  --avatar-c1: color-mix(in srgb, var(--accent) 72%, #fff);
  --avatar-c2: var(--accent);
  --hd-lift: 0 1px 6px rgba(0, 0, 0, .07);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --hd-lift: 0 1px 8px rgba(0, 0, 0, .34); }
}
:root[data-theme="dark"] { --hd-lift: 0 1px 8px rgba(0, 0, 0, .34); }

.screen { --large-size: 34px; --large-line: 41px; --hero-size: 24px; --hero-line: 30px; }

/* Top bar. Its background comes in only as far as the text on it needs, and it ends in a fade, not a line. */
.navbar { position: absolute; left: 0; right: 0; top: 0; z-index: 10; padding-top: var(--safe-top); pointer-events: none; }
.navbar-bg {
  position: absolute; left: 0; right: 0; top: 0; bottom: -10px; opacity: 0; will-change: opacity;
  /* Nearly the page's own colour, with no saturation boost: a strong card under the bar must not tint it or read through the fade. */
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent);
}
.navbar-row { position: relative; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding-inline: calc(var(--gutter) + var(--safe-left)) calc(var(--gutter) + var(--safe-right)); }
.navbar-side { min-width: 36px; display: flex; align-items: center; gap: 8px; z-index: 1; pointer-events: auto; }
.navbar-trail { justify-content: flex-end; }
.navbar-center { position: absolute; top: 0; bottom: 0; left: calc(64px + var(--safe-left)); right: calc(64px + var(--safe-right)); display: flex; align-items: center; justify-content: center; }
.navbar-title { min-width: 0; font-weight: 600; font-size: 17px; line-height: 22px; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A screen that docks a value (nav.js dock): its title holds still at the start of the bar, right after the back button, and the value docks under it.
   The bar's surface reaches far enough down to sit under the docked value too. */
.screen--docked .navbar-center { position: static; flex: 1 1 0; min-width: 0; margin-inline: 8px; justify-content: flex-start; }
.screen--docked .navbar-bg { bottom: -24px; }
/* Where Telegram draws the back button itself, the bar's start holds nothing else and the title takes it. */
.in-telegram.tg-back .screen--docked .navbar-lead { display: none; }
.in-telegram.tg-back .screen--docked .navbar-center { margin-inline-start: 0; }

/* The title itself. nav.js owns its transform: it starts over the slot in the page and lands on the bar's centre line. */
.hd-glide { position: absolute; left: 0; top: 0; z-index: 2; transform-origin: 0 0; white-space: nowrap; pointer-events: none; }
.hd-glide.is-gliding { will-change: transform; }
/* A short page still scrolls far enough for the title to land. A docked value has no such room: a card that fits does not scroll. */
.screen--glides:not(.screen--docked) .screen-body { min-height: calc(100% + 72px); }

.navbtn {
  position: relative; width: 40px; height: 40px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow: var(--hd-lift), inset 0 .5px 0 var(--glass-edge), inset 0 0 0 .5px var(--glass-line);
}
.navbtn::after { content: ""; position: absolute; inset: -4px; }
.navbtn--flat { width: 32px; height: 32px; background: var(--fill); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--hint); }
.navbtn--flat::after { inset: -6px; }
.in-telegram.tg-back .navbtn-back { display: none; }
.navbtn[aria-pressed="true"] { color: #f5b301; }
.navbtn.navbtn--bell[aria-pressed="true"] { color: var(--link); }

/* Avatar: the same face on the button and in the hero */
.hd-face {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; flex: none;
  font-weight: 600; font-size: 14px; line-height: 1; letter-spacing: -.01em; color: var(--text); background: var(--fill);
}
.hd-face.is-filled { color: #fff; background: linear-gradient(160deg, var(--avatar-c1), var(--avatar-c2)); }
.hd-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hd-avatar { width: 36px; height: 36px; border-radius: 18px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Head */
.screen-head { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 0 calc(var(--gutter) + var(--safe-right)) 14px calc(var(--gutter) + var(--safe-left)); }
.hd-slot--large { flex: none; height: var(--large-line); }
.hd-slot--hero { flex: none; height: var(--hero-line); }
.large-title {
  max-width: calc(100% - 2 * var(--gutter) - var(--safe-left) - var(--safe-right));
  font: 700 var(--large-size)/var(--large-line) var(--font-display); letter-spacing: -.024em; overflow: hidden; text-overflow: ellipsis;
}
.screen--compact .large-title { max-width: calc(100% - 2 * var(--gutter) - var(--safe-left) - var(--safe-right) - 48px); }
.hd-meta { display: flex; align-items: center; gap: 10px; max-width: 100%; min-height: 18px; }
.hd-meta > * { flex: none; }

/* Profile hero */
.hd-hero { align-items: center; padding-top: 6px; padding-bottom: 22px; text-align: center; }
.hd-hero-face { width: 88px; height: 88px; margin-bottom: 12px; transform-origin: 50% 100%; will-change: transform, opacity; }
.hd-hero-face .hd-face { font-size: 32px; letter-spacing: -.02em; }
.hd-hero-name { max-width: calc(100% - 2 * var(--gutter)); font: 700 var(--hero-size)/var(--hero-line) var(--font-display); letter-spacing: -.022em; overflow: hidden; text-overflow: ellipsis; }
.hd-hero-user { max-width: 100%; font-size: 15px; line-height: 20px; color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-hero-user[hidden] { display: none; }

/* The brand mark at the foot of Profile */
.app-sign { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 2px 0 6px; color: var(--hint); font-size: 13px; line-height: 18px; letter-spacing: -.005em; opacity: .75; }
.logo-mark { display: block; flex: none; }

/* Live example in the kit */
.hd-preview { --safe-top: 0px; position: relative; height: 204px; border-radius: var(--r-group); overflow: hidden; box-shadow: inset 0 0 0 .5px var(--sep); isolation: isolate; }
.hd-preview { container-type: inline-size; }
.hd-preview .screen-scroll { padding-bottom: 12px; overscroll-behavior-y: auto; }
@container (max-width: 340px) { .hd-preview .market-spark { display: none; } }

@container app (max-width: 350px) {
  .screen { --large-size: 30px; --large-line: 37px; --hero-size: 22px; --hero-line: 28px; }
}