/* ============================================================
   The 404 view.

   Shared by two callers: the `[...404]` catch-all route, and any route that
   is switched off at deploy time (`QIALIKE_BEE_ENABLE` / `QIALIKE_ENTERPRISE_ENABLE`
   — see `context/features.tsx`). Both render `component/not-found.tsx`, and the
   stylesheet travels with that component so a gated route gets it too.

   Chrome (the site header, footer and legal strip), the container/content
   skeleton, tokens and selection all come from `style/marketing.css`.

   Naming note: this card used `data-component="top"` / `"content"` /
   `"actions"`, which collided with the shared MARKETING chrome of the same
   name — the skin outranks a route stylesheet, so the card header was being
   turned into a sticky blurred site header and the card was stretched to the
   container width. The card now owns unambiguous names.
   ============================================================ */

[data-page="not-found"] {
  [data-component="not-found-card"] {
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    background: var(--mk-bg-soft);
    overflow: hidden;
  }

  [data-component="not-found-head"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 3rem;
    text-align: center;

    @media (max-width: 30rem) {
      padding: 1.5rem;
    }

    [data-slot="logo-link"] {
      text-decoration: none;
    }

    /* the marketing surface is dark-first, so only the dark mark is used */
    [data-slot="logo light"] {
      display: none;
    }

    [data-slot="logo dark"] {
      display: block;
      height: auto;
      /* the wordmark is 168x42 (4:1) and cropped to its ink, so width drives
         the size: 13.75rem ≈ 220px wide, ink ≈ 220x47 — matching the optical
         size this card had before the asset changed */
      width: clamp(180px, 70vw, 13.75rem);
    }

    [data-slot="title"] {
      margin: 0;
      font-size: 1.375rem;
      font-weight: 500;
      line-height: 1.25;
      color: var(--mk-text);
      text-align: center;
      text-transform: uppercase;

      @media (max-width: 30rem) {
        font-size: 1rem;
      }
    }
  }

  [data-component="not-found-actions"] {
    display: flex;
    border-top: 1px solid var(--mk-border);

    [data-slot="action"] {
      flex: 1;
      min-width: 0;
      font-size: 0.9375rem;

      a {
        display: block;
        width: 100%;
        padding: 1.5rem 1rem;
        color: var(--mk-text-2);
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
        transition: color var(--mk-fast), background var(--mk-fast);
      }

      a:hover {
        color: var(--mk-text);
        background: var(--mk-card);
      }
    }

    [data-slot="action"] + [data-slot="action"] {
      border-left: 1px solid var(--mk-border);
    }

    @media (max-width: 40rem) {
      flex-direction: column;

      [data-slot="action"] + [data-slot="action"] {
        border-left: none;
        border-top: 1px solid var(--mk-border);
      }
    }
  }
}