/* App shell: app bar, Menu sheet, Settings panel (rebrand PR C; behaviour in shell-nav.js).
 *
 * New components read the approved palette (--ap-*) and the density tokens (--mh-density-*, on
 * :root in every mode, see density-tokens.css) directly, so they follow the chosen density
 * without rules in density.css. Every control is at least 44 x 44 px. The header and the sheet
 * sit outside the views, where the approved button groups do not reach, so the two icon buttons
 * are styled here with the same tokens.
 */

/* ------------------------------------------------------------------ app bar */
/* The 44 px controls set the bar's height; the padding token keeps the approved 49 px bar
   (44 + 2 x 2 + the 1 px rule) instead of adding the old 6 px on top of the taller control. */
body.mj-app:not(.dev-chrome) .mh-appbar {
  padding-top: calc(var(--mh-density-header-pad-y, 2px) + var(--safe-top, 0px));
  padding-bottom: var(--mh-density-header-pad-y, 2px);
}

.mh-appbar .mh-header-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--mh-density-space-2, 8px);
  min-height: 44px;
}

.mh-appbar__center {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.mh-appbar__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--mh-density-space-2, 8px);
  margin-left: auto;
}

.mh-appbar__menu,
.mh-menu-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: var(--ap-line-w, 1px) solid var(--ap-glass-border, #ffffff4a);
  border-radius: var(--mh-density-radius-card, 17px);
  background: var(--ap-glass, transparent);
  box-shadow: var(--ap-glass-edge, none);
  color: var(--ap-text, currentColor);
  cursor: pointer;
}

.mh-appbar__menu:focus-visible,
.mh-menu-close:focus-visible,
.mh-menu-item:focus-visible {
  outline: 2px solid var(--ap-focus, #d6e3f5);
  outline-offset: 2px;
}

.mh-appbar__icon,
.mh-menu-icon {
  width: var(--mh-density-icon, 21px);
  height: var(--mh-density-icon, 21px);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--ap-icon-stroke, 1.6);
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

/* The brand rests in the bar; when the screen's large title scrolls under the bar the section
   name takes its place, centred between the two edge controls (the iOS large-title pattern). */
.mh-appbar .mh-brand {
  transition: opacity var(--ap-time-a2, 150ms) ease;
}

.mh-appbar__title {
  position: absolute;
  top: 50%;
  left: 56px;
  right: 56px;
  margin: -0.7em 0 0;
  overflow: hidden;
  color: var(--ap-text, inherit);
  font-family: var(--mh-font, inherit);
  font-size: var(--mh-type-section, 16px);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ap-time-a2, 150ms) ease;
}

.mh-appbar--condensed .mh-brand {
  opacity: 0;
  visibility: hidden;
}

.mh-appbar--condensed .mh-appbar__title {
  opacity: 1;
}

/* --------------------------------------------------------------------- Menu */
.mh-menu-root {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.mh-menu-root[hidden] {
  display: none;
}

/* The tab bar (#bottom-nav, z-index 200) is a sibling of .app-shell (z-index 1), and the Menu sits
   inside .app-shell. While the Menu is open the shell stacks above the bar, so the sheet and its
   backdrop cover the bar instead of the bar painting over the sheet's last rows. */
body.mh-menu-open .app-shell {
  z-index: 300;
}

.mh-menu-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--mh-overlay, #00000077);
  cursor: default;
}

.mh-menu-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: min(86vh, 720px);
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--mh-density-card-pad-y, 16px) var(--mh-density-page-gutter, 16px)
    max(var(--mh-density-card-pad-y, 16px), var(--mh-safe-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  border: var(--ap-line-w, 1px) solid var(--ap-sheet-border, #596478);
  border-bottom: 0;
  border-radius: var(--mh-density-radius-card, 17px) var(--mh-density-radius-card, 17px) 0 0;
  background: var(--ap-sheet-bg, #242c39);
  color: var(--ap-text, inherit);
  font-family: var(--mh-font, inherit);
  animation: mh-menu-rise var(--ap-time-a3, 300ms) var(--ap-ease-a2, ease-out) both;
}

.mh-menu-panel:focus {
  outline: none;
}

@keyframes mh-menu-rise {
  from {
    opacity: 0;
    translate: 0 24px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mh-menu-panel {
    animation: none;
  }
}

.mh-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mh-density-space-3, 12px);
  margin-bottom: var(--mh-density-space-2, 8px);
}

.mh-menu-title {
  margin: 0;
  font-size: var(--mh-type-screen, 20px);
  font-weight: 600;
  line-height: var(--mh-density-leading-title, 1.22);
}

.mh-menu-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 calc(-1 * var(--mh-density-space-1, 4px));
  padding: 0 var(--mh-density-space-1, 4px);
}

.mh-menu-section {
  margin: var(--mh-density-space-4, 16px) 0 var(--mh-density-space-1, 4px);
  color: var(--ap-muted, inherit);
  font-size: var(--mh-type-label, 11px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mh-menu-section:first-child {
  margin-top: var(--mh-density-space-2, 8px);
}

.mh-menu-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mh-menu-list > li[hidden] {
  display: none;
}

.mh-menu-item {
  display: flex;
  align-items: center;
  gap: var(--mh-density-space-3, 12px);
  width: 100%;
  min-height: 44px;
  padding: var(--mh-density-row-pad-y, 10px) var(--mh-density-space-3, 12px);
  border: 0;
  border-radius: calc(var(--mh-density-radius-card, 17px) - 5px);
  background: transparent;
  color: var(--ap-text, inherit);
  font: inherit;
  font-size: var(--mh-type-body, 12px);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.mh-menu-item:hover,
.mh-menu-item:active {
  background: var(--ap-selected, #303640);
}

.mh-menu-item[aria-current="page"] {
  background: var(--ap-selected, #303640);
  color: var(--ap-accent, inherit);
}

.mh-menu-meta {
  margin-left: auto;
  color: var(--ap-muted, inherit);
  font-size: var(--mh-type-meta, 11px);
  font-weight: 400;
}

.mh-menu-version {
  margin: var(--mh-density-space-4, 16px) var(--mh-density-space-3, 12px) 0;
  color: var(--ap-muted, inherit);
  font-size: var(--mh-type-meta, 11px);
}

body.mh-menu-open {
  overflow: hidden;
}

/* ----------------------------------------------------------------- Settings */
/* The "settings" route shows this panel in place of the account overview (app.js showView).
   Account's own cards pin their display with id selectors and !important in the parity sheets;
   an !important declaration inside a cascade layer outranks all of them (as in density.css). */
@layer mh-shell {
  body:not([data-account-panel="settings"]) #view-account > .mh-settings-panel {
    display: none !important;
  }

  body[data-account-panel="settings"] #view-account > :not(.mh-settings-panel) {
    display: none !important;
  }

  #view-account .mh-settings-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--mh-density-space-3, 12px) !important;
    width: 100% !important;
    min-height: 44px !important;
    text-align: left !important;
  }
}

.mh-settings-panel__top {
  margin-bottom: var(--mh-density-space-2, 8px);
}

.mh-settings-link__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mh-settings-link__label {
  color: var(--ap-text, inherit);
  font-weight: 600;
}

.mh-settings-link__meta {
  color: var(--ap-muted, inherit);
  font-size: var(--mh-type-meta, 11px);
  font-weight: 400;
}

.mh-settings-link__chev {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ap-muted, currentColor);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mh-density-option {
  display: flex;
  align-items: center;
  gap: var(--mh-density-space-3, 12px);
  min-height: 44px;
  cursor: pointer;
}

.mh-density-option input[type="radio"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--ap-accent, #d6dce5);
}

.mh-density-option__text {
  display: grid;
  gap: 2px;
}

.mh-density-option__name {
  font-weight: 600;
}

.mh-density-option__tag {
  margin-left: var(--mh-density-space-1, 4px);
  padding: 1px 6px;
  border: var(--ap-line-w, 1px) solid var(--ap-tag-border, #657186);
  border-radius: 999px;
  color: var(--ap-muted, inherit);
  font-size: var(--mh-type-caption, 10px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mh-density-option.is-selected .mh-density-option__name {
  color: var(--ap-accent, inherit);
}

.mh-density-note {
  margin: var(--mh-density-space-2, 8px) 0 0;
}