/* ---------------------------------------------------------------------------
   public-nav.css — the marketing navigation bar shown on public pages.

   Scope: EVERY class here is prefixed `pnav-` and nothing outside `.pnav`
   is styled, so this file can be dropped onto any landing page (each of which
   ships its own self-contained `lp-*` / `lt-*` / `la-*` / `ug-*` block)
   without colliding with it.

   SPECIFICITY: the anchor rules are written `.pnav .pnav-x`, not `.pnav-x`.
   Several pages that host this bar ship their own `a { color: … }` reset in a
   page-scoped block (`.sh-body a { color: inherit }` on the marketplace pages,
   `.ht-body a` on the front door). A bare `.pnav-cta` LOSES to those — the CTA
   label rendered near-black on the black pill, i.e. invisible, on /shop,
   /product and /storefront. Keep the `.pnav ` prefix on anything that colours
   an <a>.

   Palette: monochrome, resolved from theme.css tokens only — no colour
   literals. The bar itself is a light band (`--surface-page` + a hairline);
   the primary CTA is the black `--brand-fill` pill. That keeps the front door
   reading as the same product as /dashboard.

   Structure mirrors the mega-menu pattern the brief asked for: a trigger row,
   and per-section a full-width panel with one FEATURED row on top and two
   columns of links under it.
   ------------------------------------------------------------------------ */

.pnav {
    position: sticky;
    top: 0;
    z-index: 1200;
    background: var(--surface-page);
    border-bottom: 1px solid var(--line);
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* The panels are absolutely positioned against this row, so it must establish
   the containing block AND stay above the page content that follows. */
.pnav-inner {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    height: 68px;
    display: flex;
    align-items: center;
    gap: 18px;
}

/* ── brand ─────────────────────────────────────────────────────────────────
   The SAME two-tone wordmark the app shell paints (.brand-title-ink /
   .brand-title-soft in style.css, rendered by views/partials/brand-bar.hbs).
   This bar used to show a square "T" plate plus the flat name, so the logo
   changed shape when a visitor crossed from `/` into a page wearing the app
   nav. Keep the two treatments identical — same halves, same two tokens. */
.pnav .pnav-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--ink);
    font-weight: 800;
    font-size: 1.14rem;
    letter-spacing: -0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}

.pnav .pnav-brand:hover { color: var(--ink); }

.pnav .pnav-brand-ink  { color: var(--ink); }
.pnav .pnav-brand-soft { color: var(--ink-muted); }

/* The manager site's lockup: a square "AI" mark next to the wordmark. These had
   no rules at all, and `.pnav-brand` is an inline-flex row, so the two spans sat
   flush against each other and the bar read "AIMy AI Model Manager". */
.pnav .pnav-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: 9px;
    border-radius: 7px;
    background: var(--ink);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.pnav .pnav-brand-text { color: var(--ink); }

/* The chat brand's lockup: its own tile (an <img> reading {{brand.logo}})
   next to the two-tone wordmark. Same footprint as .pnav-mark so the bar's
   height never depends on which brand is rendering. */
.pnav .pnav-logo {
    width: 26px;
    height: 26px;
    margin-right: 9px;
    border-radius: 7px;
    flex-shrink: 0;
    display: block;
}

/* ── desktop trigger row ───────────────────────────────────────────────── */
.pnav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 auto;
    list-style: none;
    padding: 0;
}

.pnav-item { position: static; }

.pnav .pnav-trigger,
.pnav .pnav-flat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    border-radius: 50px;
    padding: 9px 15px;
    font: inherit;
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.16s ease, color 0.16s ease;
}

.pnav-trigger:hover,
.pnav-flat:hover,
.pnav-item[data-open="true"] .pnav-trigger {
    background: var(--surface-sunken);
    color: var(--ink);
}

.pnav-trigger .bi {
    font-size: 0.7rem;
    color: var(--ink-muted);
    transition: transform 0.18s ease;
}

.pnav-item[data-open="true"] .pnav-trigger .bi { transform: rotate(180deg); }

.pnav-trigger:focus-visible,
.pnav-flat:focus-visible,
.pnav-login:focus-visible,
.pnav-cta:focus-visible,
.pnav-burger:focus-visible,
.pnav-link:focus-visible,
.pnav-feature:focus-visible,
.pnav-panel-foot a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ── right-hand actions ────────────────────────────────────────────────── */
.pnav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.pnav .pnav-login {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 50px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    transition: background 0.16s ease;
}

.pnav .pnav-login:hover { background: var(--surface-sunken); color: var(--ink); }

/* The label is deliberately GREY, not white: a full-white label on the black
   pill shouted louder than the page's own headline and made the bar read as an
   ad. `--brand-ink-soft` is the softened label on a brand fill (theme.css) and
   still clears 4.5:1 against `--brand-fill`. */
.pnav .pnav-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: 50px;
    background: var(--brand-fill);
    color: var(--brand-ink-soft);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.16s ease, transform 0.16s ease;
}

.pnav .pnav-cta:hover {
    background: var(--brand-fill-hover);
    color: var(--brand-ink-soft);
    transform: translateY(-1px);
}

/* ── signed-in identity (coins + avatar) ───────────────────────────────── */
/* The signed-out side of this bar is two pills competing for a click. The
   signed-in side is deliberately quieter: it reports state rather than asking
   for anything, so neither element uses --brand-fill. */
.pnav .pnav-coins {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border: 1px solid var(--line);
    border-radius: 50px;
    background: var(--surface-sunken);
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums; /* the balance must not reflow as it updates */
    white-space: nowrap;
}

.pnav .pnav-coins .bi { font-size: 0.9rem; color: var(--ink-soft); }

.pnav .pnav-avatar {
    display: inline-flex;
    border-radius: 50%;
    /* Transparent by default so only the hover/focus state spends a colour. */
    box-shadow: 0 0 0 2px transparent;
    transition: box-shadow 0.16s ease;
}

.pnav .pnav-avatar img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;      /* a non-square upload must not stretch */
    display: block;
    background: var(--surface-sunken); /* placeholder while it loads */
}

.pnav .pnav-avatar:hover,
.pnav .pnav-avatar:focus-visible { box-shadow: 0 0 0 2px var(--line-strong); }

.pnav .pnav-avatar:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Mobile panel identity row */
.pnav-mobile-me {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-sunken);
    text-decoration: none;
    color: var(--ink);
}

.pnav-mobile-me img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.pnav-mobile-me-text { display: flex; flex-direction: column; min-width: 0; }
.pnav-mobile-me-text strong {
    font-size: 0.95rem;
    font-weight: 700;
    /* A long nickname must not push the coin line out of the panel. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pnav-mobile-me-text small {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

/* ── mega panel ────────────────────────────────────────────────────────── */
/* Hidden with `display:none` rather than opacity so its links are not
   tabbable while closed and so it never eats clicks on the hero underneath. */
.pnav-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 20px;
    right: 20px;
    background: var(--surface-overlay);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14);
    padding: 8px;
    overflow: hidden;
}

.pnav-item[data-open="true"] .pnav-panel {
    display: block;
    animation: pnav-drop 0.16s ease;
}

@keyframes pnav-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .pnav-item[data-open="true"] .pnav-panel { animation: none; }
    .pnav-cta:hover { transform: none; }
}

/* The featured row — the section's own overview page. */
.pnav .pnav-feature {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--ink);
    transition: background 0.16s ease;
}

.pnav-feature:hover { background: var(--surface-sunken); color: var(--ink); }

.pnav-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand-gradient);
    color: var(--brand-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.pnav-feature-title {
    display: block;
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 3px;
}

.pnav-feature-desc {
    display: block;
    font-size: 0.9rem;
    color: var(--ink-soft);
    line-height: 1.45;
}

.pnav-divider {
    height: 1px;
    background: var(--line);
    margin: 8px 12px;
}

.pnav-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 24px;
    padding: 8px 12px 4px;
}

.pnav-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pnav-col-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding: 10px 12px 6px;
}

.pnav .pnav-link {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 11px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink);
    transition: background 0.16s ease;
}

.pnav-link:hover { background: var(--surface-sunken); color: var(--ink); }

.pnav-link-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--brand-fill-soft);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    flex-shrink: 0;
}

.pnav-link-title {
    display: block;
    font-size: 0.94rem;
    font-weight: 650;
    line-height: 1.35;
}

.pnav-link-desc {
    display: block;
    font-size: 0.83rem;
    color: var(--ink-soft);
    line-height: 1.4;
    margin-top: 2px;
}

/* "Soon" marker on links whose page is still a placeholder, so the nav is
   honest about what is behind a click. */
.pnav-soon {
    display: inline-block;
    margin-left: 7px;
    padding: 1px 7px;
    border: 1px solid var(--line-strong);
    border-radius: 50px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    vertical-align: middle;
}

.pnav-panel-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin: 6px 0 0;
    padding: 14px 24px;
    background: var(--surface-raised);
    border-radius: 12px;
}

.pnav-panel-foot a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.89rem;
    font-weight: 650;
    color: var(--ink);
    text-decoration: none;
}

.pnav-panel-foot a:hover { text-decoration: underline; }

/* ── mobile ────────────────────────────────────────────────────────────── */
.pnav-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-page);
    color: var(--ink);
    font-size: 1.2rem;
    cursor: pointer;
}

.pnav-mobile {
    display: none;
    position: fixed;
    inset: 68px 0 0;
    background: var(--surface-page);
    overflow-y: auto;
    padding: 12px 18px 40px;
    -webkit-overflow-scrolling: touch;
}

.pnav[data-mobile-open="true"] .pnav-mobile { display: block; }

.pnav-acc {
    border-bottom: 1px solid var(--line-soft);
}

.pnav-acc-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: none;
    border: 0;
    padding: 17px 4px;
    font: inherit;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
}

.pnav-acc-trigger .bi { font-size: 0.8rem; color: var(--ink-muted); transition: transform 0.18s ease; }
.pnav-acc[data-open="true"] .pnav-acc-trigger .bi { transform: rotate(180deg); }

.pnav-acc-body { display: none; padding: 0 0 14px; }
.pnav-acc[data-open="true"] .pnav-acc-body { display: block; }

.pnav-acc-body .pnav-col-label { padding: 12px 4px 4px; }
.pnav-acc-body .pnav-link { padding: 10px 4px; }

.pnav .pnav-mobile-flat {
    display: block;
    padding: 17px 4px;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line-soft);
}

.pnav-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
}

.pnav-mobile-actions .pnav-cta,
.pnav-mobile-actions .pnav-login {
    justify-content: center;
    padding: 14px 20px;
    font-size: 1rem;
}

.pnav-mobile-actions .pnav-login { border: 1px solid var(--line-strong); }

/* Locks the page behind the full-screen mobile panel. */
body.pnav-locked { overflow: hidden; }

@media (max-width: 1080px) {
    .pnav-link-desc { display: none; }
}

@media (max-width: 940px) {
    .pnav-links { display: none; }
    .pnav-burger { display: inline-flex; }
    .pnav-actions .pnav-login { display: none; }
    .pnav-inner { gap: 12px; justify-content: space-between; }
    .pnav-actions { margin-left: auto; }
}

@media (max-width: 520px) {
    /* The balance is repeated on the identity row inside the mobile panel, so
       dropping the chip here costs no information and leaves the avatar (the
       actual "am I signed in?" signal) room to sit beside the burger. */
    .pnav-actions .pnav-coins { display: none; }
    /* Kept visible, only smaller. It used to be display:none here, which meant
       the app name was absent from every page on a phone viewport — and that is
       one of the things Google's OAuth branding review checks for on the home
       page. Shrink it, never hide it. */
    .pnav .pnav-brand { font-size: 1rem; letter-spacing: -0.02em; }
    .pnav-actions .pnav-cta { padding: 9px 16px; font-size: 0.87rem; }
    .pnav-cols { grid-template-columns: minmax(0, 1fr); }
}

/* Narrow phones (360-390px): the full name, the CTA and the burger only fit on
   one row if the brand shrinks a little further. Still no ellipsis and still no
   display:none — a truncated app name reads as a different app name.
   NOTE: no `gap` on .pnav-brand. The two halves of the wordmark are one word
   ("tryon" + "look") and any gap here renders it as two — which is what a
   leftover `gap: 7px` from the old mark-plus-text lockup was doing. */
@media (max-width: 400px) {
    .pnav-inner { padding: 0 14px; gap: 8px; }
    .pnav .pnav-brand { font-size: 0.95rem; }
    .pnav-actions .pnav-cta { padding: 8px 12px; font-size: 0.8rem; }
}