/* Last responsive layer: replaces the old bottom navigation only on mobile. */
.mobile-menu-toggle { border: 0; color: inherit; background: transparent; font: inherit; }
.mobile-menu-chevron { display: none; }
@media (max-width: 820px) {
  :root {
    --mobile-rail-width: calc(60px + env(safe-area-inset-left, 0px));
    --mobile-header-height: calc(68px + env(safe-area-inset-top, 0px));
  }
  .app-shell { display: block; padding-bottom: 0; }
  .app-shell .app-main {
    padding: 0 0 calc(90px + env(safe-area-inset-bottom, 0px)) var(--mobile-rail-width);
  }
  .app-shell .topbar {
    height: var(--mobile-header-height); min-height: var(--mobile-header-height);
    margin-left: calc(0px - var(--mobile-rail-width)); padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 env(safe-area-inset-left, 0px);
    gap: 8px; z-index: 90; background: var(--paper);
  }
  .topbar .mobile-menu-toggle {
    position: relative; display: grid; place-items: center;
    flex: 0 0 60px; width: 60px; height: 52px; padding: 0; cursor: pointer; border-radius: 10px;
  }
  .mobile-menu-toggle .brand__mark { width: 38px; height: 42px; }
  .mobile-menu-toggle .brand__name { display: none; }
  .mobile-menu-toggle:hover, .mobile-menu-toggle[aria-expanded="true"] { background: var(--accent-soft); }
  .mobile-menu-toggle:focus-visible, .mobile-nav button:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: -3px; }
  .mobile-menu-chevron { display: block; position: absolute; right: 3px; bottom: 4px; color: var(--accent-strong); font-size: 16px; transition: transform .18s ease; }
  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-chevron { transform: rotate(180deg); }
  .app-shell .topbar__title { display: block; min-width: 0; flex: 1; }
  .app-shell .topbar__title small { font-size: 12px; text-transform: none; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-shell .topbar__title strong { font-size: 12px; }
  .app-shell .content { padding-inline: 14px; }
  .app-shell .plan-picker { min-width: 0; max-width: 100%; }
  .app-shell .plan-picker select { min-width: 0; width: 100%; }
  .app-shell .profile-dropdown { max-width: calc(100vw - var(--mobile-rail-width) - 20px); }
  .mobile-nav {
    position: fixed; top: var(--mobile-header-height); left: 0; right: auto; bottom: 0;
    width: var(--mobile-rail-width); height: auto !important; max-height: calc(100dvh - var(--mobile-header-height));
    display: flex; flex-direction: column; align-items: stretch; grid-template-columns: none !important; gap: 4px !important;
    padding: 8px 6px calc(12px + env(safe-area-inset-bottom, 0px)) calc(6px + env(safe-area-inset-left, 0px));
    z-index: 85; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    border: 0; border-right: 1px solid var(--line); background: var(--paper); backdrop-filter: none;
    transition: width .18s ease, box-shadow .18s ease; scrollbar-width: thin;
  }
  .mobile-nav[data-expanded="true"] { width: min(272px, calc(100vw - 32px)); box-shadow: 14px 0 28px rgb(35 40 31 / 12%); }
  .mobile-nav > button {
    display: flex; flex-direction: row; flex: 0 0 auto; align-items: center; justify-content: flex-start;
    min-width: 44px; min-height: 48px; width: 100%; padding: 2px 0; gap: 7px;
    text-align: left; border-radius: 9px; font-size: 13px; font-weight: 550;
  }
  .mobile-nav > button > span:first-child { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; font-size: 20px; }
  .mobile-nav .nav-findy-logo { width: 28px; height: 32px; object-fit: contain; }
  .mobile-nav .nav-label--mobile { display: none; }
  .mobile-nav .nav-label--full { display: block; opacity: 0; width: 0; overflow: hidden; white-space: nowrap; transition: opacity .12s ease; }
  .mobile-nav[data-expanded="true"] .nav-label--full { width: auto; flex: 1; opacity: 1; padding-right: 7px; }
  .mobile-nav button.active, .link-mode .mobile-nav button.active { color: var(--accent-strong); background: var(--accent-soft); }
  .app-shell .focus-launcher, .app-shell .pomodoro-widget { right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
  .app-shell .pomodoro-widget { width: min(356px, calc(100vw - var(--mobile-rail-width) - 24px)); max-height: calc(100dvh - var(--mobile-header-height) - 24px - env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 600px) {
  /* The rail leaves less room for cards; stack content rather than clip it. */
  .app-shell .area-grid, .app-shell .map-library-grid, .app-shell .question-grid, .app-shell .suggestion-timeline { grid-template-columns: minmax(0, 1fr); }
  .app-shell .area-card { min-height: 160px; }
  .app-shell .countdown-card { padding: 16px; }
  .app-shell .page-head h1, .app-shell .welcome-row h1 { font-size: 25px; overflow-wrap: anywhere; }
  .app-shell .section-title { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .mobile-nav .nav-label--full, .mobile-menu-chevron { transition: none; }
}
@media print { .mobile-nav, .mobile-menu-toggle { display: none !important; } }