/* Shell: the environment strip, the public header and footer, and the error pages (S-02, S-03). */

/* Environment strip (S-04): above every page outside Production, and above the reconnect scrim */
.bh-env {
  position: relative; z-index: 30; display: flex; align-items: stretch; justify-content: center; min-height: var(--shell-env-h);
  background: var(--surface-inverse); color: var(--on-inverse); text-align: center;
  font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-bold);
}
.bh-env::before, .bh-env::after { content: ""; flex: none; width: var(--space-5); background: repeating-linear-gradient(135deg, var(--warning-bg) 0 4px, transparent 4px 8px); }
.bh-env-text { flex: 1 1 auto; min-width: 0; padding: 5px var(--space-2); }

/* Public header */
.bh-pubhead {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--shell-appbar-h);
  padding: 0 var(--space-2) 0 var(--page-pad); background: var(--page); border-bottom: 1px solid var(--line);
}
.bh-pubhead-actions { display: flex; align-items: center; gap: var(--space-1); }
/* The narrowest phones: "შესვლა" next to the language menu leaves the wordmark no room, and the button breaks the
   word across two lines. One step smaller gives it back. */
@media (max-width: 359px) {
  .bh-pubhead > .bh-wordmark { font-size: var(--text-h3); line-height: var(--leading-h3); }
  .bh-pubhead-actions .bh-btn { white-space: nowrap; }
  .bh-pubhead > .bh-wordmark .bh-mark { display: none; }
  /* The language menu hangs from the right edge of its button; at 220 px wide it would hang past the left edge of a
     320 px screen, so here it is as wide as its longest language and no wider. */
  .bh-pubhead .bh-menu { min-width: 0; }
}
@media (min-width: 768px) { .bh-pubhead { padding-inline: var(--page-pad); } }
@media (min-width: 1200px) { .bh-pubhead { padding-inline: max(var(--page-pad), calc((100% - 1200px) / 2)); } }

/* Public footer */
.bh-pubfoot {
  display: grid; gap: var(--space-4); padding: var(--space-8) var(--page-pad); background: var(--sunken); border-top: 1px solid var(--line);
  color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small);
}
.bh-pubfoot > .bh-wordmark { font-size: var(--text-h3); line-height: var(--leading-h3); }
/* auto-fit, not two fixed columns: "კონფიდენციალურობა" is 164 px, wider than half a 375 px screen, and two columns
   put it through its neighbour. 170 px is that link plus its own width's worth of room, so the narrow phones get one
   column and nothing breaks mid-word. "anywhere" rather than "break-word" is the safety net for a longer word in
   another language: only "anywhere" makes a flex item's minimum shrink, and each link is one. */
.bh-pubfoot-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); column-gap: var(--space-4); }
.bh-pubfoot-links a { display: flex; align-items: center; min-height: var(--target-min); overflow-wrap: anywhere; }
.bh-pubfoot-company { display: grid; gap: var(--space-1); }
.bh-pubfoot-copy { color: var(--ink-3); font-size: var(--text-label); line-height: var(--leading-label); }
@media (min-width: 1200px) { .bh-pubfoot-links { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: max-content; column-gap: var(--space-8); } }

/* Not found (S-02) and error (S-03) */
.bh-sys { padding-top: var(--space-12); }
.bh-actions { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.bh-ref { display: grid; gap: var(--space-2); }