/* Desktop sticky header — hidden by default, shown only on
   `body.has-desktop-shell` at ≥1200px. Mobile/non-shell pages keep
   the canonical `.app-header` markup intact (rendered alongside, hidden
   here via CSS — see app-header.css for the inverse rule).

   Layout: logo left + search pill flex-fill. Pill opens the existing
   global search modal (same controller the mobile icon button uses).

   The desktop-header owns its own `position: sticky` + 1280 centering:
   the parent `.app__sticky-header` wrapper is flattened with
   `display: contents` on desktop-shell so the home calendar-strip
   subheader flows naturally below this sticky bar instead of being
   pinned with it (see layout.css). */

@layer components {
  .desktop-header {
    display: none;
  }

  @media (width >= 1200px) {
    .has-desktop-shell .desktop-header {
      display: flex;
      align-items: center;
      gap: 24px;
      padding-block: 20px 10px;
      padding-inline: max(80px, calc((100% - 1080px) / 2));
      width: 100%;
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgb(22 22 26 / 40%);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgb(255 255 255 / 8%);
    }

    .has-desktop-shell .desktop-header__logo {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      height: 40px;
    }

    .has-desktop-shell .desktop-header__logo img {
      height: 40px;
      width: auto;
      display: block;
    }

    /* Search pill — right-aligned via `margin-left: auto`. The logo stays
       left, the pill anchors to the right edge of the centered 1280
       wrapper. `max-width: 480px` caps it so it doesn't span the whole
       row at wider viewports. */
    .has-desktop-shell .desktop-header__search {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 20px 0 16px;
      background: rgb(17 17 19);
      border: 1px solid rgb(255 255 255 / 8%);
      border-radius: 9999px;
      color: rgb(161 161 170);
      cursor: pointer;
      flex: 0 1 420px;
      min-width: 0;
      max-width: 420px;
      height: 40px;
      margin-left: auto;
      font-family: var(--font-body);
      transition:
        border-color 0.15s ease,
        background 0.15s ease;
    }

    .has-desktop-shell .desktop-header__search:hover {
      background: rgb(22 22 24);
      border-color: rgb(255 255 255 / 14%);
    }

    .has-desktop-shell .desktop-header__search:focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 2px;
    }

    .has-desktop-shell .desktop-header__search-icon {
      flex-shrink: 0;
    }

    /* `line-height: 1.4` + `padding-block: 2px` gives descenders (j/g/p/q)
       room to render — at `line-height: 1` they were being clipped by
       the inline box. */
    .has-desktop-shell .desktop-header__search-placeholder {
      font-size: 14px;
      line-height: 1.4;
      padding-block: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
      flex: 1 1 auto;
      text-align: left;
    }
  }

  /* Slim padding at narrow desktop widths (1200-1399) so the 50px
     lateral doesn't crowd the central column against the shell edges. */
  @media (1200px <= width < 1400px) {
    .has-desktop-shell .desktop-header {
      padding-block: 16px 10px;
      padding-inline: max(40px, calc((100% - 1080px) / 2));
    }
  }
}