@layer components {
  .masthead {
    position: sticky;
    top: 0;
    z-index: var(--z-masthead);
    
    padding-top: var(--safe-top);
    background: var(--masthead-tint);
    backdrop-filter: saturate(1.6) blur(12px);
    border-bottom: var(--line-w) solid var(--line);
  }

  .masthead__inner {
    max-width: var(--column);
    margin-inline: auto;
    
    padding: var(--space-2) max(var(--gutter), var(--safe-right))
             var(--space-2) max(var(--gutter), var(--safe-left));
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--masthead-h);
  }

  .masthead__workspace {
    font: inherit;
    font-size: var(--text-md);
    font-weight: var(--weight-heavy);
    letter-spacing: var(--tracking-tight);
    display: inline-flex;
    align-items: center;
    gap: var(--space);
    height: var(--control-h);
    
    padding: 0 calc(var(--space-2) - var(--line-w-control));
    margin-left: calc(var(--space-2) * -1);
    border: var(--line-w-control) solid transparent;
    border-radius: var(--radius);
    background: none;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), var(--responds);
  }

  
  .masthead__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  
  .masthead__workspace:hover { border-color: var(--line-strong); background: var(--surface-hover); }
  .masthead__workspace--plain { cursor: default; }
  .masthead__workspace--plain:hover { border-color: transparent; background: none; }

  
  .masthead__back {
    display: flex;
    align-items: center;
    gap: var(--space);
    flex: 0 1 auto;
    min-width: 0;
    height: var(--control-h);
    padding-inline: calc(var(--space-2) - var(--line-w-control));
    margin-left: calc(var(--space-2) * -1);
    border: var(--line-w-control) solid transparent;
    border-radius: var(--radius);
    color: var(--ink-muted);
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition),
                color var(--transition), var(--responds);
  }

  .masthead__back:hover { border-color: var(--line-strong); background: var(--surface-hover); color: var(--ink); }

  
  @media (width >= 86rem) {
    .masthead__back {
      position: absolute;
      top: var(--safe-top);
      bottom: 0;
      right: calc(50% + var(--column) / 2 - var(--space-2));
      width: fit-content;
      max-width: calc((100% - var(--column)) / 2);
      margin: auto 0;
    }
  }

  .masthead__back-to {
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 12rem;
  }

  .masthead__key { flex: none; }

  .masthead__back-chevron {
    flex: none;
    border-left: var(--line-w-glyph) solid currentcolor;
    border-top: var(--line-w-glyph) solid currentcolor;
    transform: translateX(1px) rotate(-45deg);
    width: 0.55rem;
    height: 0.55rem;
  }

  
  .masthead__back .menu__icon { display: none; }

  .masthead__you {
    display: grid;
    place-items: center;
    width: var(--control-h);
    height: var(--control-h);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    cursor: pointer;
    transition: background var(--transition), var(--responds);
  }

  .masthead__you:hover { background: var(--surface-hover); }

  @media (width <= 48rem) {
    .masthead__inner {
      flex-wrap: wrap;
      
      padding: var(--space) max(var(--gutter), var(--safe-right))
               var(--space) max(var(--gutter), var(--safe-left));
      gap: var(--space);
    }

    
    .masthead__workspace {
      flex: 1 1 0;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
    }

    
    .masthead .capture { order: 3; flex: 1 0 100%; }

    
    .masthead__key { display: none; }
    .capture__key { display: none; }
    .capture__input { padding-right: var(--space-2); }

    .masthead__back-to { display: none; }
    .masthead__back-chevron { display: none; }
    .masthead__back .menu__icon {
      display: block;
      width: 1.25rem;
      height: 1.25rem;
      transform: scaleX(-1);
    }
  }
}