/* @platform/rail embed (docs/standard/rail-embed.md): reserve the rail's space and paint its strip
   on the FIRST frame, before any script. Link it in <head>; put <platform-rail> first in <body>.
   Sizes = @platform/tokens rail.* (70px strip, 56px phone bar, breakpoint 1000px); test/embed.test.ts
   keeps them equal. Colours = the rail's own neutral palette (light / dark). */
/* 1. One first-paint page background for the ecosystem (tokens page.bg = PostPilot --bg): <html
   class="pl-page"> (theme-init.js adds it) paints it with the matching color-scheme, so a switch
   between products never flashes white or jumps colour before the app draws. :where() = zero
   specificity: any host html/body background still wins. */
:where(:root.pl-page){background:#ffffff;color-scheme:light}
@media (prefers-color-scheme:dark){
  :where(:root.pl-page:not([data-theme="light"])){background:#07080c;color-scheme:dark}
}
:where(:root.pl-page[data-theme="dark"]){background:#07080c;color-scheme:dark}
:root{--pl-rail-width:70px;--pl-rail-top:0px;--pl-rail-menu-width:0px}
/* ТЗ 3.6.3: the rail's section menu (rail-embed.md §7); the rail sets data-pl-rail-menu */
:root[data-pl-rail-menu="open"]{--pl-rail-menu-width:224px}
@media (max-width:999.98px){
  :root,:root[data-pl-rail-menu]{--pl-rail-width:0px;--pl-rail-top:56px;--pl-rail-menu-width:0px}
  :root[data-pl-rail-bar="none"]{--pl-rail-top:0px}
}
/* the reserve: only on pages that actually carry the rail */
body:has(>platform-rail){padding-left:calc(var(--pl-rail-width) + var(--pl-rail-menu-width));padding-top:var(--pl-rail-top);box-sizing:border-box}
platform-rail{display:block}
/* until the bundle defines the element: the strip, the logo tile and three product slots, at the
   positions of the rail's own skeleton (no flash, no shift when it upgrades — the defined element's
   :host has exactly this box) */
platform-rail:not(:defined){position:fixed;z-index:1000;top:0;bottom:0;left:0;width:var(--pl-rail-width);background:#f4f4f5;box-shadow:inset -1px 0 0 rgba(24,24,27,.07);--pl-e-tile:#18181b;--pl-e-slot:#f1f1f3}
platform-rail:not(:defined)::before{content:"";position:absolute;top:14px;left:calc(50% - 16px);width:32px;height:32px;border-radius:8px;background:var(--pl-e-tile)}
platform-rail:not(:defined)::after{content:"";position:absolute;top:86px;left:calc(50% - 10px);width:20px;height:20px;border-radius:6px;background:var(--pl-e-slot);box-shadow:0 60px 0 var(--pl-e-slot),0 120px 0 var(--pl-e-slot)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) platform-rail:not(:defined){background:#09090b;box-shadow:inset -1px 0 0 rgba(255,255,255,.065);--pl-e-tile:#f4f4f5;--pl-e-slot:#1d1d21}
}
:root[data-theme="dark"] platform-rail:not(:defined){background:#09090b;box-shadow:inset -1px 0 0 rgba(255,255,255,.065);--pl-e-tile:#f4f4f5;--pl-e-slot:#1d1d21}
@media (max-width:999.98px){
  platform-rail:not(:defined){bottom:auto;right:0;width:auto;height:var(--pl-rail-top);box-shadow:inset 0 -1px 0 rgba(24,24,27,.07)}
  platform-rail:not(:defined)::before,platform-rail:not(:defined)::after{display:none}
}
/* 2. Optional content entrance: put .pl-content-enter on the product's MAIN area (never on <body>
   or the rail) — it fades + lifts 4px in 140 ms after a page load, so the switch reads as one app.
   No fill-mode: once done it leaves no transform behind (fixed children keep the viewport). The
   rail never fades. Off with prefers-reduced-motion. */
@keyframes pl-content-enter{from{opacity:0;transform:translateY(4px)}}
.pl-content-enter{animation:pl-content-enter 140ms cubic-bezier(.2,.7,.3,1)}
/* the rail never fades: not on the rail, nor on an ancestor that carries it */
:root.pl-content-enter,body.pl-content-enter,platform-rail.pl-content-enter,.pl-content-enter:has(platform-rail){animation:none}
@media (prefers-reduced-motion:reduce){.pl-content-enter{animation:none}}
/* rail 2.5 (rail-embed.md §5): <html data-pl-enter> = a prerendered page is shown, the entrance
   replays (:where() keeps the rules above stronger); data-pl-leaving = dim after 150 ms of loading */
@keyframes pl-content-enter-a{from{opacity:0;transform:translateY(4px)}}
:where(:root[data-pl-enter]) .pl-content-enter{animation:pl-content-enter-a 140ms cubic-bezier(.2,.7,.3,1)}
:root[data-pl-leaving] .pl-content-enter:not(body,platform-rail,:has(platform-rail)){opacity:.6;transition:opacity .2s 150ms}
@media (prefers-reduced-motion:reduce){:where(:root[data-pl-enter]) .pl-content-enter{animation:none}}
/* 3. Page header «Группа – вкладка» above the work area (rail-embed.md §6): <h1 class="pl-page-title">
   <span class="pl-page-title__group">Группа</span> <span class="pl-page-title__tab">Вкладка</span></h1>
   (a space between the spans). Group bold, tab regular, an en dash; @platform/tokens with fallbacks. */
.pl-page-title{margin:0;min-width:0;font:var(--pl-type-display,600 20px/28px "Golos Text",sans-serif);letter-spacing:var(--pl-type-display-ls,-.022em);color:var(--pl-ink,inherit);overflow-wrap:anywhere}
.pl-page-title__group{font-weight:600}
.pl-page-title__tab{font-weight:400;color:var(--pl-ink-2,inherit)}
.pl-page-title__group+.pl-page-title__tab::before{content:"\2013\a0";color:var(--pl-ink-3,inherit)}