/* Polina, 2026-10-09: the approved wordmark anchors the centre of every header. */
.shell > .topbar {
  display:grid; grid-template-columns:minmax(0,1fr) 108px minmax(0,1fr);
  align-items:center; column-gap:6px; min-height:54px; padding:0; margin-bottom:12px;
}
.shell > .topbar > .brand { grid-column:2; grid-row:1; justify-self:center; }
.shell > .topbar > .top-actions { display:contents; }
.shell > .topbar .top-actions > * { grid-column:3; grid-row:1; justify-self:end; max-width:100%; }
.shell > .topbar .top-actions > .app-back-button,
.shell > .topbar .top-actions > .account-nav { grid-column:1; justify-self:start; }
.shell > .topbar .top-actions > .btn {
  min-width:0; min-height:44px; padding:5px 6px; font-size:12px; line-height:1.25; white-space:normal;
}
body:has(#homeView.active):not(.telegram-welcome-mode) .shell > .topbar { display:grid; }
body.telegram-welcome-mode .shell > .topbar,
body.editor-mini-mode .shell > .topbar { display:none; }
#homeView .welcome-copy > .brand-animation,
#dashboardView .dashboard-brand-scene,
#authView .handoff-wordmark { display:none; }

/* Use the existing 44px row, keeping the preview and controls at their current height. */
#editorView .studio-shell[data-step] > .studio-head {
  display:grid; grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr); column-gap:6px;
}
#editorView .studio-shell[data-step] > .studio-head > .app-back-button {
  grid-column:1; grid-row:1; justify-self:start; order:initial;
}
#editorView .studio-shell[data-step] > .studio-head > .studio-head-wordmark {
  grid-column:2; grid-row:1; justify-self:center; display:block; width:88px; height:44px; object-fit:contain;
}
#editorView .studio-shell[data-step] > .studio-head > span {
  grid-column:3; grid-row:1; justify-self:end; max-width:100%; font-size:12px; line-height:17px; text-align:right;
}
#editorView .studio-shell[data-step] > .studio-save-status {
  align-self:flex-end; max-width:calc((100% - 100px)/2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.povod-pro-dialog .povod-pro-top {
  display:grid; grid-template-columns:minmax(0,1fr) 85px minmax(0,1fr); column-gap:6px; padding-inline:12px;
}
.povod-pro-dialog .povod-pro-brand { display:contents; }
.povod-pro-dialog .povod-pro-brand img { grid-column:2; grid-row:1; justify-self:center; }
.povod-pro-dialog .povod-pro-label { grid-column:1; grid-row:1; justify-self:start; }
.povod-pro-dialog .povod-pro-close { grid-column:3; grid-row:1; justify-self:end; }

/* Standalone information pages share the same header without changing document content. */
body > main:not(.shell) > header {
  display:grid; grid-template-columns:minmax(0,1fr) 108px minmax(0,1fr); align-items:center; column-gap:6px;
}
body > main:not(.shell) > header > img { grid-column:2; grid-row:1; justify-self:center; width:108px; height:54px; object-fit:contain; }
body > main:not(.shell) > header > .legal-back { grid-column:1; grid-row:1; justify-self:start; min-width:0; min-height:44px; padding:6px 8px; white-space:normal; }
@media(max-width:360px) {
  #editorView .studio-shell[data-step] > .studio-head > span { font-size:10px; line-height:14px; white-space:nowrap; }
  .shell > .topbar, body > main:not(.shell) > header { grid-template-columns:minmax(0,1fr) 94px minmax(0,1fr); }
  .shell > .topbar .top-actions > .btn { font-size:11px; padding-inline:4px; }
  body > main:not(.shell) > header > img { width:94px; height:47px; }
  body > main:not(.shell) > header > .legal-back { font-size:11px; padding-inline:5px; }
}

/* Telegram owns the left Back button and the right menu. Only our mark is drawn between them. */
.povod-native-wordmark { display:none; }
body.povod-native-header > .povod-native-wordmark {
  display:block; position:fixed; z-index:60; top:var(--povod-native-logo-top); left:50%;
  width:var(--povod-native-logo-width); height:44px; object-fit:contain; transform:translateX(-50%); pointer-events:none;
}
body.povod-native-back .app-back-button { display:none; }
body.povod-native-header .shell > .topbar {
  position:absolute; top:calc(var(--app-safe-top,0px) + 8px); left:16px; right:16px;
  width:auto; min-height:44px; margin:0; background:none; box-shadow:none; border:0;
}
body.povod-native-header .topbar > .brand,
body.povod-native-header .topbar .account-nav,
body.povod-native-header .topbar::before,
body.povod-native-header .telegram-welcome-brand { display:none; }
body.povod-native-header .shell > .topbar:not(:has(.account-avatar)),
body.povod-native-header.telegram-welcome-mode .shell > .topbar,
body.povod-native-header.editor-mini-mode .shell > .topbar { display:none; }
body.povod-native-header #editorView .studio-shell[data-step] > .studio-head { display:none; }
body.povod-native-header #editorView .studio-shell[data-step] > .studio-save-status {
  position:static; margin:0 0 4px; min-height:12px; max-width:100%; font-size:9px; line-height:12px;
}
body.povod-native-header > main:not(.shell) > header { display:none; }
body.povod-native-header:has(.povod-pro-dialog[open],.povod-legal-dialog[open]) > .povod-native-wordmark { visibility:hidden; }
@media(min-width:701px) {
  body.povod-native-header .shell > .topbar { left:max(24px,calc((100vw - 1072px)/2)); right:max(24px,calc((100vw - 1072px)/2)); }
}

/* An opaque native safe area stays above every scrolling app surface. */
.povod-native-header-surface { display:none; }
body.povod-native-header > .povod-native-header-surface {
  content:''; display:block; position:fixed; inset:0 0 auto; width:100%; height:var(--app-safe-top,0px);
  z-index:58; background:#faf9f6; pointer-events:auto;
  transform:none; filter:none; opacity:1; border-radius:0;
}
html:has(body.povod-native-header), body.povod-native-header { overscroll-behavior-y:none; }
body.povod-native-header .shell > .topbar { position:fixed; z-index:62; }
body.povod-native-header:has(.shell > .topbar .account-avatar):not(.telegram-welcome-mode):not(.editor-mini-mode) > .povod-native-header-surface {
  height:calc(var(--app-safe-top,0px) + 56px);
}
body.povod-native-header:has(.shell > .topbar .account-avatar):not(.telegram-welcome-mode):not(.editor-mini-mode) .shell {
  padding-top:calc(var(--app-safe-top,0px) + 56px);
}
/* The ordinary header also keeps a solid surface when Telegram falls back. */
body:not(.povod-native-header) .shell > .topbar {
  position:sticky; z-index:62; top:var(--app-safe-top,0px); background:#faf9f6;
}
body:not(.povod-native-header) .shell > .topbar::after {
  content:''; position:absolute; inset:calc(-1 * var(--app-safe-top,0px)) -24px -2px;
  z-index:-1; background:#faf9f6; pointer-events:none;
}

/* Guest links keep an opaque root surface above scrolling content, including iOS insets. */
body:has(#publicView.active):not(.povod-preview-mode):not(.povod-native-header){--povod-guest-safe-top:var(--app-safe-top,env(safe-area-inset-top,0px));}
body:has(#publicView.active):not(.povod-preview-mode):not(.povod-native-header)::after{content:'';position:fixed;inset:0 0 auto;height:calc(var(--povod-guest-safe-top) + 70px);background:#faf9f6;z-index:61;pointer-events:none;transform:none;opacity:1;}
body:has(#publicView.active):not(.povod-preview-mode):not(.povod-native-header) .shell{padding-top:calc(var(--povod-guest-safe-top) + 82px);}
body:has(#publicView.active):not(.povod-preview-mode):not(.povod-native-header) .shell>.topbar{position:fixed;top:calc(var(--povod-guest-safe-top) + 16px);left:50%;right:auto;width:min(calc(100% - 24px),1072px);transform:translateX(-50%);margin-bottom:0;background:#faf9f6;isolation:isolate;}
body:has(#publicView.active):not(.povod-preview-mode):not(.povod-native-header) .shell>.topbar::before,body:has(#publicView.active):not(.povod-preview-mode):not(.povod-native-header) .shell>.topbar::after{content:none;}
@media(min-width:701px){body:has(#publicView.active):not(.povod-preview-mode):not(.povod-native-header) .shell>.topbar{width:min(calc(100% - 48px),1072px);}}

/* A plain chevron stays centred beside Back, without an icon bubble. */
body .app-back-button>span{display:block;position:relative;flex:0 0 10px;width:10px;height:10px;border:0;border-radius:0;background:none;box-shadow:none;font-size:0;line-height:0;color:inherit;}
body .app-back-button>span::before{content:'';position:absolute;top:50%;left:3px;width:7px;height:7px;box-sizing:border-box;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-50%) rotate(45deg);}
/* The invitation footer is compact, with a white coral-edged capsule and the existing glint. */
body #publicView .guest-create{margin:10px auto 0;padding:0;border:0;background:none;box-shadow:none;}
body #publicView .guest-create p{margin:0 0 2px;font:400 11px/1.4 Onest,system-ui;color:#8c8680;}
body #publicView .guest-create .btn{position:relative;isolation:isolate;min-height:44px;padding:6px 14px;border:0;border-radius:999px;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden;color:#625b55;font:400 11px/1.4 Onest,system-ui;}
body #publicView .guest-create .btn::before{content:'';position:absolute;inset:6px 0;z-index:-1;border:1px solid #f47b5c66;border-radius:999px;background:linear-gradient(145deg,#fff,#fffdfa);box-shadow:inset 0 1px 1px #fff,inset 0 -1px 2px #d6beb11a,0 2px 6px #6651440b;}
body #publicView .guest-create .btn::after{content:'';position:absolute;top:7px;bottom:7px;left:-10%;width:32%;pointer-events:none;border-radius:999px;background:linear-gradient(105deg,transparent,#ffffffdb,transparent);transform:translateX(-240%) skewX(-16deg);opacity:0;animation:povod-button-glint 9s ease-in-out infinite;}
body:has(#publicView.active):not(.povod-preview-mode) .shell>.footer{margin-top:12px;padding-top:0;border-top:0;}
@media(prefers-reduced-motion:reduce){body #publicView .guest-create .btn::after{animation:none;display:none;}}