/* Stable application navigation and scroll frame, shared by all five views. */
:root {
  --app-safe-left: env(safe-area-inset-left, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
}
.nav-utilities, .utility-label, .menu-country-slot { display: none; }
.menu-connection-slot .connection-bar { margin: 18px 0 10px; font-size: 12px; gap: 10px; }
.menu-connection-slot #update-app { max-width: 100%; white-space: normal; }
.menu-country-slot h3 { font: 600 13px/1.5 -apple-system, sans-serif; margin: 20px 0 8px; }
.menu-country-slot .country-bar { padding: 0; margin: 0; }
.menu-country-slot .segmented { width: 100%; flex-wrap: wrap; }
.menu-country-slot .segmented button { min-height: 44px; flex: 1; min-width: 0; padding: 6px; font-size: 12px; }
.menu-country-slot .route-caption { display: none; }
@media screen {
  html[data-app-compact] .menu-country-slot { display: block; }
  html[data-app-compact] body { height: 100dvh; overflow: hidden; padding-bottom: 0; }
  html[data-app-compact] .topbar,
  html[data-app-compact] .intro,
  html[data-app-compact] #content > .country-bar,
  html[data-app-compact] .site-footer { display: none; }
  html[data-app-compact] .app-shell { min-height: 0; }
  html[data-app-compact] #content {
    position: relative; height: var(--app-main-height, 100dvh); min-height: 0; min-width: 0;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--app-safe-top) max(12px, var(--app-safe-right)) 4px max(12px, var(--app-safe-left));
  }
  html[data-app-compact] .account-banner { margin: 4px 0; }
  html[data-app-compact] .document-view { padding: 16px 0 28px; }
  html[data-app-compact] .view-heading {
    display: flex; flex-direction: row; align-items: flex-start; flex-wrap: wrap;
    gap: 12px; margin-bottom: 20px;
  }
  html[data-app-compact] .view-heading > div { flex: 1 1 220px; min-width: 0; }
  html[data-app-compact] .view-heading h2 { font: 26px/1.25 Georgia, serif; margin: 0 0 8px; }
  html[data-app-compact] .view-heading .eyebrow { margin-bottom: 6px; font-size: 9px; }
  html[data-app-compact] .view-heading p:not(.eyebrow) { font-size: 13px; line-height: 1.6; }
  html[data-app-compact] .view-heading > .secondary-button { min-height: 44px; font-size: 12px; }
  html[data-app-compact] details.planning-note { font-size: 12px; border: 0; border-radius: 0; background: transparent; padding: 0; margin-bottom: 16px; }
  html[data-app-compact] details.planning-note > summary { display: list-item; padding: 12px 0; min-height: 44px; font-size: 13px; }
  html[data-app-compact] details.planning-note > p { margin: 4px 0 12px; font-size: 12px; line-height: 1.7; }
  html[data-app-compact] .food-toolbar { gap: 10px; }
  html[data-app-compact] .food-toolbar select { min-height: 44px; font-size: 13px; }
  html[data-app-compact] .practical-tabs { gap: 8px; margin-bottom: 20px; }
  html[data-app-compact] .practical-tabs button { min-height: 44px; font-size: 12px; padding: 8px; }
  html[data-app-compact] .nav-utilities #menu-button { flex-direction: column; gap: 2px; }
  html[data-app-compact] .utility-label { display: block; font-size: 9px; line-height: 1.2; }
  /* The rail already covers the safe inset on its side. Never add it twice. */
  html[data-app-compact][data-phone-landscape] {
    --phone-rail: max(64px, var(--app-safe-right));
    --phone-left: 0px; --phone-right: var(--phone-rail);
  }
  html[data-app-compact][data-phone-bottom="left"] {
    --phone-rail: max(64px, var(--app-safe-left));
    --phone-left: var(--phone-rail); --phone-right: 0px;
  }
  html[data-app-compact][data-phone-landscape] #content {
    padding: var(--app-safe-top) 4px max(4px, var(--app-safe-bottom)) max(12px, var(--app-safe-left));
  }
  html[data-app-compact][data-phone-bottom="left"] #content {
    padding-right: max(12px, var(--app-safe-right)); padding-left: 4px;
  }
  html[data-app-compact]:is([data-phone-landscape], [data-app-wide]) .navigation {
    width: var(--phone-rail, 64px); height: 100dvh; padding: max(4px, var(--app-safe-top)) 2px max(4px, var(--app-safe-bottom));
    gap: 0; overflow-y: auto; overscroll-behavior: contain;
  }
  html[data-app-compact]:is([data-phone-landscape], [data-app-wide]) .nav-item {
    width: 100%; min-height: 44px; gap: 2px; flex-shrink: 0;
  }
  html[data-app-compact] .nav-foot { display: none; }
  html[data-app-compact] .nav-utilities { display: flex; flex: none; }
  html[data-app-compact] .nav-utilities .header-actions { display: flex; gap: 0; }
  html[data-app-compact] .nav-utilities .header-actions button {
    width: 48px; min-width: 44px; min-height: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 8px; background: transparent; justify-content: center;
  }
  html[data-app-compact] .nav-utilities .account-button span { display: none; }
  html[data-app-compact]:is([data-phone-landscape], [data-app-wide]) .nav-utilities,
  html[data-app-compact]:is([data-phone-landscape], [data-app-wide]) .header-actions { flex-direction: column; align-items: center; }
  html[data-app-compact][data-app-wide]:not([data-phone-landscape]) .navigation { top: 0; position: sticky; height: var(--app-main-height, 100dvh); }
  html[data-app-compact][data-app-wide]:not([data-phone-landscape]) #content { width: calc(100% - 64px); }

  /* Portrait: six useful targets; account and appearance stay in the menu. */
  html[data-app-compact]:not([data-phone-landscape]):not([data-app-wide]) .navigation {
    position: fixed; inset: auto 0 0; width: 100%; flex-direction: row;
    height: calc(60px + var(--app-safe-bottom)); padding: 2px max(2px, var(--app-safe-right)) var(--app-safe-bottom) max(2px, var(--app-safe-left));
    gap: 0; justify-content: space-around;
  }
  html[data-app-compact]:not([data-phone-landscape]):not([data-app-wide]) #content { width: 100%; }
  html[data-app-compact]:not([data-phone-landscape]):not([data-app-wide]) .navigation > .nav-item,
  html[data-app-compact]:not([data-phone-landscape]):not([data-app-wide]) .nav-utilities { width: 16.666%; min-width: 0; }
  html[data-app-compact]:not([data-phone-landscape]):not([data-app-wide]) .nav-utilities { align-items: center; justify-content: center; }
  html[data-app-compact]:not([data-phone-landscape]):not([data-app-wide]) #account-button,
  html[data-app-compact]:not([data-phone-landscape]):not([data-app-wide]) #theme-toggle { display: none; }
}