body {
    /* background-color:#EEEEEE; */
}
/* .color2bg, .searchrezu_bg1 {background-color:#fff9f3;} */
.grabbacell {border:2px #DDDDDD solid;}

/* .soundon {background:url(/new_pics/speakericon_on_white.png) no-repeat;} */


/* Links come from the palette now (font_a / font_a_hover / font_a_visited in site_info.php:
   #c2185b, hover #8e1145). These hardcoded red/green ones predate that and were already being
   overridden by the themed rule, which is emitted after this file — removing them so the file
   stops claiming something that is not true. */

/*
.bottomlinks, .makersigna {color:#EEEEEE;}
.bottomlinks a, .makersigna a {color:#AAAAAA;}
*/



#main_header div#toggleLeftDiv{
    /* color:#ff93c3; */
    /* color:#000000; */
}
#main_header div#toggleRightDiv{
    /* color:#ff93c3; */
    /* color:#000000; */
}
#main_header div.toggleActive{
    /* color:#FFFFFF !important; */
    /* background-color:#ff93c3 !important; */
}



/* ============================================================================
   Two action colours — the "too much pink" correction.

   Pink was doing three jobs at once: "this is a link", "this is selected", and "this is
   the action to take". When one colour carries three, it carries none — the chat button
   had no more weight than a city name in a profile line. Coral (the primary CTA, set in
   site_info.php) is now the one key action per screen; pink narrows to selection, badges
   and the nav rule; and everything below stops being a link-in-pink and becomes ink,
   with the underline and the hover carrying clickability instead.

   Colours are named, never hardcoded: --ink / --faint / --sel / --deep / --accent are
   emitted per instance from that instance's own palette (site_info.php).
   ============================================================================ */

/* ---- sidebar: a list of PLACES, not a column of calls to action ---- */
.subparamtitle {
    color: var(--faint);
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.paramlist a {
    color: var(--ink);
    border-radius: 6px;
}
/* the icon is a landmark, not the point of the row */
.paramlist a i,
.paramlist a .myfa,
.paramlist a svg {
    color: var(--faint);
}
/* hover is what says "clickable" now that colour no longer does */
.paramlist a:hover {
    background-color: var(--sel);
    color: var(--deep);
}
.paramlist a:hover i,
.paramlist a:hover .myfa,
.paramlist a:hover svg {
    color: var(--accent);
}

/* ---- result cards: a name is a name, not a call to action ---- */
.search_user_name_and_badge a {
    color: var(--ink);
    text-decoration: none;
}
.search_user_name_and_badge a:hover {
    text-decoration: underline;
}
/* location line: places are ink, the underline appears on hover */
.search_result_location_line a,
.candidate_country a,
.candidate_city a {
    color: var(--ink);
    text-decoration: none;
}
.search_result_location_line a:hover,
.candidate_country a:hover,
.candidate_city a:hover {
    text-decoration: underline;
}
/* distance, wants and other metadata recede */
.km_away,
.search_user_wants {
    color: var(--muted);
}


/* ---- funnel card 3 ("I'm interested in:"): photo rings follow the icon ramp ----
   The photos carry the meaning here, so the ramp only touches the ring around each one.
   A border can hold exactly one colour, which is why the mixed-couple tile needs a real
   element behind the photo instead: .m4f-opt__facering takes a conic-gradient and gets a
   genuine half-and-half ring. box-shadow cannot do this — it is one colour per ring.
   Scoped to this file, so every other instance keeps the pale bordered photo it has. */
.m4f-opt__facering {
    width: 62px;
    height: 62px;
    border-radius: 999px;
    padding: 2px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    background: var(--m4f-icon);
}
.m4f-opt--face .m4f-opt__face {
    width: 100%;
    height: 100%;
    border: none;          /* the ring is the wrapper now */
}
/* the one tile that shows two people of different genders: one half each */
.m4f-opt--couple_man_and_woman .m4f-opt__facering {
    background: conic-gradient(from 180deg,
        var(--m4f-icon-masc) 0deg 180deg,
        var(--m4f-icon-fem) 180deg 360deg);
}