:root {
    background: var(--gmw-cream);
    color: var(--gmw-ink);
    font-family: var(--gmw-font-family);
}

html,
body {
    background-color: var(--gmw-cream);
    margin: 0;
    min-height: 100%;
}

body {
    background-image:
        radial-gradient(circle at top left, rgba(232, 196, 104, .20), transparent 34rem),
        radial-gradient(circle at top right, rgba(63, 107, 79, .14), transparent 30rem);
    color: var(--gmw-ink);
    font-family: var(--gmw-font-family);
    text-wrap: pretty;
}

a {
    color: inherit;
}

.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.content {
    padding: 0;
}

.page {
    min-height: 100vh;
}

main {
    min-width: 0;
}

/* Product app shell. A signed-out visitor gets a top nav above a full-width page
   (.gmw-app--public); a signed-in member keeps the sidebar rail beside the page
   (.gmw-app--member), exactly as before. */
.gmw-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.gmw-app__main {
    min-width: 0;
    padding: var(--gmw-space-4);
}

/* Signed-out top nav (restyle 2026-10, Main.dc.html / PhoneLanding.dc.html). */
.gmw-topnav {
    background: var(--gmw-white);
    position: relative;
    z-index: 20;
}

.gmw-topnav__inner {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1200px;
    padding: 18px 32px;
    width: 100%;
}

.gmw-topnav__brand {
    align-items: center;
    color: var(--gmw-ink);
    display: flex;
    font-family: var(--gmw-font-display);
    font-weight: 800;
    gap: 10px;
    letter-spacing: -.02em;
    text-decoration: none;
}

.gmw-topnav__mark svg {
    height: 44px;
    width: 44px;
}

.gmw-topnav__wordmark {
    font-size: 25px;
}

.gmw-topnav__my {
    color: var(--gmw-violet);
}

.gmw-topnav__links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.gmw-topnav__link {
    border-radius: var(--gmw-radius-pill);
    color: var(--gmw-ink);
    font-size: 15px;
    font-weight: 600;
    padding: 10px 14px;
    text-decoration: none;
}

.gmw-topnav__link:hover,
.gmw-topnav__link:focus-visible,
.gmw-topnav__link.active {
    background: var(--gmw-cream-2);
    outline: none;
}

.gmw-topnav__actions {
    align-items: center;
    display: flex;
    gap: 10px;
}

.gmw-topnav__signin {
    border: var(--gmw-border-control);
    border-radius: var(--gmw-radius-pill);
    color: var(--gmw-ink);
    font-size: 15px;
    font-weight: 700;
    padding: 11px 18px;
    text-decoration: none;
}

.gmw-topnav__signin:hover,
.gmw-topnav__signin:focus-visible {
    border-color: var(--gmw-line-3);
    outline: none;
}

.gmw-topnav__start {
    background: var(--gmw-primary);
    border-radius: var(--gmw-radius-pill);
    box-shadow: var(--gmw-shadow-button);
    color: var(--gmw-white);
    font-size: 15px;
    font-weight: 700;
    padding: 12px 20px;
    text-decoration: none;
}

.gmw-topnav__start:hover,
.gmw-topnav__start:focus-visible {
    background: var(--gmw-primary-2);
    color: var(--gmw-white);
    outline: none;
}

/* The menu button is only for the phone header, where the centre links collapse behind it. */
.gmw-topnav__menu {
    align-items: center;
    background: var(--gmw-white);
    border: var(--gmw-border-control);
    border-radius: 12px;
    color: var(--gmw-ink);
    cursor: pointer;
    display: none;
    height: 40px;
    justify-content: center;
    padding: 0;
    width: 40px;
}

.gmw-topnav__menu:hover,
.gmw-topnav__menu:focus-visible {
    border-color: var(--gmw-line-3);
    outline: none;
}

/* The signed-in sidebar (restyle 2026-10, App.dc.html): white ground, 248px rail, a search field,
   seven nav entries and a user card. Every rule that is desktop-only is switched on in the
   min-width:900px block below; the phone keeps the shell it had, so the text search link, the
   horizontal nav row and the old account layout are restored in the max-width:899.98px block. */
.gmw-sidebar {
    background: var(--gmw-white);
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 16px;
}

/* Desktop search field. A link styled as a field, not an input: it points at the same search route
   the old "Search my stuff" text link did and adds no behaviour. */
.gmw-sidebar__find {
    align-items: center;
    background: var(--gmw-lilac-mist);
    border: 1px solid var(--gmw-lilac-border);
    border-radius: var(--gmw-radius-sm);
    color: var(--gmw-slate);
    display: flex;
    font-size: 14px;
    gap: 8px;
    padding: 10px 14px;
    text-decoration: none;
}

.gmw-sidebar__find:hover {
    color: var(--gmw-ink);
}

.gmw-sidebar__find:focus-visible {
    color: var(--gmw-ink);
    outline: var(--gmw-focus-ring);
    outline-offset: 2px;
}

.gmw-sidebar__find-icon {
    flex: none;
}

/* The phone shell's text search link. Hidden on desktop, shown in the phone block below. */
.gmw-sidebar__search {
    display: none;
}

.gmw-nav-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gmw-nav-link {
    align-items: center;
    border-radius: var(--gmw-radius-sm);
    color: var(--gmw-ink);
    display: flex;
    font-size: 15px;
    font-weight: 600;
    gap: 10px;
    padding: 11px 14px;
    text-decoration: none;
}

.gmw-nav-link__icon {
    flex: none;
}

.gmw-nav-link:hover {
    background: var(--gmw-lilac-mist);
}

.gmw-nav-link:focus-visible {
    background: var(--gmw-lilac-mist);
    outline: var(--gmw-focus-ring);
    outline-offset: 2px;
}

.gmw-nav-link.active {
    background: var(--gmw-violet);
    color: var(--gmw-white);
    font-weight: 700;
}

.gmw-sidebar__account {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: var(--gmw-space-3);
}

/* The way into Profile & settings: the avatar and name in the user card, as one link. It fills the
   card beside the log-out control and is a 44px target (36px avatar plus its own padding). */
.gmw-sidebar__profile {
    align-items: center;
    border-radius: 10px;
    color: inherit;
    display: flex;
    flex: 1;
    gap: 10px;
    margin: -4px;
    min-height: 44px;
    min-width: 0;
    padding: 4px;
    text-decoration: none;
}

.gmw-sidebar__profile:hover {
    background: var(--gmw-violet-tint);
}

.gmw-sidebar__profile:focus-visible {
    background: var(--gmw-violet-tint);
    outline: var(--gmw-focus-ring);
    outline-offset: 2px;
}

/* On the settings page itself, the line under the name carries the "you are here" colour. */
.gmw-sidebar__profile.active .gmw-user__state {
    color: var(--gmw-violet-ink);
    font-weight: 700;
}

/* The provider's mark on a "Continue with ..." button: beside the label, never stretched. */
.gmw-provider-icon {
    flex: none;
    margin-right: 10px;
    vertical-align: -4px;
}

/* The user card at the foot of the rail: lemon avatar, name over "Profile & settings", icon-only log out. */
.gmw-user {
    align-items: center;
    background: var(--gmw-lilac-mist);
    border-radius: var(--gmw-radius-md);
    display: flex;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
}

.gmw-user__avatar {
    align-items: center;
    background: var(--gmw-lemon);
    border-radius: 999px;
    color: var(--gmw-ink);
    display: flex;
    flex: none;
    font-family: var(--gmw-font-display);
    font-size: 14px;
    font-weight: 700;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.gmw-user__id {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.gmw-user__name {
    color: var(--gmw-ink);
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gmw-user__state {
    color: var(--gmw-slate);
    font-size: 12px;
}

.gmw-user__logout {
    align-items: center;
    border-radius: 10px;
    color: var(--gmw-slate);
    display: flex;
    flex: none;
    height: 32px;
    justify-content: center;
    text-decoration: none;
    width: 32px;
}

.gmw-user__logout:hover {
    background: var(--gmw-violet-tint);
    color: var(--gmw-ink);
}

.gmw-user__logout:focus-visible {
    outline: var(--gmw-focus-ring);
    outline-offset: 2px;
}

/* Legal footer, inside div.gmw-app below main. Styled here rather than in MainLayout.razor.css:
   App.razor links only the three wwwroot stylesheets, never {Assembly}.styles.css, so no scoped
   .razor.css in this project reaches the browser -- the .razor.css files are built and served to
   nobody. */
.gmw-footer {
    align-items: center;
    border-top: 1px solid var(--gmw-line);
    color: var(--gmw-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gmw-space-2) var(--gmw-space-4);
    justify-content: space-between;
    padding: var(--gmw-space-4);
}

.gmw-footer__note {
    color: var(--gmw-muted-2);
    font-size: .84rem;
}

.gmw-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gmw-space-3);
}

.gmw-footer__link {
    color: var(--gmw-muted);
    text-decoration: none;
}

/* The affiliate disclosure: its own full-width row under the brand and the legal links. */
.gmw-footer__disclosure {
    color: var(--gmw-muted-2);
    flex-basis: 100%;
    font-size: .84rem;
    margin: 0;
}

.gmw-footer__link:hover,
.gmw-footer__link:focus-visible,
.gmw-footer__link.active {
    color: var(--gmw-ink);
    text-decoration: underline;
}

/* The signed-in phone header (PhoneApp.dc.html, GAN-269; add control GOT-271): one compact row
   carrying the search control, the add control and the brand. Desktop keeps the rail, so it is
   hidden from 768px up and switched on in the max-width:767.98px block. */
.gmw-apphead {
    display: none;
}

/* The account bottom tab (PhoneApp.dc.html, GAN-308): phone-only, shown in the max-width:767.98px
   block. The desktop rail keeps its own Profile & settings entry and user card. */
.gmw-nav-account {
    display: none;
}

/* The unread count beside "Messages" in the rail, and on the phone header's envelope
   (docs/product/messages-2026-10.md M19). */
.gmw-nav-badge {
    background: var(--gmw-coral);
    border-radius: 999px;
    color: var(--gmw-white);
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    margin-left: auto;
    min-width: 18px;
    padding: 0 5px;
    text-align: center;
}

@media (min-width: 900px) {
    /* The page ground behind the signed-in shell is lilac mist (App.dc.html), not the cream the
       signed-out pages still use. */
    .gmw-app--member {
        align-items: start;
        background: var(--gmw-lilac-mist);
        display: grid;
        grid-template-columns: 248px minmax(0, 1fr);
    }

    /* docs/UI-REVIEW-2026-10.md item 12: one centred content column rather than a block that stops
       short and sits on the left of a wide screen. */
    .gmw-app--member .gmw-app__main {
        margin: 0 auto;
        max-width: 1160px;
        padding: 32px 40px;
        width: 100%;
    }

    /* The legal footer is the shell's third child. It sits in the content column, at the page's own
       width, so it lines up with the content; spanning both columns put its start under the sticky rail.
       The rail spans both rows so the footer's row does not open a gap beside it. */
    .gmw-app--member .gmw-footer {
        box-sizing: border-box;
        grid-column: 2;
        margin: 0 auto;
        max-width: 1160px;
        padding: var(--gmw-space-4) 40px;
        width: 100%;
    }

    .gmw-app--member .gmw-sidebar {
        grid-row: 1 / span 2;
    }

    .gmw-sidebar {
        border-right: 1px solid var(--gmw-lilac-border);
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .gmw-sidebar .gmw-brand {
        font-size: 22px;
        padding: 0 8px;
    }
}

@media (max-width: 899.98px) {
    /* The phone shell is unchanged by this card: the desktop search field is swapped back for the
       text link, the nav collapses to the horizontal pill row without icons, and the account block
       stays the row of buttons it was. The next card owns the phone tab bar. */
    .gmw-sidebar {
        border-bottom: 1px solid var(--gmw-line);
    }

    .gmw-sidebar__find {
        display: none;
    }

    .gmw-sidebar__search {
        align-items: center;
        background: var(--gmw-card-solid);
        border: 1px solid var(--gmw-line);
        border-radius: 999px;
        color: var(--gmw-muted);
        display: flex;
        font-size: .92rem;
        gap: .5rem;
        padding: .55rem .85rem;
        text-decoration: none;
    }

    .gmw-sidebar__search:hover,
    .gmw-sidebar__search:focus-visible {
        border-color: var(--gmw-line-3);
        color: var(--gmw-ink);
    }

    .gmw-nav-list {
        flex-direction: row;
        gap: .4rem;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .gmw-nav-link {
        border: 1px solid var(--gmw-line);
        white-space: nowrap;
    }

    .gmw-nav-link__icon {
        display: none;
    }

    .gmw-nav-link.active {
        border-color: var(--gmw-primary);
    }

    .gmw-sidebar__account {
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 0;
    }

    .gmw-user {
        flex: 1 1 100%;
    }
}

/* The signed-in phone shell, from PhoneApp.dc.html (GAN-212, header GAN-269, account tab GAN-308, add
   control GOT-271). Under 768px the white sidebar stops being a rail: its children rejoin the page flow
   (display: contents), the desktop-only chrome is dropped, and the same nav becomes a fixed six-column
   bottom tab bar. The search and add routes live in one compact header row at the top of the page;
   Profile & settings and log out live in the account bottom tab, so no destination is lost and nothing is
   left stacked above the content. */
@media (max-width: 767.98px) {
    .gmw-app--member .gmw-sidebar {
        display: contents;
    }

    .gmw-sidebar .gmw-brand,
    .gmw-sidebar__find {
        display: none;
    }

    /* The header owns search and the account tab owns Profile & settings and log out on the phone, so
       the old stacked text search link, the profile pill and the user card leave the phone flow entirely. */
    .gmw-sidebar__search,
    .gmw-sidebar__account {
        display: none;
    }

    /* One header row: a 40px search control, a 40px add control and the brand. About 68px tall, so
       the page's own heading and banner sit inside the viewport. The account control that used to
       close the row moved to the bottom tab bar (GAN-308). */
    .gmw-apphead {
        align-items: center;
        background: var(--gmw-white);
        box-sizing: border-box;
        display: flex;
        padding: 16px 20px 8px;
    }

    .gmw-apphead__control {
        align-items: center;
        border: var(--gmw-border-control);
        border-radius: 12px;
        color: var(--gmw-ink);
        display: flex;
        flex: none;
        height: 40px;
        justify-content: center;
        text-decoration: none;
        width: 40px;
    }

    /* The add control sits beside search and keeps the primary affordance the floating pill carried:
       a filled violet plus. The 8px left margin keeps the two controls readable as separate
       targets. */
    .gmw-apphead__control--add {
        background: var(--gmw-violet);
        border-color: var(--gmw-violet);
        color: var(--gmw-white);
        margin-left: 8px;
    }

    .gmw-apphead__brand {
        align-items: center;
        color: var(--gmw-ink);
        display: flex;
        font-family: var(--gmw-font-display);
        font-weight: 800;
        gap: 6px;
        letter-spacing: -.02em;
        margin: 0 auto;
        text-decoration: none;
    }

    .gmw-apphead__mark svg {
        height: 32px;
        width: 32px;
    }

    .gmw-apphead__wordmark {
        font-size: 18px;
    }

    .gmw-apphead__my {
        color: var(--gmw-violet);
    }

    /* The account bottom tab (GAN-308): the sixth entry in the fixed bar, disclosed on tap. Its
       summary reuses the .gmw-nav-link tab layout; the menu opens upward above the bar. */
    .gmw-nav-account {
        display: flex;
        position: relative;
    }

    /* The details is a stretched grid item; letting the summary flex to fill it makes the
       account tab centre its icon and label on the same line as the five route tabs
       (GAN-314). Without the flex growth the summary stays content-height and sits high. */
    .gmw-nav-account__tab {
        cursor: pointer;
        flex: 1;
        list-style: none;
    }

    .gmw-nav-account__tab::-webkit-details-marker {
        display: none;
    }

    .gmw-nav-account__menu {
        background: var(--gmw-white);
        border: 1px solid var(--gmw-lilac-border);
        border-radius: var(--gmw-radius-md);
        bottom: calc(100% + 8px);
        box-shadow: var(--gmw-shadow-panel);
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 220px;
        padding: 8px;
        position: absolute;
        right: 0;
        z-index: 50;
    }

    .gmw-nav-account__who {
        align-items: center;
        display: flex;
        gap: 10px;
        padding: 6px 10px 8px;
    }

    .gmw-nav-account__avatar {
        align-items: center;
        background: var(--gmw-lemon);
        border-radius: 999px;
        color: var(--gmw-ink);
        display: flex;
        flex: none;
        font-family: var(--gmw-font-display);
        font-size: 13px;
        font-weight: 700;
        height: 32px;
        justify-content: center;
        width: 32px;
    }

    .gmw-nav-account__who-name {
        color: var(--gmw-ink);
        font-size: 14px;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .gmw-nav-account__link {
        align-items: center;
        border-radius: var(--gmw-radius-sm);
        color: var(--gmw-ink);
        display: flex;
        font-size: 14px;
        font-weight: 600;
        min-height: 44px;
        padding: 0 12px;
        text-decoration: none;
    }

    .gmw-nav-account__link:hover,
    .gmw-nav-account__link:focus-visible {
        background: var(--gmw-lilac-mist);
    }

    /* The nav is the bottom tab bar: fixed to the viewport, one even column per visible tab (five
       with the Occasions flag off, six with it on), icons over 11px labels, violet when the route
       is current and slate otherwise. Setting the column count from the rendered tabs rather than
       a fixed six keeps the last tab flush right in both flag states. It keeps the same
       aria-label="Main" landmark as the desktop rail. */
    .gmw-nav-list {
        background: var(--gmw-white);
        border-top: 1px solid var(--gmw-lilac-border);
        bottom: 0;
        box-sizing: border-box;
        display: grid;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        height: 76px;
        left: 0;
        overflow: visible;
        padding: 8px 8px 14px;
        position: fixed;
        right: 0;
        z-index: 40;
    }

    /* The artboard entries plus the account tab: Followed lists and the admin entry are
       desktop-only here. */
    .gmw-nav-list .gmw-nav-link--followed,
    .gmw-nav-list .gmw-nav-link--admin {
        display: none;
    }

    /* Messages is not a bottom tab (spec M19): on the phone it is the envelope in the header. */
    .gmw-nav-list .gmw-nav-link--messages {
        display: none;
    }

    .gmw-apphead__control--messages {
        position: relative;
    }

    .gmw-apphead__control--messages .gmw-nav-badge {
        margin: 0;
        position: absolute;
        right: -6px;
        top: -6px;
    }

    .gmw-nav-link {
        align-items: center;
        border: 0;
        color: var(--gmw-slate);
        display: flex;
        flex-direction: column;
        font-size: 11px;
        font-weight: 700;
        gap: 4px;
        justify-content: center;
        padding: 0;
        white-space: normal;
    }

    .gmw-nav-link__icon {
        display: block;
    }

    .gmw-nav-link:hover,
    .gmw-nav-link:focus-visible {
        background: transparent;
    }

    .gmw-nav-link.active {
        background: transparent;
        border-color: transparent;
        color: var(--gmw-violet);
        font-weight: 700;
    }

    /* Keep the last row clear of the fixed bar. The floating Add a wish button spans
       bottom:92px to about 145px, so the page's last content needs to clear that whole band. The legal
       footer comes after main, so the clearance is the footer's: on main it left the footer itself
       under the tab bar, out of sight. */
    .gmw-app--member .gmw-footer {
        padding-bottom: 160px;
    }
}

/* The signed-out header at phone width, from PhoneLanding.dc.html: the brand shrinks and the four
   centre links collapse behind the menu button. Without JavaScript the links stay in the flow as a
   plain stacked menu and Start wishing keeps its place; public-topnav.js sets data-enhanced and the
   collapse takes over, so an inert button is never shown. */
@media (max-width: 767.98px) {
    .gmw-topnav__inner {
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px 20px;
    }

    .gmw-topnav__mark svg {
        height: 36px;
        width: 36px;
    }

    .gmw-topnav__wordmark {
        font-size: 20px;
    }

    .gmw-topnav__signin {
        font-size: 13px;
        padding: 9px 14px;
    }

    .gmw-topnav__links {
        flex-basis: 100%;
        flex-direction: column;
        gap: 2px;
    }

    .gmw-topnav__menu {
        display: none;
    }

    .gmw-topnav[data-enhanced='true'] .gmw-topnav__start {
        display: none;
    }

    .gmw-topnav[data-enhanced='true'] .gmw-topnav__menu {
        display: inline-flex;
    }

    /* Hidden until the visitor opens the menu, then dropped below the header as a full-width panel. */
    .gmw-topnav[data-enhanced='true'] .gmw-topnav__links {
        background: var(--gmw-white);
        border-bottom: 1px solid var(--gmw-line);
        box-shadow: var(--gmw-shadow-panel);
        box-sizing: border-box;
        display: none;
        left: 0;
        padding: 8px 12px 14px;
        position: absolute;
        right: 0;
        top: 100%;
    }

    .gmw-topnav[data-enhanced='true'] .gmw-topnav__links[data-open='true'] {
        display: flex;
    }

    .gmw-topnav__link {
        border-radius: var(--gmw-radius-md);
    }
}

h1 {
    font-family: var(--gmw-font-display);
    font-size: clamp(2rem, 6vw, 3rem);
    line-height: 1;
    margin: 0 0 1rem;
}

p {
    line-height: 1.55;
    max-width: 38rem;
}

#blazor-error-ui {
    color-scheme: light only;
    background: var(--gmw-primary-tint);
    border-top: 1px solid var(--gmw-primary);
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}