/* Экстрабас · Автопарк — общая шапка всех разделов.
   Классы с префиксом xb-, чтобы шапку можно было вставить и в страницу
   «Сервисного графика» (app/pages/avtopark.html) без конфликта с её стилями.
   Нужен tokens.css. */

.xb-skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);
  padding:10px 14px;border-radius:var(--r-s);text-decoration:none;font:600 14px/1.2 var(--sans)}
.xb-skip:focus{top:12px}

.xb-hdr{background:var(--hdr);border-bottom:1px solid var(--line);font:400 15px/1.5 var(--sans);color:var(--ink);
  -webkit-font-smoothing:antialiased}
.xb-hdr *,.xb-hdr *::before,.xb-hdr *::after{box-sizing:border-box}
.xb-hdr-in{max-width:1280px;margin:0 auto;padding:10px 28px;min-height:64px;display:flex;align-items:center;gap:10px 28px}
.xb-logo{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;flex:none;
  font-weight:700;font-size:15px;letter-spacing:-.01em;line-height:1.15}
.xb-logo img{width:36px;height:36px;border-radius:10px;display:block;flex:none}
.xb-logo small{display:block;font-weight:500;font-size:12px;color:var(--muted);letter-spacing:0}
.xb-secs{display:flex;gap:4px;flex:1;min-width:0}
.xb-secs a{height:40px;padding:0 14px;border-radius:10px;display:flex;align-items:center;font-size:14px;
  font-weight:500;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.xb-secs a:hover{background:var(--panel);color:var(--ink)}
.xb-secs a[aria-current]{background:var(--brand-wash);color:var(--brand-ink);font-weight:600}
.xb-secs .xb-m{display:none}
.xb-end{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}

/* переключатель темы */
.xb-theme{display:inline-flex;padding:3px;gap:2px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.xb-theme button{width:36px;height:32px;margin:0;padding:0;border:0;border-radius:9px;background:transparent;
  color:var(--muted);display:grid;place-items:center;cursor:pointer;font:inherit}
.xb-theme button:hover{color:var(--ink)}
.xb-theme button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.xb-theme svg{display:block}

.xb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;padding:0 13px;
  border-radius:9px;border:1px solid var(--line-strong);background:var(--card);color:var(--ink);
  font:500 13.5px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer}
.xb-btn:hover{background:var(--panel)}
.xb-btn.xb-prim{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:600}
.xb-btn.xb-prim:hover{background:var(--brand-ink);border-color:var(--brand-ink)}
.xb-menu-btn{display:none;width:44px;height:44px;padding:0;margin:0;border:1px solid var(--line-strong);border-radius:12px;
  background:var(--card);color:var(--ink);align-items:center;justify-content:center;cursor:pointer}

/* подразделы «Расхода топлива» */
.xb-sub{max-width:1280px;margin:0 auto;padding:0 28px;display:flex;gap:26px;overflow-x:auto;scrollbar-width:none}
.xb-sub a{display:flex;align-items:center;height:46px;font-size:14px;font-weight:500;color:var(--ink-2);
  text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.xb-sub a:hover{color:var(--ink)}
.xb-sub a[aria-current]{color:var(--ink);font-weight:600;border-bottom-color:var(--brand)}
/* на узком экране не всё помещается — затухание у края подсказывает, что пункты есть дальше */
.xb-sub.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
.xb-sub.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px);mask-image:linear-gradient(90deg,transparent,#000 48px)}
.xb-sub.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}

.xb-hdr a:focus-visible,.xb-hdr button:focus-visible,.xb-skip:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

@media (max-width:900px){
  .xb-hdr-in{flex-wrap:wrap;padding:8px 16px;gap:10px 12px}
  .xb-logo{flex:1}
  .xb-menu-btn{display:flex;order:3}
  .xb-end{order:2;margin-left:0}
  .xb-end .xb-btn{display:none}
  .xb-secs{display:none;order:5;width:100%;flex:none;flex-direction:column;gap:2px;padding-bottom:6px}
  .xb-hdr.xb-open .xb-secs{display:flex}
  .xb-secs a{height:44px}
  .xb-secs .xb-m{display:flex}
  .xb-sub{padding:0 16px;gap:20px}
}
@media (max-width:420px){ .xb-logo span{display:none} }
@media (prefers-reduced-motion:reduce){ .xb-hdr *{transition:none!important} }