/* =====================================================================
   Get the app — the masthead button, the menu card, and the install card.
   Same `sections` layer as the rest, so the `[hidden]` utility still wins.
   ===================================================================== */
@layer sections {

  /* ── in the masthead ── */
  .app-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .42rem .8rem .42rem .62rem;
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: var(--step--2);
    white-space: nowrap;
    color: var(--brass-ink);
    background: color-mix(in oklab, var(--brass) 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brass) 34%, transparent);
    transition: color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
  }
  .app-trigger:hover {
    color: var(--ink-0);
    background: color-mix(in oklab, var(--brass) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brass) 60%, transparent);
  }
  .app-trigger:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 999px; }
  .app-trigger svg { flex: none; }
  .app-trigger__short { display: none; }

  /* A small light until it has been opened once — the only nudge there is. */
  .app-trigger__dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brass);
    box-shadow: 0 0 0 2px var(--paper-0);
    display: none;
  }
  .app-trigger.has-dot .app-trigger__dot { display: block; }
  .app-trigger.has-dot .app-trigger__dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid var(--brass);
    opacity: 0;
  }

  /* Room for one more button on a phone comes out of the search label,
     never out of the wordmark: that keeps its one line and its .com. */
  .wordmark { flex-shrink: 0; }
  .masthead__tools, .cmd-trigger { min-width: 0; }
  .cmd-trigger__label { overflow: hidden; text-overflow: ellipsis; }

  @media (max-width: 59.999rem) {
    .app-trigger { min-height: 44px; padding: .42rem .7rem .42rem .6rem; gap: .35rem; }
    .app-trigger__label { display: none; }
    .app-trigger__short { display: inline; }
  }
  @media (max-width: 30rem) {
    .cmd-trigger__more { display: none; }
  }
  /* Most phones keep the icon and lose the word. */
  @media (max-width: 26.5rem) {
    .app-trigger { width: 40px; padding: 0; justify-content: center; }
    .app-trigger__short { display: none; }
  }

  @media (prefers-reduced-motion: no-preference) {
    .app-trigger:not([hidden]) { animation: app-in 700ms var(--ease-out) both; }
    .app-trigger.has-dot .app-trigger__dot::after { animation: app-ping 2.8s var(--ease-out) 1s infinite; }
  }
  @keyframes app-in { from { opacity: 0; transform: translateY(-4px); } }
  @keyframes app-ping {
    0% { transform: scale(.7); opacity: .8; }
    70%, 100% { transform: scale(2); opacity: 0; }
  }

  /* ── in the mobile menu ── */
  .sheet__app {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 100%;
    margin-block-end: 1.5rem;
    padding: .85rem 1rem .85rem .85rem;
    border-radius: var(--r-lg);
    text-align: start;
    color: var(--ink-0);
    background: color-mix(in oklab, var(--brass) 9%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brass) 30%, transparent);
  }
  .sheet__app img { flex: none; border-radius: 22%; }
  .sheet__app-text { display: grid; gap: .15rem; flex: 1; }
  .sheet__app strong { font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); }
  .sheet__app small { font-family: var(--font-ui); font-size: var(--step--2); color: var(--ink-2); }
  .sheet__app > svg { flex: none; color: var(--brass-ink); }

  /* ── the card ── */
  .install {
    width: min(100% - 2rem, 27rem);
    margin: auto;
    overflow: visible;
  }
  .install:not([open]) { display: none; }
  .install::backdrop { background: color-mix(in oklab, #000 70%, transparent); backdrop-filter: blur(6px); }
  .install__card {
    position: relative;
    padding: clamp(1.6rem, 5vw, 2.1rem);
    border-radius: var(--r-xl);
    text-align: center;
    color: var(--ink-1);
    background:
      radial-gradient(90% 50% at 50% 0%, color-mix(in oklab, var(--brass) 13%, transparent), transparent 75%),
      var(--paper-1);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brass) 24%, transparent), var(--edge-top), var(--shadow-md);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .install__close {
    position: absolute;
    top: .7rem;
    right: .7rem;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--ink-2);
    transition: color var(--t-fast), background-color var(--t-fast);
  }
  .install__close:hover { color: var(--ink-0); background: var(--surface); }
  .install__icon {
    margin: 0 auto;
    border-radius: 22%;
    box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .8), 0 0 0 1px color-mix(in oklab, var(--brass) 25%, transparent);
  }
  .install__kicker {
    margin-block-start: 1rem;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brass-ink);
  }
  .install__title {
    margin-block-start: .5rem;
    font-size: var(--step-2);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.02em;
  }
  .install__lede {
    margin: .75rem auto 0;
    max-width: 34ch;
    font-size: var(--step--1);
    line-height: 1.65;
    color: var(--ink-2);
  }

  .install__panel { margin-block-start: 1.35rem; text-align: start; }
  .install__panel + .install__panel { margin-block-start: 1rem; }
  .install__go { padding-block: 1rem; font-size: var(--step-0); }
  .install__fine { margin-block-start: .7rem; text-align: center; font-family: var(--font-ui); font-size: var(--step--2); color: var(--ink-3); }
  .install__note { font-size: var(--step--1); line-height: 1.65; color: var(--ink-2); }
  .install__note + .install__note { margin-block-start: .7rem; }
  .install__note strong, .install__steps strong { color: var(--ink-0); font-weight: 600; }
  .install__note--done { padding: .9rem 1rem; border-radius: var(--r-md); text-align: center; background: color-mix(in oklab, var(--brass) 10%, transparent); }

  .install__steps-label {
    margin-block-end: .55rem;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .install__steps {
    display: grid;
    gap: .55rem;
    padding: 0;
    list-style: none;
  }
  .install__steps li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem .9rem;
    border-radius: var(--r-md);
    font-size: var(--step--1);
    line-height: 1.55;
    color: var(--ink-1);
    background: color-mix(in oklab, var(--surface) 70%, transparent);
    box-shadow: inset 0 0 0 1px var(--line-soft);
  }
  .install__steps em { display: block; margin-block-start: .2rem; font-size: .92em; color: var(--ink-3); }
  .install__num {
    flex: none;
    width: 1.55rem;
    height: 1.55rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: .85rem;
    color: var(--brass-ink);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brass) 45%, transparent);
  }
  .install__glyph {
    display: inline-block;
    vertical-align: -3px;
    margin-inline: .1rem;
    color: var(--brass);
  }

  /* On a phone it rises from the bottom, where the thumb already is. */
  @media (max-width: 40rem) {
    .install { width: 100%; max-width: none; margin: auto 0 0; }
    .install__card {
      border-radius: var(--r-xl) var(--r-xl) 0 0;
      padding-bottom: max(1.6rem, env(safe-area-inset-bottom));
      max-height: 92dvh;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .install[open]::backdrop { animation: app-veil 300ms var(--ease-out) both; }
    .install[open] .install__card { animation: app-rise 520ms var(--ease-out) both; }
  }
  @keyframes app-veil { from { opacity: 0; } }
  @keyframes app-rise { from { opacity: 0; transform: translateY(24px); } }

  @media print {
    .app-trigger, .sheet__app { display: none; }
  }
}