/* DIDO/HAZI v7 — compact, invariant mobile header + low-contrast section boundary.
   Overrides old v3/v4 rules that moved the language menu to another row.
   Applies to both public sites; no modification to D1, rates or business logic. */
html body .masthead {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fafcfd 100%);
  border-bottom: 1px solid rgba(109, 152, 174, .13);
  box-shadow: 0 10px 21px -22px rgba(30, 84, 118, .32);
}
html body .masthead::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 5%; right: 5%; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(114,158,182,.2) 28%, rgba(114,158,182,.2) 72%, transparent);
}
@media (max-width: 640px) {
  html body .masthead .masthead-inner {
    display: grid !important;
    direction: ltr !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 6px !important;
    row-gap: 7px !important;
    padding-block: 9px 10px !important;
    min-height: 0 !important;
  }
  /* brand always physical left, in first row, including 320px screens */
  html body .masthead .masthead-inner > .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    display: flex !important;
    direction: ltr !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: max-content !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }
  html body .masthead .masthead-inner > .brand .brand-logo {
    width: 32px !important; height: 32px !important;
    flex: none !important;
  }
  html body .masthead .masthead-inner > .brand .brand-word {
    font-size: 18px !important; letter-spacing: -.065em !important;
  }
  html body .masthead .masthead-inner > .brand .brand-divider {
    display: inline-block !important;
    height: 18px !important;
    margin-inline: 1px !important;
    flex: none !important;
  }
  html body .masthead .masthead-inner > .brand .brand-name {
    display: inline-block !important;
    font-size: 10.5px !important; letter-spacing: -.015em;
    line-height: 1.2 !important;
  }
  /* language stays physical right and NEVER gets an extra row */
  html body .masthead .masthead-inner > .language,
  html body .masthead .masthead-inner > .language.lang-menu-host {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
    direction: ltr !important;
    position: relative !important;
    margin: 0 !important;
    width: clamp(108px, 28vw, 126px) !important;
    min-width: 108px !important;
    max-width: 126px !important;
    min-height: 42px !important;
    padding: 4px 8px !important;
    gap: 5px !important;
    border-radius: 11px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }
  html body .masthead .masthead-inner > .language .globe-icon {
    flex: none !important;
    width: 18px !important;
    height: 18px !important;
  }
  html body .masthead .language.lang-menu-host .lang-menu-trigger {
    flex: 1 !important;
    min-height: 36px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    min-width: 0 !important;
    gap: 4px !important;
    padding: 2px 0 !important;
  }
  html body .masthead .lang-menu-list {
    min-width: 160px !important;
    right: 0 !important; left: auto !important;
    top: calc(100% + 5px) !important;
    bottom: auto !important;
    z-index: 1600 !important;
  }
  /* two full-width calculator tabs remain on row 2 */
  html body .masthead .masthead-inner > .nav-wrap {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    margin-top: 0 !important;
    justify-self: stretch !important;
  }
  html body .masthead .tabs { width: 100% !important; }
  /* No zoom rule was changed. Touch hit areas and visual feedback only. */
  html body :is(button, summary, a, select, [role="button"], [role="tab"], [role="option"]) {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(91, 158, 197, .08);
  }
  html body :is(.tab, .choice-trigger, .choice-option, .lang-menu-option, .calc-mode) {
    min-height: 44px;
  }
  html body .lang-menu-option { padding-block: 11px !important; }
  html body .lang-menu-trigger:active,
  html body .lang-menu-option:active,
  html body .choice-trigger:active:not(:disabled),
  html body .tab:active,
  html body .calc-mode:active {
    filter: brightness(.97);
  }
  html body .lang-menu-list,
  html body .lang-menu-chevron {
    transition-duration: .075s !important;
  }
}
@media (max-width: 350px) {
  html body .masthead .masthead-inner > .brand .brand-logo {width:29px!important;height:29px!important}
  html body .masthead .masthead-inner > .brand .brand-word {font-size:17px!important}
  html body .masthead .masthead-inner > .brand .brand-name {font-size:10px!important}
  html body .masthead .masthead-inner > .language,
  html body .masthead .masthead-inner > .language.lang-menu-host {width:108px!important}
}
@media (pointer: coarse) {
  /* This does not change the existing viewport/gesture lock from v4/v6. */
  html body :is(.lang-menu-trigger, .lang-menu-option, .choice-trigger, .choice-option, .tab, .calc-mode, .refresh, .primary, .secondary) {
    touch-action: manipulation;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body .lang-menu-list, html body .lang-menu-chevron {transition:none!important}
}