/* App shell on phones and tablets (SHELL-O1, lane opus).
   Scope: the mobile header (.hs-mhead) and the nav drawer (.hs-drawer) in base.html.
   Both are lg:hidden, so every rule sits under max-width:1023px and the >=1024 shell
   (desktop sidebar) is untouched. */

@media (max-width: 1023px) {
  /* Header: 44px controls in a 56px bar (was 64px with a 40px hamburger). */
  .hs-mhead {
    min-height: 56px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .hs-mhead__brand {
    min-height: 44px;
  }
  .hs-mhead__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    /* The glyph's right edge lines up with the 16px gutter; the hit area keeps 6px clear. */
    margin-right: -10px;
    border-radius: 6px;
    -webkit-tap-highlight-color: transparent;
  }
  .hs-mhead__menu:focus-visible {
    outline: 2px solid #1B1B1F;
    outline-offset: -2px;
  }

  /* Drawer: base.html's inline `.salt-texture { position: relative }` loads after
     Tailwind and beat `fixed`, so the drawer opened in the page flow under the header
     and pushed the page down. Pin it as an overlay sheet again. */
  .hs-drawer.salt-texture {
    position: fixed;
    overscroll-behavior: contain;
  }

  /* Drawer: 48px link rows with 16px labels. */
  .hs-drawer a.rounded-xl {
    min-height: 48px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .hs-drawer a.rounded-xl > span {
    font-size: 16px;
    line-height: 24px;
  }
  .hs-drawer > div:first-child > a {
    min-height: 44px;
  }
  .hs-drawer > div:first-child > p,
  .hs-drawer .min-w-0 > p + p {
    font-size: 14px;
    line-height: 20px;
  }
  .hs-drawer .min-w-0 > p:first-child {
    font-size: 16px;
    line-height: 24px;
  }
  .hs-drawer .min-w-0 > p + p > span[title] {
    font-size: 14px;
  }
  .hs-drawer .n-door,
  .hs-drawer form button[type="submit"] {
    min-height: 44px;
    font-size: 16px;
    line-height: 24px;
  }
  /* Policy links: 14px secondary copy on 44px rows. */
  .hs-drawer .flex-wrap > a {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    font-size: 14px;
    line-height: 20px;
  }
  .hs-drawer .flex-wrap {
    row-gap: 0;
  }
}

@media (max-width: 1023px) {
  /* Header count reads as a value next to the bell: 14px, same as the sidebar count below. */
  .hs-mhead .n-bell__badge {
    font-size: 14px;
    line-height: 20px;
  }
}

/* Tablet-landscape sidebar (1024-1279). The desktop sidebar appears at lg (1024), so
   tablets in landscape get the desktop nav with 36-40px rows and 12px footer copy.
   Every rule is capped at 1279px: the >=1280 sidebar is untouched. */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* Nav rows: 44px (were 40). Labels stay 14px. */
  .hs-side > .flex-1 > a {
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
  }
  /* Lockup link: 44px hit area (was 32). */
  .hs-side > div:first-child > a {
    min-height: 44px;
  }
  /* Give the 12px back from the block padding so the brand block keeps its height. */
  .hs-side > div:first-child {
    padding-top: 26px;
    padding-bottom: 26px;
  }
  /* Sub-brand line and the credits line are secondary copy: 14px (were 12). */
  .hs-side > div:first-child > p,
  .hs-side .min-w-0 > p + p {
    font-size: 14px;
    line-height: 20px;
  }
  .hs-side .min-w-0 > p + p > span[title] {
    font-size: 14px;
  }
  .hs-side .n-bell__count {
    font-size: 14px;
    line-height: 20px;
  }
  /* Sign out: 44px (was 36). Send feedback is already 44 via .n-door. */
  .hs-side form button[type="submit"] {
    min-height: 44px;
  }
  /* Policy links: 14px secondary copy on 44px rows (were 12px text, 16px tall). */
  .hs-side .flex-wrap > a {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    font-size: 14px;
    line-height: 20px;
  }
  .hs-side .flex-wrap {
    row-gap: 0;
  }
  /* The 44px rows make the sidebar taller than a 768px landscape viewport. Pin it and
     let it scroll itself so it no longer sets the page height. The compound selector
     beats base.html's inline `.salt-texture { position: relative }`. */
  .hs-side.salt-texture {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}