/* The product's tabs (templates/_product_nav.html): one look in the account
   pages and in the workspace. Colours come from cloud_brand.css. */
.product-nav { display: flex; align-items: stretch; align-self: stretch; gap: 4px; }
.product-nav a {
  display: inline-flex; align-items: center; padding: 0 10px;
  color: var(--ne-muted); font-size: 13px; font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; border-top: 2px solid transparent;
}
.product-nav a:hover { color: var(--ne-text); }
.product-nav a[aria-current="page"] { color: var(--ne-text); border-bottom-color: var(--ne-accent); }
.product-nav a:focus-visible { outline: 3px solid var(--ne-focus); outline-offset: -3px; }

.product-nav-toggle {
  display: none; order: 99; flex: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  border: 1px solid var(--ne-control); border-radius: 2px;
  background: transparent; color: var(--ne-text);
}
.product-nav-toggle span { display: block; width: 16px; height: 2px; background: currentColor; }
.product-nav-toggle:focus-visible { outline: 3px solid var(--ne-focus); outline-offset: 2px; }

/* On a narrow screen the tabs are a menu under the header, one tab per row,
   each a full-width target a finger hits. Folded from 1020 px since the sixth
   tab, «Инструкция» (owner, 04.10): at 920 the row no longer fitted. */
@media (max-width: 1020px) {
  .product-nav-toggle { display: inline-flex; }
  /* `.chrome .product-nav` too: the workspace's own `.chrome nav` rule is
     more specific than a bare class and would keep the menu open. */
  .product-nav, .chrome .product-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 300;
    flex-direction: column; gap: 0; margin: 0;
    padding: 4px 16px 12px; background: var(--ne-page);
    border-bottom: 1px solid var(--ne-line); box-shadow: 0 12px 24px rgb(0 0 0 / .18);
  }
  .product-nav.is-open, .chrome .product-nav.is-open { display: flex; }
  .product-nav a {
    min-height: 48px; padding: 0 4px; font-size: 16px;
    border-top: 0; border-bottom: 1px solid var(--ne-line);
  }
  .product-nav a:last-child { border-bottom: 0; }
  .product-nav a[aria-current="page"] { color: var(--ne-accent-text); border-bottom-color: var(--ne-line); }
  /* With the tabs folded away, the workspace's own controls keep to the right. */
  .chrome .app-theme-toggle { margin-left: auto; }
}

/* The workspace header positions the menu and keeps it above the canvas. */
.chrome { position: relative; z-index: 60; }

/* The plan, what is left of it and the wallet's balance beside the account
   (owner, 27.09), in the account pages' header and in the workspace's alike
   (cloud_shell.js fills it). On a phone only the balance stays: the header has
   no room for more. */
.tariff-chip { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 32px;
  padding: 0 10px; border: 1px solid var(--ne-control); border-radius: 2px;
  color: var(--ne-text); font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; }
.tariff-chip[hidden] { display: none; }
.tariff-chip:hover { border-color: var(--ne-text); }
.tariff-chip:focus-visible { outline: 3px solid var(--ne-focus); outline-offset: 2px; }
.tariff-chip__plan { color: var(--ne-text); }
.tariff-chip__usage, .tariff-chip__balance { color: var(--ne-muted); font-variant-numeric: tabular-nums; }
.tariff-chip > * + * { padding-left: 8px; border-left: 1px solid var(--ne-line); }
/* On a mid-size screen the plan's name yields and what is left and the balance
   stay: the names are long words («Главный инженер», «Конструкторское бюро»). */
@media (max-width: 1240px) {
  .tariff-chip__plan { display: none; }
  .tariff-chip__plan + * { padding-left: 0; border-left: 0; }
}
/* Between the folded menu (1020 px) and a laptop the row is tightest. */
@media (min-width: 1021px) and (max-width: 1100px) {
  .product-nav a { padding: 0 7px; }
}
@media (max-width: 640px) {
  .tariff-chip { height: 30px; padding: 0 8px; font-size: 12px; }
  .tariff-chip__plan, .tariff-chip__usage { display: none; }
  .tariff-chip__plan + *, .tariff-chip__usage + .tariff-chip__balance { padding-left: 0; border-left: 0; }
}
@media (max-width: 400px) {
  .tariff-chip { padding: 0 6px; }
}

/* ── The product header ────────────────────────────────────────────────────
   Owner, 27.09: the tabs sat right of centre in the workspace and after the
   logo on the account pages, so they jumped on every change of page. One
   header now, on every product page — `header.product-header` is the
   account pages' `.app-header` (_base_app.html) and the workspace's `.chrome`
   (assistant.html), and the public site's pricing page opened from the
   product copies it (`.public-nav--app` in public-site.css):

     [logo · НейроИнженер] [tabs…] [open project]   [theme] [plan ₽] [Кабинет] [≡]

   The logo box has a fixed width so the first tab starts at the same x on
   every page whatever the font; everything right of the tabs is pushed to the
   right edge by the theme button. The selectors carry `header.` so they
   outrank the pages' own `.chrome …` and `.app-header …` rules. */
header.product-header {
  display: flex; align-items: center; gap: 12px;
  height: 56px; min-height: 56px; padding: 0 20px;
  background: var(--ne-page); color: var(--ne-text);
  border-bottom: 1px solid var(--ne-line);
  font-family: var(--ne-body);
}
header.product-header .product-brand {
  flex: none; width: 150px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 0; background: transparent; color: var(--ne-text); text-decoration: none;
  font-size: 15px; font-weight: 600; letter-spacing: -.02em; text-transform: none; white-space: nowrap;
}
header.product-header .product-brand:hover { color: var(--ne-accent-text); background: transparent; }
header.product-header .product-brand img { width: 22px; height: 22px; flex: none; }
header.product-header .product-nav { gap: 4px; margin-left: 8px; }
header.product-header .app-theme-toggle { margin: 0 0 0 auto; width: 32px; height: 32px; }
/* The open project (workspace only) stands after the tabs and yields first. */
header.product-header .project-heading {
  flex: 0 1 auto; min-width: 0; max-width: none; display: flex; align-items: center; gap: 10px;
  margin-left: 6px; padding-left: 16px; border-left: 1px solid var(--ne-line);
  font-size: 14px; overflow: hidden;
}
header.product-header .project-heading[hidden] { display: none; }
header.product-header .project-heading .header-slash { display: none; }
header.product-header .project-heading #project-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The account: its initial and the word, the same chip everywhere. */
header.product-header .account-button {
  flex: none; display: inline-flex; align-items: center; gap: 8px; width: auto; height: 32px;
  padding: 0 10px 0 4px; border: 1px solid var(--ne-control); border-radius: 2px;
  color: var(--ne-text); background: transparent; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
header.product-header .account-button[hidden] { display: none; }
header.product-header .account-button:hover { border-color: var(--ne-text); }
header.product-header .account-button:focus-visible { outline: 3px solid var(--ne-focus); outline-offset: 2px; }
header.product-header .account-initial {
  display: inline-grid; place-items: center; width: 24px; height: 24px;
  background: var(--ne-solid); color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase;
}
@media (max-width: 1020px) {
  /* The tabs are the menu behind ≡ at the right edge; the open project stands
     after the logo as «/ Мои детали». */
  header.product-header .project-heading { margin-left: 0; padding-left: 0; border-left: 0; }
  header.product-header .project-heading .header-slash { display: inline; color: var(--ne-muted); font-size: 20px; }
}
/* Between the folded menu (1020 px) and a laptop the six tabs, the theme, the
   plan chip and the account did not fit: at 1024 px the account page scrolled
   sideways by 39 px and the workspace by 74 (since «Инструкция», 04.10, and
   the chip's «осталось N из M»). The logo's word yields to its mark here, as it
   does on a phone, and every tab stays in the row. */
@media (min-width: 1021px) and (max-width: 1140px) {
  header.product-header .product-brand { width: 40px; }
  header.product-header .product-brand span { display: none; }
}
@media (max-width: 700px) {
  header.product-header { gap: 8px; padding: 0 12px; }
  header.product-header .product-brand { width: auto; min-width: 40px; justify-content: center; }
  header.product-header .product-brand span { display: none; }
  header.product-header .app-theme-toggle { width: 40px; height: 40px; }
  header.product-header .account-button { padding: 0 3px; height: 32px; }
  header.product-header .account-label { display: none; }
}
@media (max-width: 360px) {
  header.product-header { gap: 6px; padding: 0 10px; }
  header.product-header .app-theme-toggle { width: 36px; height: 36px; }
}