/* Marketplace: its pages use the app's shell, mast, buttons, forms and tokens (the app's CSS as the cached /app.css);
   this file holds only what the marketplace adds: the advert list and card, photos, counts, and the superuser's
   Marketplaces page (.mp-admin-*). Mobile first. */

/* Brand: the logo and the marketplace's name. */
.market-wordmark {
    gap: .6rem;
    min-width: 0;
    text-decoration: none;
}

.market-wordmark__name {
    overflow: hidden;
    font-family: var(--fnt-hdg);
    font-size: var(--siz1);
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink1);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A count on a nav item (unread messages, open complaints). */
.market-count {
    min-width: 1.25rem;
    margin-left: auto;
    padding: .1rem .4rem;
    border-radius: 99px;
    background: var(--blu1);
    font-size: var(--siz0);
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink0);
    text-align: center;
}

.account-nav__item[data-role-gated] .market-count {
    background: var(--pur3);
}

/* Phones don't zoom into a field whose text is at least 16px. */
.page-market .field__input,
.page-market .field__textarea {
    font-size: max(16px, var(--siz1));
}

.page-market .market-search {
    width: min(22rem, 46vw);
    min-width: 8rem;
}

.market-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* One column on phones, two from 60rem. */
.market-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    width: 100%;
    max-width: 60rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media screen and (min-width: 1100px) {
    .market-list:not(.market-letters) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

/* The card: a tile's surface (ink8, rad4) that grows with its content. */
/* A heading to what follows it, in a card or over a list of cards. */
.market-main,
.market-card {
    --market-heading-gap: .75rem;
}

.market-card {
    --market-card-pad: 1.5rem;
    --market-card-gap: .75rem;
    display: flex;
    flex-direction: column;
    gap: var(--market-card-gap);
    box-sizing: border-box;
    min-width: 0;
    max-width: 60rem;
    padding: var(--market-card-pad);
    background: var(--ink8);
    border-radius: var(--rad4);
}

.market-card__title {
    margin: 0;
    font-size: var(--siz2);
    font-weight: 600;
    color: var(--ink1);
}

.market-card__text {
    margin: 0;
    color: var(--ink2);
}

.market-card__meta {
    margin: 0;
    font-size: var(--siz0);
    color: var(--ink3);
}

/*.market-card a:not(.btn),
.market-form a:not(.btn) {
    color: var(--blu0);
}*/


.market-empty {
    margin: 2rem 0;
    color: var(--ink4);
    text-align: center;
}

.market-section {
    margin: .5rem 0 0;
}

.market-form {
    width: 100%;
    max-width: 36rem;
    gap: 1rem;
}

.market-form .field__input,
.market-form .field__textarea {
    width: 100%;
    box-sizing: border-box;
}

.market-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.market-fieldset > legend {
    margin-bottom: .5rem;
    padding: 0;
}

.market-areas {
    max-height: 18rem;
    overflow-y: auto;
}

/* A photo slot: the button and its file name straight on the Photos card (no field box around them). */
.market-file {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-family: var(--fnt-std);
    font-size: var(--siz0); /* the Photos heading's size (.field__label), button included */
    font-weight: 600;
    color: var(--ink2);
}

/* .75rem between the Photos card's rows (the photos kept, then the upload slots), with the fieldset's own .25rem gap. */
:is(.market-existing, .market-file) + :is(.market-existing, .market-file) {
    margin-top: .5rem;
}


/* Edit Advert: a photo it keeps, drawn like the adverts' thumbnails (a button-high circle, inset ink6 ring). */
.market-existing img {
    width: var(--btn-hgt);
    height: var(--btn-hgt);
    border-radius: 50%;
    object-fit: cover;
    outline: 2px solid var(--ink6);
    outline-offset: -2px;
}

/* An advert. */
.market-ad__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.market-ad__text {
    margin: 0;
    padding-block: 1rem;
    font-size: var(--siz2);
    font-weight: 400;
    line-height: 1.35;
    color: var(--ink1);
    white-space: pre-line;
    overflow-wrap: anywhere;
    text-wrap: pretty;
    user-select: text;
}

.market-kind {
    padding: .15rem .45rem;
    border-radius: var(--rad1);
    background: var(--ink7);
    color: var(--ink1);
}

.market-kind--service {
    color: var(--cya0);
}

.market-edited {
    color: var(--ylw1);
}

.market-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    /* Space from the poster line above equals the card's padding. */
    margin-top: calc(var(--market-card-pad) - var(--market-card-gap));
}

/* A round thumbnail at the button height (the photo's middle), outlined; a tap opens the full photo. */
.market-photo {
    display: block;
    flex: 0 0 auto;
    border-radius: 50%;
    outline: 2px solid var(--ink6);
    outline-offset: -2px;
    overflow: hidden;
    background: var(--ink7);
}

.market-photo img {
    display: block;
    width: var(--btn-hgt);
    height: var(--btn-hgt);
    object-fit: cover;
}

.market-ad__acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.market-ad__acts form {
    display: contents;
}

.market-act .icon {
    width: 20px;
    height: 20px;
}

.market-act__count {
    min-width: 1ch;
    font-size: var(--siz0);
    font-weight: 600;
    color: var(--ink3);
}

.market-act.is-on {
    color: var(--ink0);
}

.market-act.is-on .icon {
    background-color: var(--ylw1);
}

.market-flag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-right: .25rem;
    font-weight: 600;
    color: var(--red0);
}

.market-flag .icon {
    width: 20px;
    height: 20px;
    background-color: currentColor;
}

.market-more {
    display: flex;
    justify-content: center;
    grid-column: 1 / -1;
    margin: 0;
}

/* Messages: a card per person, like a profile: their photo (outlined, as on the Avatar), their name, and when and
   where you last messaged; tapping it opens the chat. */
.market-letter {
    color: inherit;
    text-decoration: none;
    transition: background .125s ease;
}

.market-card.market-person {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.market-person__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.market-person__name,
.market-person__meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-person__name {
    font-size: var(--siz2);
    font-weight: 600;
    color: var(--ink1);
}

.market-person__meta {
    font-size: var(--siz0);
    color: var(--ink3);
}

@media (hover: hover) {
    .market-letter:hover {
        background: var(--ink7);
    }
}

.market-quote {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin: 0;
}

.market-quote__text {
    color: var(--ink2);
    white-space: pre-line;
}

.market-terms ul {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0;
    padding-left: 1.25rem;
    color: var(--ink2);
}

/* The superuser's Marketplaces page (inside the app shell). */
.mp-admin-list,
.mp-admin-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 44rem;
}

.mp-admin-row,
.mp-admin-form {
    padding: 1.25rem;
    border-radius: var(--rad4);
    background: var(--ink8);
}

.mp-admin-row__name {
    margin: 0 0 .25rem;
    font-size: var(--siz2);
}

.mp-admin-row__state {
    font-size: var(--siz1);
    font-weight: normal;
    color: var(--ink3);
}

.mp-admin-row__line {
    margin: .25rem 0;
    color: var(--ink2);
}

.mp-admin-row__problems {
    margin: .25rem 0;
    color: var(--red1);
}

.mp-admin-form .field__input + .field__input {
    margin-top: .5rem;
}

.mp-admin-form__areas {
    min-height: 8rem;
    resize: vertical;
}

.mp-admin-form__trio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}

.mp-admin-form__trio .field__input + .field__input {
    margin-top: 0;
}

.mp-admin-form__check {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
}

.market-file::file-selector-button {
    margin-right: .75rem;
    padding: .45rem .9rem;
    border: 0;
    border-radius: var(--rad1);
    background: var(--ink6);
    font: inherit;
    font-size: var(--siz1); /* the button keeps the form's text size; only the file name beside it is small */
    font-weight: 600;
    color: var(--ink1);
    cursor: pointer;
}

.market-member {
    gap: .5rem;
}

.market-number {
    max-width: 8rem;
}

/* The marketplace an advert is in (the stream merges a person's marketplaces). */
.market-card .market-ad__market {
    display: inline-block;
    align-self: flex-start;
    font-size: var(--siz0);
    font-weight: 400;
    color: var(--ink3);
    text-decoration: none;
}

.market-ad__market .icon {
    width: 16px;
    height: 16px;
    background-color: currentColor;
}

/* The live town search's suggestions, under its field. */
.market-place {
    position: relative;
}

/* The town field with the phone's-location button (its globe) at its right, .75rem apart; the suggestions open under
   the field, the button staying level with it. */
.market-place__row {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.market-place__search {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.market-suggest {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: .25rem;
    padding: .25rem;
    border-radius: var(--rad2);
    background: var(--ink7);
}

.market-suggest[hidden] {
    display: none;
}

.market-suggest__item {
    min-height: 44px;
    padding: .5rem .75rem;
    border: 0;
    border-radius: var(--rad1);
    background: transparent;
    font: inherit;
    color: var(--ink1);
    text-align: left;
    cursor: pointer;
}

.market-suggest__item:hover,
.market-suggest__item:focus-visible {
    background: var(--ink6);
}

.market-tile {
    scroll-margin-top: 1rem;
}

/* The Marketplaces page's areas: towns picked from the search, each removable; a typed one is flagged. */
.mp-areas__list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: 0 0 .5rem;
    padding: 0;
    list-style: none;
}

.mp-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
    padding: .35rem .35rem .35rem .75rem;
    border-radius: var(--rad1);
    background: var(--ink7);
}

.mp-area__name {
    flex: 1 1 12rem;
    color: var(--ink1);
}

.mp-area__note {
    font-size: var(--siz0);
    color: var(--grn0);
}

.mp-area--loose .mp-area__note {
    color: var(--ylw1);
}

/* Messages as a chat: the advert at the top, their messages on the left, yours on the right, the reply box below. */
.market-count--inline {
    margin-left: .35rem;
}


.market-chat {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
    max-width: 40rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.market-bubble {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    align-self: flex-start;
    max-width: 80%;
    padding: .6rem .8rem;
    border-radius: var(--rad4) var(--rad4) var(--rad4) var(--rad1);
    background: var(--ink8);
}

.market-bubble--mine {
    align-self: flex-end;
    border-radius: var(--rad4) var(--rad4) var(--rad1) var(--rad4);
    background: color-mix(in srgb, var(--blu1) 45%, var(--ink8));
}

.market-bubble__text {
    color: var(--ink0);
    white-space: pre-line;
    overflow-wrap: anywhere;
    user-select: text;
}

.market-bubble__when {
    align-self: flex-end;
    font-size: var(--siz0);
    color: var(--ink3);
}

/* A chat has every advert you two talked about: an "About" line, centred like a date, wherever talk turns to another. */
.market-chat__about {
    align-self: center;
    max-width: 100%;
    padding-top: .5rem;
    overflow: hidden;
    font-size: var(--siz0);
    color: var(--ink2);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-chat__about:first-child {
    padding-top: 0;
}

.market-chat__reply {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    width: 100%;
    max-width: 40rem;
}

.market-chat__box {
    width: 100%;
    box-sizing: border-box;
}

.market-chat__reply .field__error {
    grid-column: 1 / -1;
}

/* Profile photos: small and round beside a name; the Photo tile's larger one. */
.market-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--ink6);
    font-size: .7rem;
    font-weight: 600;
    color: var(--ink1);
    vertical-align: middle;
}

.market-avatar--large {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 1.5rem;
}

/* A file input dressed as a button (Take Photo, Choose Picture). */
.market-file-btn {
    position: relative;
    overflow: hidden;
}

.market-file-btn input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* Live updates: the stream's poller takes no room. */
.market-live {
    display: none;
}

/* Messages: a conversation with a new message (blu1) until it's opened. */
.market-card.market-letter--new {
    background: var(--blu1);
}

.market-letter--new .market-person__name,
.market-letter--new .market-person__meta {
    color: var(--ink0);
}

/* The Profile's Complaints tile. */
.market-complaints {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.market-complaint {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.market-complaint__advert {
    color: var(--ink1);
}

/* The marketplace's pages: every block centred in the column, at its own width. */
.market-main > * {
    width: 100%;
    margin-inline: auto;
}

/* The stream's keyword search, at the top of the column. */
.market-searchbar .field__input {
    width: 100%;
    box-sizing: border-box;
}

/* A plain note where something needs saying (paused, closed, nothing to offer). */
.market-note {
    max-width: 60rem;
    margin: 0;
    color: var(--ink3);
}

/* The line above an advert's buttons (nanobase's hr, as in the nav's New Space). */
.market-ad__rule {
    width: 100%;
    margin: 0;
    background-color: var(--ink7);
}

/* The poster's photo or monogram on an advert. */
/* The same size as the photo thumbnails (the button height). */
.market-ad__meta .market-avatar {
    width: var(--btn-hgt);
    height: var(--btn-hgt);
    font-size: 1.1rem;
}

/* Complain (someone else's advert) or Delete (your own) sits apart at the left; the rest at the right. */
.market-ad__acts .market-act--start {
    margin-right: auto;
}

/* The adverts stream (Adverts, a marketplace's page): one centred column at every width, its notes and More with it. */
.market-list[data-mk-stream],
.market-list.market-letters,
.market-list.market-column {
    grid-template-columns: minmax(0, 1fr);
    max-width: 36rem;
    margin-inline: auto;
}

.market-main > .market-note:has(+ [data-mk-stream]),
.market-main > .market-note:has(+ .market-letters) {
    max-width: 36rem;
    margin-inline: auto;
}

/* Every icon on an advert, and the Photo card's Remove, at one size. */
.market-ad .icon,
.market-photo-remove .icon {
    width: 24px;
    height: 24px;
}

/* Beside the name, "listed 4h ago on …" takes the rest of the line, cut short with an ellipsis when it won't fit. */
.market-card .market-ad__meta .market-ad__market {
    flex: 1 1 0;
    min-width: 0;
    align-self: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The poster's name, beside their photo. */
.market-ad__who {
    flex: 0 0 auto;
    color: var(--ink1);
}

/* Photo, name and "listed 4h ago on …" spaced like words: a small gap after the photo, one space after the name. */
.market-ad .market-ad__meta {
    gap: 0;
}

/* The poster's photo or monogram at the right of the top line; name and "listed …" on the left. */
.market-ad__meta .market-avatar {
    order: 2;
    margin-left: .75rem;
}

.market-ad__who {
    margin-right: .3em;
}

/* The poster's photo or monogram outlined like the photo thumbnails. */
.market-ad__meta .market-avatar {
    outline: 2px solid var(--ink6);
    outline-offset: -2px;
}

/* A tapped thumbnail's photo over the page (market.js): fades in, a tap fades it out. */
.market-viewer {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgb(0 0 0 / .85);
    opacity: 0;
    transition: opacity .2s ease;
    cursor: zoom-out;
}

.market-viewer.is-open {
    opacity: 1;
}

.market-viewer img {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--rad1);
    object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
    .market-viewer {
        transition: none;
    }
}

/* A chat in a modal over the page (market.js opens it from Message and from Messages; a chat link opened as a page is
   Messages with it open): fades in and out, the messages scroll inside it, the reply box stays at the bottom. */
.market-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgb(0 0 0 / .6);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s;
}

.market-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.market-modal__box {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 40rem;
    height: min(40rem, 100%);
    padding: 1.5rem;
    background: var(--ink8);
    border-radius: var(--rad4);
    outline: none;
}

.market-modal__head {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.market-modal__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: var(--siz2);
    font-weight: 600;
    color: var(--ink1);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-modal__head .market-avatar {
    width: var(--btn-hgt);
    height: var(--btn-hgt);
    font-size: 1.1rem;
}

/* The messages scroll; 1rem inside at each side keeps the bubbles clear of the scrollbar. */
.market-modal .market-chat {
    flex: 1 1 auto;
    min-height: 0;
    max-width: none;
    padding-inline: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.market-modal .market-chat__reply {
    max-width: none;
}

/* Phones: the chat fills the screen. */
@media screen and (max-width: 767px) {
    .market-modal {
        padding: 0;
    }

    .market-modal__box {
        max-width: none;
        height: 100%;
        padding: 1rem;
        border-radius: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .market-modal {
        transition: none;
    }
}

/* A heading in the label style (Complaints, Moderate): a form label (.field__label: its weight and colour family) at
   siz2 in ink1 on the body's line height, --market-heading-gap above what follows, whatever holds it; a note beside one
   ("(1 marketplace)") keeps the small label size, in ink2. Post Advert, Location and Markets head their cards with a
   plain h2 in a fieldset with gap(1) instead. */
.market-heading {
    margin: 0;
    font-size: var(--siz2);
    line-height: inherit;
    color: var(--ink1);
}

legend.market-heading {
    margin-bottom: var(--market-heading-gap);
}

.fieldset > .market-heading:not(legend) {
    margin-bottom: calc(var(--market-heading-gap) - .25rem); /* the fieldset's own .25rem gap makes up the rest */
}

.market-card > .market-heading {
    margin-bottom: calc(var(--market-heading-gap) - var(--market-card-gap)); /* the card's own gap makes up the rest */
}

.market-form__aside {
    font-size: var(--siz0);
    color: var(--ink2);
}

/* Post and Edit Advert: Cancel and Post at the right, under the cards. */
.market-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
}

/* Location, Markets and Complaints: their cards in one column 16px apart, 36rem wide; Save sits at the right under
   its card. */
.market-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 36rem;
}

/* The Photo card's picture: outlined like the adverts' photos and monograms (inset, so its size stays). */
.market-avatar--large {
    outline: 2px solid var(--ink6);
    outline-offset: -2px;
}

/* Moderate: a heading over a list of cards (Complaints, Members), --market-heading-gap above the first card. */
.market-group {
    display: flex;
    flex-direction: column;
    gap: var(--market-heading-gap);
}

.market-group .market-empty {
    margin: 0; /* "No open complaints." sits where the first card would */
}

/* Markets' Photo card: the picture itself opens the front camera (on a computer, the file picker). */
.market-avatar-take {
    position: relative;
    display: inline-flex;
    border-radius: 50%;
    cursor: pointer;
}

.market-avatar-take input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.market-avatar-take input[type="file"]::file-selector-button {
    cursor: pointer;
}

.market-avatar-take:focus-within {
    outline: solid var(--thk) var(--blu1);
    outline-offset: 2px;
}

/* Markets' Photo card: the picture, and Remove (when there's a photo) at the card's right edge, centred on it. The
   upload form holds only the no-script Save, so it takes no room. */
.market-photo-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.market-photo-remove {
    margin-left: auto;
}

.market-photo-form {
    display: contents;
}

/* Adverts: Today, This Week and All share the column's width in one row (the chosen one primary), with as much space
   below them as the main area has above (--shell-pad: 2rem, phones 1rem). */
.market-feed {
    display: flex;
    flex-direction: column;
    gap: var(--shell-pad);
}

.market-filter {
    display: flex;
    gap: .75rem;
    width: 100%;
    max-width: 36rem;
    margin-inline: auto;
}

.market-filter .btn {
    flex: 1 1 0;
    justify-content: center;
}

/* A line of text under a card's heading, then its choices (Markets): the choices as far below it as the card's padding
   (the fieldset's gap(1), 1rem, makes up the rest). */
.market-fieldset > p + .option-group {
    margin-top: calc(var(--market-card-pad) - 1rem);
}

/* Updates fade in (market.js marks what's new: live adverts, messages, a swapped stream, More). */
@keyframes market-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.market-fade {
    animation: market-fade-in .3s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .market-fade {
        animation: none;
    }
}

/* Public pages (signed out: Log In, Sign Up, Terms, a marketplace's landing): on tablets and desktop no account nav at
   the left; the mast carries the logo (left) and the menu's buttons (right), the current page's marked like the nav's.
   Phones keep their bar with the logo and menu, so the mast's copy isn't shown there. */
.market-public {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
}

.market-public__brand {
    display: inline-flex;
    align-items: center;
    margin-right: auto;
}

.market-public .btn[aria-current="page"] {
    background: var(--ink6);
    color: var(--ink0);
}

@media screen and (min-width: 768px) {
    .page-public .account-nav {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .page-public .mast--shell {
        display: none;
    }
}