/* ══════════════════════════════════════════════════════════════════════
   WHAT'S NEW — navbar entry point, login nudge, slide-over panel
   Loads after 05_navbar so it can sit alongside the brand cluster.
   All colors reference the Frontier tokens in 00_tokens.css.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Navbar cluster ─────────────────────────────────────────────────── */
/* Lift the whole navbar above the page content so the nudge, which hangs
   below the pill, paints over the property card instead of behind it.
   ALSO carries the property selector, whose open menu has to clear every
   sticky in-page band — see the z-index note in 05_navbar.css, which owns
   the value. Do not re-add a `z-index` here: two files setting it is how
   this collided with the Lease-Up strip in the first place. */
.fr-navbar { position: relative; }
/* Relatively-positioned wrapper so the nudge can anchor to the pill. */
.fr-wn-nav {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 12px;
}

/* ── Navbar trigger ─────────────────────────────────────────────────── */
.fr-wn-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    background: transparent;
    border: 0;
    border-radius: var(--fr-r-sm);
    cursor: pointer;
    color: var(--fr-ink-3);
    font-family: var(--fr-font-serif);
    font-size: 17px;
    line-height: 1;
    transition: background 120ms ease, color 120ms ease;
}
.fr-wn-trigger::before {
    content: "";
    width: 14px;
    height: 14px;
    flex: none;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23B45309'%20d='M12%201.5l1.9%207.6%207.6%201.9-7.6%201.9L12%2020.5l-1.9-7.6L2.5%2011l7.6-1.9z'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.55;
    transition: opacity 120ms ease;
}
.fr-wn-trigger:hover {
    background: var(--fr-bg);
    color: var(--fr-ink);
}
.fr-wn-trigger:hover::before { opacity: 1; }
.fr-wn-trigger:focus-visible {
    outline: 2px solid var(--fr-accent);
    outline-offset: 2px;
}
.fr-wn-label { position: relative; top: 1px; }

.fr-wn-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--fr-accent);
    color: #fff;
    font-family: var(--fr-font-sans);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    align-items: center;
    justify-content: center;
    animation: fr-wn-pop 0.35s ease-out;
}
@keyframes fr-wn-pop {
    0%   { transform: scale(0.4); opacity: 0; }
    70%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

/* ── Slide-over panel (dbc.Offcanvas, placement="end") ──────────────── */
.fr-wn-offcanvas.offcanvas { width: 400px !important; }
.fr-wn-offcanvas .offcanvas-header {
    border-bottom: 1px solid var(--fr-hairline);
    padding: 20px 22px 16px;
}
.fr-wn-offcanvas .offcanvas-title {
    font-family: var(--fr-font-serif);
    font-size: 24px;
    font-weight: 400;
    color: var(--fr-ink);
}
.fr-wn-offcanvas .offcanvas-body { padding: 6px 0 24px; }

.fr-wn-month {
    padding: 16px 22px 6px;
    font-family: var(--fr-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fr-ink-3);
}
.fr-wn-entry {
    padding: 14px 22px;
    border-top: 1px solid var(--fr-hairline);
}
.fr-wn-entry:first-of-type { border-top: 0; }
.fr-wn-entry.is-new {
    background: var(--fr-accent-soft);
    border-left: 3px solid var(--fr-accent);
    padding-left: 19px;
}
.fr-wn-entry-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}
.fr-wn-star {
    color: var(--fr-accent);
    font-size: 12px;
    line-height: 1;
}
.fr-wn-chip {
    font-family: var(--fr-font-sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fr-accent-strong);
    background: var(--fr-accent-soft);
    border-radius: 5px;
    padding: 2px 7px;
}
.fr-wn-entry.is-new .fr-wn-chip { background: var(--fr-surface); }
.fr-wn-date {
    margin-left: auto;
    font-family: var(--fr-font-sans);
    font-size: 11.5px;
    color: var(--fr-ink-3);
    font-variant-numeric: tabular-nums;
}
.fr-wn-title {
    font-family: var(--fr-font-sans);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--fr-ink);
    margin: 0 0 3px;
    line-height: 1.3;
}
.fr-wn-body {
    font-family: var(--fr-font-sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--fr-ink-2);
    margin: 0;
}
.fr-wn-empty {
    padding: 30px 22px;
    font-family: var(--fr-font-sans);
    font-size: 14px;
    color: var(--fr-ink-3);
}

/* ── Login nudge (toast) ────────────────────────────────────────────── */
.fr-wn-toast {
    position: absolute;
    top: calc(100% + 9px);
    left: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 11px;
    white-space: nowrap;
    background: var(--fr-ink);
    color: #fff;
    border-radius: var(--fr-r-md);
    padding: 12px 15px;
    box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.55);
    cursor: pointer;
    font-family: var(--fr-font-sans);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Upward caret (speech-bubble tail) pointing at the pill above. */
.fr-wn-toast::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 26px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid var(--fr-ink);
}
.fr-wn-toast.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    animation: fr-wn-toast-in 0.35s ease-out;
}
@keyframes fr-wn-toast-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fr-wn-toast-spark {
    width: 18px;
    height: 18px;
    flex: none;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23F0B892'%20d='M12%201.5l1.9%207.6%207.6%201.9-7.6%201.9L12%2020.5l-1.9-7.6L2.5%2011l7.6-1.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fr-wn-toast-txt { font-size: 13.5px; line-height: 1.35; }
.fr-wn-toast-txt b { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    .fr-wn-badge,
    .fr-wn-toast,
    .fr-wn-toast.show { animation: none !important; transition: none !important; }
}