/* 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. Mobile first.

   The page's shared pieces first, under market-* (the column, lists and stacks, notes, the fade); then the three
   kinds of card, each its own block with its own classes, so a change to one never reaches another: the public card
   (public-card*: the signed-out cards), the advert card (ad-card*: an advert, wherever it's listed) and the form card
   (form-card*: every signed-in card with a heading: forms, Complaints, the Markets page's markets, the stream's
   prompts). Then the other shared pieces (a person's avatar and byline, the photo viewer, the nav's counts, the
   signed-out bar), and last each page's own section, its classes named for the page: adverts-*, messages-*,
   profile-*, cellphone-*, complaints-*, marketplaces-*, terms-*. */

/* ------------------------------------------------------------------------------------------------------------------
   Shared: the page
   ------------------------------------------------------------------------------------------------------------------ */

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

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

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

/* A list of cards (Adverts, Messages, Moderate): one centred column, 36rem wide, at every width. */
.market-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    width: 100%;
    max-width: 36rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

/* Cards in one column 16px apart, 36rem wide (Profile, Complaints, Terms, Marketplaces). */
.market-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 36rem;
}

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

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

/* A card a link can scroll to (/settings#markets). */
.market-anchor {
    scroll-margin-top: 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 card: Log In, Sign Up, Reset Password (its number, then its code), a market's landing, Not found
   ------------------------------------------------------------------------------------------------------------------ */

/* A tile's surface (ink8, rad4), 1.5rem inside; the card is the <form> when it has fields. Its heading plain (no band)
   and larger, in line with the fields below it; its two buttons side by side at its foot. On phones the column's
   width, at most 36rem; from tablets 25rem, centred in the space below the mast.

   <form class="public-card" …>
       <header class="public-card__head"><span class="public-card__heading">Log In</span></header>
       <div class="col(lc) gap(.75) pad-x(.75) pad-t(1.25) pad-b(.75)">
           …fields…
           <footer class="public-card__pair wid(max) pad-t(1)">…two buttons…</footer>
       </div>
   </form> */
.public-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 36rem;
    padding: 1.5rem;
    background: var(--ink8);
    border-radius: var(--rad4);
}

@media screen and (min-width: 768px) {
    .page-public .market-main > .public-card {
        max-width: 25rem;
        margin-block: auto;
    }
}

.public-card a:not(.btn) {
    color: var(--ink3);
}

.public-card .field__input,
.public-card .field__textarea {
    width: 100%;
    box-sizing: border-box;
}

/* A country picker reads like the inputs beside it: no caret, its text where theirs starts,
   centred in its height as theirs is (Safari sets a select's text low in vertical padding). */
.public-card select.field__input {
    appearance: none;
    -webkit-appearance: none;
    padding-block: 0;
}

.public-card__head {
    padding: .75rem .75rem 0;
    border-radius: var(--rad1);
}

.public-card__heading {
    font-family: var(--fnt-hdg);
    font-size: var(--siz3);
    font-weight: 550;
    color: var(--ink1);
}

/* Two buttons side by side, sharing the row's width (Log In and Reset Password, Sign Up and Log In). */
.public-card__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.public-card__pair > .btn {
    width: 100%;
    justify-content: center;
}

/* A market's landing: its name over Join (and Log In); Not found: a line. */
.public-card__title {
    margin: 0;
    font-size: var(--siz2);
    font-weight: 600;
    color: var(--ink1);
}

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

/* ------------------------------------------------------------------------------------------------------------------
   Advert card: an advert in the stream (Adverts), on a market's page and on Moderate
   ------------------------------------------------------------------------------------------------------------------ */

/* A tile's surface (ink8, rad4), 1rem inside, the list's width. Its head the poster's byline (.market-byline), then
   the advert's text, its photos, a line, and its buttons: Complain, or Delete and Edit, apart at the left; the rest
   at the right.

   <article class="ad-card">
       <header class="ad-card__head"><p class="subhead market-byline">…</p></header>
       <p class="ad-card__text">…</p>
       <div class="ad-card__photos"><a class="ad-card__photo" …><img …></a>…</div>
       <hr class="bgd(ink7)">
       <div class="ad-card__acts"><button class="btn btn--quiet btn--icon ad-card__act ad-card__act--start">…</div>
   </article> */
.ad-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 60rem;
    padding: 1rem;
    background: var(--ink8);
    border-radius: var(--rad4);
}

.ad-card a:not(.btn) {
    color: var(--ink3);
}

/*.ad-card__head {
    padding: .75rem 1rem .75rem .75rem;
    border-radius: var(--rad1);
}*/

.ad-card__text {
    margin: 0;
    padding: 1.5rem 0;
    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;
}

.ad-card__photos {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    padding: 0 0 1.5rem 0;
}

.ad-card__photo {
    display: block;
    flex: 0 0 auto;
    border-radius: var(--rad1);
    outline: 2px solid var(--ink6);
    outline-offset: -2px;
    overflow: hidden;
    background: var(--ink7);
}

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

.ad-card__acts {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    padding: .75rem 0;
}

.ad-card__acts form {
    display: contents;
}

/* Every icon in the footer at one size. */
.ad-card__acts .icon {
    width: 24px;
    height: 24px;
}

.ad-card__acts .ad-card__act--start {
    margin-right: auto;
}

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

.ad-card__act.is-on {
    color: var(--ink0);
}

.ad-card__act.is-on .icon {
    background-color: var(--ylw0);
}

/* The Interested count checking for a new count (htmx): only its button takes room. */
.ad-card__live {
    display: contents;
}

/* Its open complaints (Moderate). */
.ad-card__flag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-right: .25rem;
    font-weight: 600;
    color: var(--red0);
}

.ad-card__flag .icon {
    background-color: currentColor;
}

/* ------------------------------------------------------------------------------------------------------------------
   Form card: New Advert, Edit Advert, Profile, WhatsApp, Notifications, Complaints, the Markets page's markets and its
   form, the stream's prompts
   ------------------------------------------------------------------------------------------------------------------ */

/* A tile's surface (ink8, rad4), 1rem inside, the column's width, at most 36rem; the card is the <form> when it has
   fields. Each section a heading (a 24px Lucide icon before it, or none) and its fields, sections ruled off; Cancel
   and Save (or one button) at its foot, at the left, sharing its width.

   <form class="form-card" …>
       <header class="form-card__head form-card__head--icon">
           <span class="icon icon--lucide-bell form-card__icon" aria-hidden="true"></span>
           <span class="form-card__heading">…</span>
       </header>
       <div class="pad-x(.75) pad-t(1.25) pad-b(.75)">…fields…</div>
       <hr class="bgd(ink7)">
       …another section…
       <footer class="form-card__actions">…buttons…</footer>
   </form> */
.form-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 36rem;
    padding: 1rem;
    background: var(--ink8);
    border-radius: var(--rad4);
}

.form-card a:not(.btn) {
    color: var(--ink3);
}

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

/* A country picker reads like the inputs beside it: no caret, its text where theirs starts,
   centred in its height as theirs is (Safari sets a select's text low in vertical padding). */
.form-card select.field__input {
    appearance: none;
    -webkit-appearance: none;
    padding-block: 0;
}

.form-card__head {
    padding: .5rem 1rem .75rem .75rem;
    border-radius: var(--rad1);
}

.form-card__head--icon {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.form-card__icon {
    width: 24px;
    height: 24px;
    margin-top: .25rem;
    background-color: var(--ink2);
}

.form-card__heading {
    font-family: var(--fnt-hdg);
    font-size: var(--siz2);
    font-weight: 550;
    color: var(--ink1);
}

/* A line under a heading or in a list (a complaint, a market's problems). */
.form-card__meta {
    margin: 0;
    font-size: var(--siz0);
    color: var(--ink3);
}

/* A word beside a heading or an option (a market's state, "Paused by its admins"). */
.form-card__aside {
    font-size: var(--siz0);
    color: var(--ink2);
}

.form-card__fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.form-card__fieldset > legend {
    margin-bottom: .5rem;
    padding: 0;
}

.form-card__number {
    max-width: 8rem;
}

/* Its foot: the buttons at the bottom left, in line with the fields, as far below them as they are in from the card's
   sides (the card's padding and the body's .75rem), with as much again below. */
.form-card__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 1rem .75rem .75rem;
}

/* A photo slot (New Advert, Profile's Photo): a round, button-high icon button, ringed in ink6 like the photo
   thumbnails; a camera, and a bin once a photo is picked (market.js; a click then clears it). The file input (or,
   for a photo it keeps, the checkbox) fills it, unseen. */
.btn.form-card__photo {
    position: relative;
    display: flex;
    width: var(--btn-hgt);
    height: var(--btn-hgt);
    overflow: hidden;
    border-radius: 50%;
    background: transparent;
    outline: 2px solid var(--ink6);
    outline-offset: -2px;
}

.form-card__photo input[type="file"],
.form-card__photo input[type="checkbox"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.form-card__photo:has(input:focus-visible) {
    outline: 2px solid var(--blu1);
    outline-offset: 2px;
}

/* A photo it keeps is a slot too, the photo filling the circle; a click marks it for removal (faded, a bin over it),
   and a click on the bin takes it out of the form (market.js). A photo just picked fills it the same way, until a
   click clears it. */
.form-card__photo--kept img,
.form-card__photo--picked img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.form-card__photo--kept .icon,
.form-card__photo--picked .icon {
    position: relative;
    display: none;
}

.form-card__photo--kept:has(input:checked) img {
    opacity: .25;
}

.form-card__photo--kept:has(input:checked) .icon {
    display: block;
}

/* ------------------------------------------------------------------------------------------------------------------
   Shared: a person (avatars, the byline on an advert and a conversation)
   ------------------------------------------------------------------------------------------------------------------ */

.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;
    vertical-align: middle;
}

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

/* The byline: the person's photo or monogram (the photo thumbnails' size, outlined like them, in line with the first
   one), and beside it their name and under it "Listed 4h ago on …", each cut short with an ellipsis when it won't
   fit. */
.market-byline {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
}

.market-byline .market-avatar {
    width: var(--btn-hgt);
    height: var(--btn-hgt);
    margin-right: .75rem;
    font-size: var(--siz1);
    outline: 2px solid var(--ink6);
    outline-offset: -2px;
}

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

.market-byline__who {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ylw0);
}

/* The marketplace it's in (the stream merges a person's marketplaces). */
.market-byline .market-byline__where {
    display: block;
    align-self: stretch;
    overflow: hidden;
    font-size: var(--siz0);
    font-weight: 400;
    color: var(--ink3);
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------------------------------------------------------------------
   Shared: the photo viewer (an advert's thumbnail, tapped)
   ------------------------------------------------------------------------------------------------------------------ */

/* 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;
    }
}

/* ------------------------------------------------------------------------------------------------------------------
   Shared: the nav and the signed-out pages
   ------------------------------------------------------------------------------------------------------------------ */

/* A count on a nav item (unread messages, open complaints): one line, cut short with an ellipsis when it doesn't fit. */
.market-count {
    display: block;
    flex: 0 1 auto;
    min-width: 1.5rem;
    max-width: 3.5rem;
    height: 1.5rem;
    padding: 0 .25rem;
    margin: 1px 0 0 auto;
    overflow: hidden;
    border-radius: .75rem;
    background: var(--red1);
    font-family: var(--fnt-fix);
    font-size: var(--siz0);
    line-height: 1.5rem;
    color: var(--ink0);
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Phones: the menu button's gear in ylw0, hovered and open too. */
.account-nav__toggle .icon--lucide-grip {
    background-color: var(--ylw0);
}

/* Signed out (Log In, Sign Up, Terms, a marketplace's landing, Not found; their cards are public cards). 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);
}

/* Signed out, browser tab (never installed here): Sign Up / Log In stay off; Install gates are the path.
   Installed app (standalone) or installed-from-this-browser: auth entry points show; Install gates go
   (pwa.js reinforces). html.pwa-installed covers navigator.standalone where display-mode media is missing.
   html.pwa-installed-here unlocks auth after install while the tab is still display-mode: browser. */
@media not all and (display-mode: standalone) {
    html:not(.pwa-installed):not(.pwa-installed-here) [data-pwa-auth] {
        display: none !important;
    }
}

@media (display-mode: standalone) {
    .page-public [data-nav="install"],
    [data-nav="install"],
    [data-pwa-auth-gate] {
        display: none !important;
    }
}

html.pwa-installed [data-nav="install"],
html.pwa-installed [data-pwa-auth-gate],
html.pwa-installed-here [data-nav="install"],
html.pwa-installed-here [data-pwa-auth-gate] {
    display: none !important;
}

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

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

/* ------------------------------------------------------------------------------------------------------------------
   Adverts: the stream, its filter and its prompts
   ------------------------------------------------------------------------------------------------------------------ */

.adverts-feed {
    display: flex;
    flex-direction: column;
    gap: var(--shell-pad);
}

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

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

.market-main > .market-note:has(+ .adverts-list) {
    max-width: 36rem;
    margin-inline: auto;
}

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

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

/* The prompts (Install, then Enable notifications): hidden until market.js picks one (the wrapper is a grid). The
   one it picks opens smoothly rather than shoving the adverts down: it grows from nothing to its height (taking the
   column's 1rem gap with it) over .35s as its card settles into place, fading in over the first .125s, and folds away
   the same way. */
.adverts-prompt[hidden] {
    display: none;
}

.adverts-prompt {
    display: grid;
    max-width: 36rem;
    grid-template-rows: 0fr;
    margin-bottom: -1rem; /* while it's closed, cancels the gap after it */
    opacity: 0;
    transition: grid-template-rows .35s ease, margin-bottom .35s ease, opacity .125s ease;
}

.adverts-prompt > .form-card {
    min-height: 0;
    padding-block: 0; /* its padding grows with it, so a closed prompt takes no room at all */
    overflow: hidden;
    transform: translateY(-.5rem);
    transition: padding .35s ease, transform .35s ease;
}

.adverts-prompt.is-open {
    grid-template-rows: 1fr;
    margin-bottom: 0;
    opacity: 1;
}

.adverts-prompt.is-open > .form-card {
    padding-block: .5rem;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .adverts-prompt,
    .adverts-prompt > .form-card {
        transition: none;
    }
}

/* ------------------------------------------------------------------------------------------------------------------
   Messages: a card per person, and the chat
   ------------------------------------------------------------------------------------------------------------------ */

.market-main > .market-note:has(+ .messages-list) {
    max-width: 36rem;
    margin-inline: auto;
}

/* A card per person, of its own (not an advert card, though it looks like one): a tile's surface, its head the
   advert card's (their photo, name, and when and where you last messaged), with as much card below the photo as the
   head has above it; tapping it opens the chat. Hovered, the card is a plain ink7; with a new message, the head is a
   plain blu1 until it's opened. */
.messages-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 60rem;
    padding: 1rem 1rem calc(.5rem + .75rem);
    background: var(--ink8);
    border-radius: var(--rad4);
    color: inherit;
    text-decoration: none;
}

.messages-card__head {
    padding: .75rem 1rem .75rem .75rem;
    border-radius: var(--rad1);
}

@media (hover: hover) {
    .messages-card:hover {
        background: var(--ink7);
    }
}

.messages-card--new .messages-card__head {
    background: var(--blu1);
}

.messages-card--new .market-byline__who,
.messages-card--new .market-byline .market-byline__where {
    color: var(--ink0);
}

/* The 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.
   Their messages on the left, yours on the right. */
.messages-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;
}

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

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

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

.messages-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;
}

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

/* As wide as an advert card: the list's full width, or one of its two columns from 1100px. */
@media screen and (min-width: 1100px) {
    .messages-modal__box {
        max-width: calc((60rem - 1rem) / 2);
    }
}

/* Phones: the chat fills the screen, or what the keyboard leaves of it (market.js sets --mk-view-*). */
@media screen and (max-width: 767px) {
    .messages-modal {
        top: var(--mk-view-top, 0);
        bottom: auto;
        height: var(--mk-view-height, 100%);
        padding: 0;
    }

    /* Clear of the notch and the home bar (the page runs under them: viewport-fit=cover). */
    .messages-modal__box {
        max-width: none;
        height: 100%;
        padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
        border-radius: 0;
    }

    /* 16px: smaller, and iPhones zoom in on it when it's tapped, pushing the box and Send off the screen. */
    .messages-reply__box {
        font-size: 16px;
    }
}

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

/* The messages scroll; 1rem inside at each side keeps the bubbles clear of the scrollbar. */
.messages-thread {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
}

.messages-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(--ink7);
}

.messages-bubble--mine {
    align-self: flex-end;
    border-radius: var(--rad4) var(--rad4) var(--rad1) var(--rad4);
}

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

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

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

.messages-reply__box {
    width: 100%;
    box-sizing: border-box;
}

/* ------------------------------------------------------------------------------------------------------------------
   Profile
   ------------------------------------------------------------------------------------------------------------------ */

/* The Photo card's one slot twice a button's height and width. */
.profile-photo .btn.form-card__photo {
    width: calc(var(--btn-hgt) * 2);
    height: calc(var(--btn-hgt) * 2);
}

/* A field's label in the card's text size (--siz1, like New Advert's options), .5rem above its input. */
.profile-fields .fieldset,
.cellphone-fields .fieldset {
    gap: .5rem;
}

.profile-fields .field__label,
.cellphone-fields .field__label {
    font-size: var(--siz1);
}

/* ------------------------------------------------------------------------------------------------------------------
   Complaints
   ------------------------------------------------------------------------------------------------------------------ */

.complaints-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.complaints-item {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.complaints-item__advert {
    color: var(--ink1);
}

/* ------------------------------------------------------------------------------------------------------------------
   Marketplaces (the superuser's): a file that isn't used until fixed
   ------------------------------------------------------------------------------------------------------------------ */

.marketplaces-problems {
    color: var(--red1);
}

/* ------------------------------------------------------------------------------------------------------------------
   Terms: plain text under its heading, not a card
   ------------------------------------------------------------------------------------------------------------------ */

.terms-heading {
    font-family: var(--fnt-hdg);
    font-size: var(--siz2);
    font-weight: 550;
    color: var(--ink1);
}