/* The skip link: off screen until it takes focus. It is not hidden with display:none — an
   element hidden that way cannot take focus at all, meaning the link would not exist for the
   very person it is made for. */
.sh-skip { position:absolute; left:-9999px; top:0; z-index:100; background:var(--accent,#3fb950);
           color:var(--on-accent,#06210c); padding:10px 16px; border-radius:0 0 10px 0; font-weight:600;
           font-size:14px; text-decoration:none; }
.sh-skip:focus { left:0; }

/* The header keeps its own token names because it is translucent and blurred, and those two
   need values the rest of the page never asks for. The light set is the same roles, not the
   same numbers. */
:root[data-theme="light"] header.sh{
    --sh-bg:rgba(255,255,255,.86); --sh-muted:#5b6775; --sh-ink:#ffffff; --sh-soft:#e2e7ee;
    /* The dropdown is opaque where the bar is translucent — it sits over the page content,
       and a blurred menu with text behind it is the one place blur stops being decoration
       and starts being a legibility problem. */
    --sh-panel:#ffffff; --sh-hover:rgba(0,0,0,.05);
}
header.sh{
    --sh-panel:#141b23; --sh-hover:rgba(255,255,255,.06);
    --sh-bg:rgba(15,20,25,.88); --sh-text:var(--text,#e6edf3); --sh-muted:#93a1b0;
    --sh-green:var(--accent,#3fb950); --sh-ink:#0c130a; --sh-line:var(--border,#2d3744); --sh-soft:#212a35;
    position:sticky; top:0; z-index:200; margin:0; padding:0; border:0;
    background:var(--sh-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--sh-soft);
    font-family:system-ui,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    display:block; box-shadow:none;
    /* The chat page is a flex column; without this the header shrinks there. */
    flex:none;
  }
header.sh *{box-sizing:border-box;}
/* Flat. The pages underneath put shadows and gradients on their own `button`; in the bar
     that looks like raised buttons, and differently on every page. Removed here in one go. */
  header.sh button, header.sh .sh-cta, header.sh .sh-link{
        box-shadow:none; text-shadow:none; background-image:none; filter:none;}
/* 1080px was the width of a bar with four sections in it. There are seven now, so the
   column grows on a screen that has the room; below that the nav scrolls (see .sh-nav). */
.sh .sh-in{max-width:1240px; margin:0 auto; padding:0 16px;
             display:flex; align-items:center; gap:12px; min-height:58px;}
.sh .sh-brand{display:flex; align-items:center; gap:9px; flex:none; min-height:40px;
                text-decoration:none; color:var(--sh-text); font-weight:600; font-size:1.06rem;}
.sh .sh-brand img{width:26px; height:26px; display:block;}
.sh .sh-brand span{white-space:nowrap;}
/* `flex:1 1 auto` + `min-width:0` is what stops the nav from pushing „Надградете" off the
   right edge: without it the row cannot shrink and the two overlap. When there are more
   sections than fit, the nav scrolls sideways inside itself rather than colliding — and the
   scrollbar is hidden, because a visible one inside a 58px bar is worse than the overflow. */
.sh .sh-nav{display:none; gap:2px; margin-left:6px; min-width:0; flex:1 1 auto;
             overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;}
.sh .sh-nav::-webkit-scrollbar{display:none;}
.sh .sh-nav a{color:var(--sh-muted); text-decoration:none; font-size:.92rem;
                padding:9px 9px; border-radius:8px; white-space:nowrap;}
.sh .sh-nav a:hover{color:var(--sh-text); background:var(--sh-hover,rgba(255,255,255,.06));}
.sh .sh-nav a[aria-current]{color:var(--sh-text); background:rgba(63,185,80,.13);}
/* „Инструменти ▾" — a bar link that is a button. Same metrics as the links around it, so it
   reads as one of them; the menu is opaque like the ☰ panel and for the same reason. */
.sh .sh-dd{position:relative; flex:none;}
.sh .sh-ddb{display:inline-flex; align-items:center; gap:5px; color:var(--sh-muted); background:transparent;
            border:0; font:inherit; font-size:.92rem; padding:9px 9px; border-radius:8px; white-space:nowrap; cursor:pointer;}
.sh .sh-ddb:hover, .sh .sh-ddb[aria-expanded="true"]{color:var(--sh-text); background:var(--sh-hover,rgba(255,255,255,.06));}
.sh .sh-ddb[aria-current]{color:var(--sh-text); background:rgba(63,185,80,.13);}
.sh .sh-ddc{font-size:.8em; transition:transform .15s;}
.sh .sh-ddb[aria-expanded="true"] .sh-ddc{transform:rotate(180deg);}
.sh .sh-ddm{position:absolute; left:0; top:calc(100% + 6px); width:min(340px, 92vw); z-index:210;
            background:var(--sh-panel,#141b23); border:1px solid var(--sh-line); border-radius:12px; padding:8px;
            box-shadow:0 14px 34px rgba(0,0,0,.35); display:flex; flex-direction:column;}
.sh .sh-ddm[hidden]{display:none;}
.sh .sh-ddm a{display:flex; flex-direction:column; gap:1px; color:var(--sh-text); text-decoration:none;
              padding:8px 10px; border-radius:8px; font-size:.92rem; line-height:1.3;}
.sh .sh-ddm a small{color:var(--sh-muted); font-size:.78rem;}
.sh .sh-ddm a:hover{background:var(--sh-hover,rgba(255,255,255,.06));}
.sh .sh-ddm a[aria-current]{color:var(--sh-green); font-weight:600;}
.sh .sh-right{margin-left:auto; display:flex; align-items:center; gap:8px; flex:none;}
.sh .sh-link{color:var(--sh-muted); text-decoration:none; font-size:.92rem;
               padding:9px 8px; border-radius:8px;}
.sh .sh-link:hover{color:var(--sh-text);}
.sh .sh-cta{display:inline-flex; align-items:center; background:var(--sh-green);
              color:var(--sh-ink); text-decoration:none; font-weight:600; font-size:.9rem;
              padding:9px 15px; border-radius:9px; white-space:nowrap;}
/* Not a lighter green: on the light theme that put white ink on #4ac95c (1.9:1). And not a
   filter either — the header's buttons are flat by rule. An underline is enough. */
.sh .sh-cta:hover{text-decoration:underline; text-underline-offset:3px;}
/* 44px square: the minimum comfortable touch target, and the reason the old header
     was unusable on a phone — its links were simply display:none below 900px. */
  .sh .sh-burger{display:inline-flex; flex-direction:column; justify-content:center;
                 align-items:center; gap:4px; width:44px; height:44px; padding:0;
                 background:transparent; border:1px solid var(--sh-line); border-radius:10px;
                 cursor:pointer; flex:none;}
.sh .sh-burger span{display:block; width:17px; height:2px; border-radius:2px;
                      background:var(--sh-text); transition:transform .18s, opacity .18s;}
.sh .sh-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.sh .sh-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.sh .sh-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.sh .sh-panel{border-top:1px solid var(--sh-soft); background:var(--sh-panel,#141b23);
                padding:8px 16px 14px; display:flex; flex-direction:column; z-index:210;}
.sh .sh-panel[hidden]{display:none;}
.sh .sh-sections{display:flex; flex-direction:column;}
.sh .sh-panel a, .sh .sh-panel button{
        display:block; width:100%; text-align:left; color:var(--sh-text);
        text-decoration:none; font:inherit; font-size:1rem; background:transparent;
        border:0; padding:13px 8px; border-radius:9px; cursor:pointer;}
.sh .sh-panel a:hover, .sh .sh-panel button:hover{background:var(--sh-hover,rgba(255,255,255,.06));}
.sh .sh-panel a[aria-current]{color:var(--sh-green); font-weight:600;}
.sh .sh-sep{height:1px; background:var(--sh-soft); margin:7px 0;}
/* The theme switch. Styled as one of the menu's own rows rather than as a button, because
   that is where it sits — a setting among the links, not an action competing with „Изход". */
.sh .sh-theme{display:flex; align-items:center; gap:.5em; width:100%; text-align:left;
  background:none; border:0; padding:8px; border-radius:8px; cursor:pointer;
  color:var(--text,#e6edf3); font:inherit; font-size:.9rem;}
.sh .sh-theme:hover{background:var(--panel-2,#243140);}
.sh .sh-theme span[aria-hidden]{color:var(--accent,#3fb950); font-size:1rem; line-height:1;}

/* The Ултра star. Accent-coloured and a shade larger than the address it sits before, so it
   reads as a mark rather than as a stray character in an email. */
.sh .sh-star{color:var(--accent,#3fb950); font-size:.95rem; margin-right:.28em;
  line-height:1; vertical-align:-1px;}
.sh .sh-who{display:block; padding:4px 8px 8px; color:var(--sh-muted); font-size:.82rem;
              overflow:hidden; text-overflow:ellipsis;}
.sh .sh-panel form{margin:0;}
/* ☰ stays on a large screen too. It is the ONLY place with „Изход", the profile and
     „Плащания" — hidden above 860px, a desktop user simply has no way to sign out. Seen when
     the headers were unified: the chat had a menu of its own, always visible, and the shared
     header hid it. On a large screen the panel drops as a menu on the right, so as not to take
     the full width. */
  @media(min-width:860px){
    .sh .sh-nav{display:flex;}
    .sh .sh-in{position:relative;}
    .sh .sh-sections{display:none;}
    /* The right alignment is against the COLUMN (max-width:1080px), not against the window.
       The panel is a sibling of `.sh-in`, so `right:16px` measured it from the edge of the
       screen while ☰ stands at the edge of the centred column — on a wide monitor the two
       parted by (100vw − 1080px)/2 and the menu hung far to the right, away from its button.
       620px = half the column; +16px is its inner padding. */
    .sh .sh-panel{position:absolute; top:calc(100% + 6px);
                  right:max(16px, calc(50% - 604px)); width:min(280px,92vw);
                  border:1px solid var(--sh-line); border-radius:12px; padding:8px;}
  }
/* On a narrow phone something has to give, and the order matters. Drop „Вход" first — it
     is repeated inside the ☰ panel — then shorten the call to action, and only give up the
     wordmark last: it is the only branding above the fold. Measured, not guessed: at 360px
     (Galaxy S-class portrait, the narrowest common phone) brand + „Задай въпрос" + burger
     overflowed and pushed the burger off-screen, which is the one control that must never
     be unreachable. „Питай" buys the ~55px that fixes it. */
  .sh .sh-short{display:none;}
@media(max-width:520px){ .sh .sh-link{display:none;} }
@media(max-width:430px){
    .sh .sh-long{display:none;}
    .sh .sh-short{display:inline;}
    .sh .sh-in{gap:8px; padding:0 12px;}
  }
@media(max-width:320px){ .sh .sh-brand span{display:none;} }

/* The chat's own heading. The page IS the product, so there is nowhere sensible to
   put a visible <h1> — but a page with no h1 tells a search engine and a screen
   reader nothing about what it is. Same off-canvas trick as .sh-skip. */
.sh-h1 { position:absolute; left:-9999px; top:auto; width:1px; height:1px;
         overflow:hidden; }