/* css/members.css
 *
 * The Member Directory: the filter panel down the left and the wall of members
 * on the right.
 *
 * WHAT IS NOT IN HERE, AND WHY
 *
 * The page's whole layout -- .mk-wrap, .mk-filters, .mk-facet, .mk-list-head,
 * .mk-pager, .mk-empty, the loading dim, the phone breakpoints -- is
 * css/marketplace.css's, used verbatim by includes/memberdir.php rather than
 * copied here under new names.
 *
 * That is deliberate and it is the whole point of the file being this short.
 * The Directory IS the Script Library pointed at people: same panel, same 24 to
 * a page, same pager top and bottom, same grid/rows switch. Two stylesheets
 * describing that layout would be two things to keep in step, and they would
 * not stay in step -- the first time one of them got a padding nudge the pages
 * would start to look like cousins rather than siblings.
 *
 * The card furniture is the dashboard's for the same reason: .dash-card,
 * .dash-grid, .dash-rows and .dash-chip come from css/dashboard.css, so a
 * member card sits on the same wall as a screenplay card and answers to hover
 * the same way.
 *
 * So what IS here is only what a person has that a screenplay does not: a face,
 * a town, a distance, and a set of roles.
 */

/* ---- the wall ----------------------------------------------------------- */

/* Members are narrower than screenplays. A script card carries a poster, a
   logline and a synopsis; this carries a name, a town and a row of chips, and
   at the Library's 360px minimum a directory reads as a lot of white space with
   writing in the corner. Three to a row where the Library gets two. */
.md-wrap .dash-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.md-card {
    gap: 6px;
}

/* ---- the head: face, name, where ---------------------------------------- */

.md-card-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.md-card-headtext {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

/* Bigger than the byline avatar on a Library card, and deliberately so: there
   the face is a footnote to a screenplay, here it is the thing being looked
   for. A directory is scanned by face before it is read by name. */
.md-avatar {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    background: var(--primary-dim);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
}

.md-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* THE FACE SAYS IT ENLARGES.
 *
 * zoom-in is how the site announces a picture that opens in the lightbox --
 * .dash-card .iconDiv img wears it for the card posters, .sc-dropzone
 * .has-image for a character's face. The pointer the card gives everything
 * else says "this does something", which is true of the whole card and so
 * tells you nothing about the face in particular.
 *
 * Only on a card that HAS a picture. renderMemberDirCard() withholds the class
 * from the coloured initial, which opens nothing: a magnifier over it would
 * promise something that does not happen.
 */
.md-avatar-zoom {
    cursor: zoom-in;
}

/* THE ROW PORTRAIT: bigger, and square with rounded corners.

   The same shape the profile page gives the same picture -- 8px corners, cover
   fit -- so a face does not change form between the Directory and the page the
   Directory opens. The circle stays in the grid, where a wall of round faces
   is the point; in a row the portrait is a column of its own with room to be
   looked at, and a circle crops a head to a thumbnail of itself.

   88px is what the right-hand side is already about as tall as: a name band, a
   town and a pair of dates. A portrait taller than the text beside it would
   set the card's height rather than fit inside it.

   Still served from /useravatars/small/, which is 250x250 -- three times what
   is drawn here, so it is sharp on a retina screen without fetching /big/ for
   two dozen faces at once. */
.md-avatar-lg {
    width: 88px;
    height: 88px;
    border-radius: 8px;
    font-size: 32px;
}

/* A long name ellipsises rather than wrapping to a second line and pushing the
   town and the chips down -- cards in a grid row are as tall as the tallest of
   them, so one three-line name costs every card beside it. */
.md-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The town WRAPS rather than being cut off (Ben, 2026-10-03). It was nowrap
   with an ellipsis, but an ellipsis does nothing to the text of a flex box, so
   a long one simply ran off the card's right edge. Two lines of a place name
   is a smaller cost than the end of it missing.

   The pin sits against the first line rather than centred on two, and
   overflow-wrap breaks a single word too long for the card. */
.md-where {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    font-size: 13px;
    color: var(--text-muted);
    min-width: 0;
    overflow-wrap: anywhere;
}

.md-where i {
    font-size: 11px;
    flex: none;
    margin-top: 3px;
}

/* ---- the headline: distance, and what they have in the Library ---------- */

/* The two facts worth a size of their own, on one line under the name.

   Same argument as the coverage score on a Library card: somebody scanning a
   wall of two dozen members for a reason to click is scanning for "how near"
   and "have they written anything", and those should not have to be found among
   the small print. */
.md-headline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 2px;
}

.md-distance,
.md-scripts {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
}

.md-distance i,
.md-scripts i {
    font-size: 13px;
    color: var(--text-soft);
}

/* The screenplay count goes somewhere; the distance does not. */
.md-scripts {
    cursor: pointer;
    transition: color .15s;
}

.md-scripts:hover {
    color: var(--gold-dark, #8a6f21);
}

/* ---- roles and biography ------------------------------------------------ */

/* WHAT THEY DO, AS A LINE OF TEXT.

   These were .dash-chip pills, the way a genre is drawn on a Library card.
   Two things were wrong with that. A chip carries 8px of horizontal padding,
   so the first role started eight pixels to the right of the About Me directly
   under it and the column had two left edges for no reason. And a pill makes a
   role look like a genre tag -- a label attached to a work -- when a role is
   something a person IS, and reads as what it is in the bold line a business
   card would give it.

   No line-height of its own. Matching .md-about's 1.5 was the idea -- one
   rhythm down the column -- but almost every list here is a single line, and
   all that setting did was pad above and below it. */
.md-jobs {
    margin-top: 2px;
    font-size: 13px;
}

/* Dark and bold: this is the first thing worth reading on the card after the
   name, and the About Me under it is deliberately softer. Still clickable --
   it ticks its own box in the filter panel -- so it takes the pointer and
   answers on hover, which is all a piece of running text can do to say so. */
.md-job {
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    transition: color .15s;
}

.md-job:hover {
    color: var(--primary);
}

/* The bullet is not part of either role it separates: its own span, not bold,
   not clickable, and muted so the eye reads the words and skips the dots.
   renderMemberDirCard() says why it is a span rather than a pseudo-element. */
.md-job-sep {
    margin: 0 7px;
    color: var(--text-muted);
    font-weight: 400;
    cursor: default;
}

/* Four lines of an About Me and no more. Some of them are eighteen hundred
   characters, and a card four times the height of its neighbours breaks the
   row it is in rather than telling anybody more than the opening does.

   Four rather than the two this started at: two lines cut most biographies
   mid-sentence, before the writer had said what they actually work on. Four
   is about the length people write when they are introducing themselves, so
   most cards now show the whole thing and the clamp only catches the essays. */
.md-about {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-soft);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- the foot: joined, last seen ---------------------------------------- */

/* margin-top:auto pins these to the bottom edge whatever is above them, so the
   dates line up across a row of cards of different heights instead of floating
   at the end of however much biography each one had. */
.md-card-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.md-fact {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.md-fact i {
    font-size: 11px;
}

/* What the member has hung on their profile -- memberDirMediaIcons() in
   includes/memberdir.php -- on a line of its own.

   In a tile it sits above the foot and takes over the foot's job of being
   pinned to the bottom edge: margin-top:auto here, and the foot that follows
   comes in close under it rather than being pushed down a second time. So a
   wall of tiles of different heights still lines its dates up, and the icons
   line up with them.

   In a row it is the last thing in the side column, under the dates. */
.md-card-media {
    margin-top: auto;
    padding-top: 6px;
}

.md-card-media + .md-card-foot {
    margin-top: 2px;
}

.dash-card-wide.md-card .md-card-media {
    margin-top: 4px;
    padding-top: 0;
}

/* The script card's .attachIcons, with two things undone:

   margin: 0, because .attachIcons centres itself with margin:auto for a table
   cell, and here everything else on the card starts at the left edge.

   14px rather than the 16 a script card uses, so the counts read with the
   12px dates just under them rather than louder than them. */
.md-card-media .md-media {
    margin: 0;
    font-size: 14px;
}

/* The pictures open the gallery, so they say so. The other three are counts. */
.md-media [data-member-images-id] {
    cursor: pointer;
}

.md-media [data-member-images-id]:hover,
.md-media [data-member-images-id]:focus-visible {
    color: var(--primary);
}

/* ---- the row shape ------------------------------------------------------ */

/* THE FACE, THEN A NAME OVER COLUMNS.

   The card is a row of exactly two things: the portrait, and everything else.
   .dash-card-wide already gives it flex-direction:row and a 16px gap, which is
   what is wanted here, so the shape below is all inside .md-card-right --
   a column holding the heading band and the two data columns.

   min-width:0 on the right side is not optional: without it a long unbroken
   word in an About Me would stretch the card past the wall it sits on. */
.dash-card-wide.md-card .md-card-right {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
}

/* The heading band: the name on the left, the actions corner on the right.
   min-width:0 on the name is what makes a long one ellipsis rather than shove
   the corner off the card. */
.dash-card-wide.md-card .md-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.dash-card-wide.md-card .md-card-top .md-name {
    flex: 1 1 auto;
    min-width: 0;
}

/* THE ACTIONS CORNER -- top right, filling leftward and then down.

   One envelope today. It is a container rather than a bare icon because the
   things a reader can DO about a member (follow, block, invite) all want to be
   found in the same place, and the second one should be an entry in this row
   rather than a fresh argument about where it goes. wrap means a fourth or
   fifth icon starts a second line under the first instead of eating the name.

   The staff badge is absolutely positioned in this same corner, so a card
   carrying one gives the row 22px of clearance. :has() rather than a class on
   the card because the badge is already the condition. */
.dash-card-wide.md-card .md-card-actions {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    max-width: 40%;
}

.dash-card-wide.md-card:has(.md-badge-hidden) .md-card-actions {
    margin-right: 22px;
}

/* THE TWO DATA COLUMNS, AND THE LEFT ONE IS THE SAME WIDTH ON EVERY CARD.

   Where they are and since when on the left, what they do and say on the
   right. The left column is fixed rather than sized to its contents, which is
   the whole point: a column sized to fit would start the biography at a
   different place on every row, and a wall of rows is read by running an eye
   straight down it.

   200px rather than the 260 this started at, because the face no longer sits
   in it -- the widest thing left is a town, a region and a country.

   Top-aligned, not centred. The roles have to sit level with the town;
   centring made them drift down as the biography grew, so the same fact
   appeared at a different height on every row. */
.dash-card-wide.md-card .md-card-main {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.dash-card-wide.md-card .md-card-side {
    display: flex;
    flex-direction: column;
    flex: 0 0 200px;
    min-width: 0;
}

/* margin-top overrides the auto that pins the foot to the bottom in the grid:
   here there is no bottom to pin to -- the column is as tall as its contents
   and the dates belong under the facts, not floated away from them. */
.dash-card-wide.md-card .md-card-foot {
    margin-top: 6px;
    padding-top: 0;
}

/* ONE column for what the person does and what they say, not two.

   The chips used to be a flex child in their own right, which put them in a
   column between the name and the biography -- and since a column is only as
   wide as the widest chip set in the row, the About Me started at a different
   place on every card and lost however much the roles took. Now .md-card-body
   is the whole right column and the chips sit above the biography inside it,
   both starting at the same x on every row.

   min-width:0 is what lets that column be squeezed: a flex item will not
   shrink below its content otherwise, and a long unbroken word in an About Me
   would stretch the card past the wall. */
.dash-card-wide.md-card .md-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.dash-card-wide.md-card .md-jobs {
    margin-top: 0;
}

.dash-card-wide.md-card .md-about {
    margin: 4px 0 0;
}

/* A body with no roles in it needs no gap above its first line. */
.dash-card-wide.md-card .md-about:first-child {
    margin-top: 0;
}

/* ---- the staff mark ----------------------------------------------------- */

/* Only staff ever see this: a member who has hidden themselves is not in
   anybody else's results at all, so there is nothing for anybody else to mark.
   Grey rather than the badge colours the Library uses, because it reports a
   state rather than warning about one. */
.md-badge-hidden {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 13px;
    color: var(--text-muted);
    opacity: .8;
}

/* ---- the panel's one addition ------------------------------------------- */

/* The Near box sits under the sort list rather than up with the name box,
   because it is not a filter -- it does not remove anybody from the wall. It is
   the argument to one of the sorts above it, and it belongs where that sort can
   be seen. */
.md-near {
    margin-top: 8px;
}

/* Belt and braces over the UA's own [hidden] rule, which any later display
   declaration on this class would quietly beat. */
.md-near[hidden] {
    display: none;
}

.md-near-note {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
}

.md-near-note i {
    margin-right: 4px;
}

.md-near-note a {
    color: var(--primary);
    text-decoration: underline;
    cursor: pointer;
}

/* The section titles in the Role list -- Writing, Industry and so on. Not
   uppercased: the "Role" label above them already is, and these sit under it. */
.md-facet-group {
    margin: 8px 0 2px;
    padding: 0 6px 2px;
    border-bottom: 1px solid var(--border);
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-soft);
}

.md-facet-group:first-child {
    margin-top: 0;
}

/* ---- the member's own switch, on their profile -------------------------- */

/* The switch itself is .mk-switch from css/marketplace.css -- the same control
   as "List this screenplay in the Script Library", because it is the same kind
   of decision. This is only the room around it. */
.md-visibility {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

/* ---- turning a sideways portrait the right way up ----------------------- */

/* Two small square buttons, centred under the picture.

   They were stretched across the column to begin with, on the idea that the
   two arrows should be equally easy to hit. That was wrong twice over: half
   the width of a portrait is an enormous target for an icon, and .btn aligns
   its content left, so each arrow sat in the far corner of its own slab with
   a gap down the middle. Sized to what they hold and grouped in the middle,
   they read as a pair of controls belonging to the image above them.

   Quiet on purpose -- .btn-outline, no colour. Most members will never need
   this and it sits on every profile they own; solid buttons under a photograph
   would read as something they were supposed to do.

   classes/getProfileCard.php draws it only for the member themselves or for
   Staff, and only when there is a picture at all. */
.profile-avatar-rotate {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

/* inline-flex with both axes centred, because .btn's own text-align does
   nothing for a button whose only child is an <i>. */
.profile-avatar-rotate .btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    line-height: 1;
}

/* The member's own card carries the pair even with no picture yet, hidden,
   so an upload from the icons above can reveal it without a redraw. The
   display:flex above would otherwise beat the hidden attribute. */
.profile-avatar-rotate[hidden] {
    display: none;
}

/* ---- changing your own picture from the card ---------------------------- */

/* The upload and bin circles are the script poster's own .sd-poster-btn --
   position, hover reveal, the touch-screen fallback and the hidden bin over
   no picture are all in css/dashboard.css under CHANGING THE POSTER FROM THE
   CARD. Only what differs is here: the portrait is an <img> without the
   poster's class, so the dimming while the server works has to name it. */
.profile-avatar-wrap.is-busy img {
    opacity: .45;
}

/* ---- About Me, edited in place ------------------------------------------ */

/* The textarea and its buttons take the paragraph's place, so they sit where
   it sat: the same gold rule down the left, the same indent. Save and Cancel
   right-aligned under the text the way a dialog's are, with the keyboard
   shortcut beside them for anybody who would rather not reach for the mouse. */
.profile-about-editor {
    margin-top: 4px;
    border-left: 2px solid var(--gold-light);
    padding-left: 14px;
}

/* The paragraph's own size and leading, so text does not jump as the editor
   opens. Both halves of .grow-wrap, or the mirror measures one size and the
   textarea draws another -- see the note in css/modal.css. */
.profile-about-editor .grow-wrap > textarea,
.profile-about-editor .grow-wrap::after {
    font-size: 16px;
    line-height: 1.25;
    padding: 8px 12px;
}

.profile-about-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.profile-about-hint {
    margin-right: auto;
    font-size: 13px;
    color: var(--text-muted);
}

/* ---- narrow ------------------------------------------------------------- */

@media (max-width: 700px) {

    /* One card across. Below this the three-column grid gives cards too narrow
       for a name and a town to sit side by side with a face. */
    .md-wrap .dash-grid {
        grid-template-columns: 1fr;
    }

    /* A row card on a phone is a stacked card. Two columns depend on there
       being somewhere for the biography to go, and at 360px there is not.
       The name band stays where it is -- a heading works at any width. */
    .dash-card-wide.md-card .md-card-main {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    /* The left column gives up its fixed width and becomes the top of the
       stack. 200px on a 360px phone would leave the biography a gutter. */
    .dash-card-wide.md-card .md-card-side {
        flex: none;
    }

    /* The portrait comes down with everything else. At 88px it was a column
       worth having beside three columns; beside one it is most of the width.
       The face stays square here -- it is the same picture, and changing its
       shape at a breakpoint would be a stranger thing to see than a smaller
       one. */
    .dash-card-wide.md-card .md-avatar-lg {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }
}


/* ── THE ENVELOPE ON A DIRECTORY CARD ──────────────────────────────────────
 *
 * Drawn only for somebody the reader can actually write to -- see
 * messageCanMessageBulk(), asked once for the whole page.
 *
 * In .md-card-foot beside Joined and Last logged in, because one icon does not
 * earn a band of its own across the card. margin-left:auto is what keeps it
 * from reading as a third date: the two facts stay left, the action goes to the
 * far edge.
 *
 * Bigger than the 12px facts it sits with. It is the only thing on the card
 * that DOES something, and at the foot's font size it would look like another
 * label rather than a control.
 */
/* THE RESTING COLOUR, AND WHY IT IS NOT var(--bg-muted).
 *
 * That token does not exist. It is not defined in css/global.css or anywhere
 * else, so `var(--bg-muted, #f0f1f4)` has always been the literal #f0f1f4 --
 * which against a white card is barely a colour at all, and is the reason this
 * envelope was easy to miss until somebody knew to look for it.
 *
 * DEFINING --bg-muted WOULD HAVE BEEN THE WRONG FIX. Eleven rules across
 * members.css, messages.css and classes/notificationsRender.php name it, each
 * with a different fallback doing the actual work -- #f0f1f4, #f7f8fa and, on
 * the notifications banner, an amber #fff6e5. Giving the token a value would
 * change all eleven at once and turn that amber banner grey. The phantom is
 * worth cleaning up one rule at a time, naming a real token as each is
 * touched; this is the first.
 *
 * --primary-dim (#dcddee) is a defined tint of --primary, so the resting state
 * and the hover are the same colour at two strengths rather than two unrelated
 * greys. It is plainly visible on white and nowhere near #6576ff, so nothing
 * about it suggests the pointer is already on it.
 *
 * THE BORDER IS NOT DECORATION. On the script summary card this sits directly
 * beside the author's avatar, which is a circle of exactly this colour -- see
 * classes/getScriptCard.php. Without the outline they read as a matching pair
 * of ornaments; with it, one is a picture and the other is a button.
 */
.md-message {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: auto;
    border: 1px solid #bfc2e0;
    border-radius: 50%;
    background: var(--primary-dim);
    color: var(--primary, #016ea9);
    font-size: 14px;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

.md-message:hover {
    border-color: var(--primary, #016ea9);
    background: var(--primary, #016ea9);
    color: #fff;
}

/* THE SAME ENVELOPE ON THE SCRIPT SUMMARY CARD, beside "Posted by".
 *
 * classes/getScriptCard.php draws it, gated by the same canMessage() as the
 * one on a Directory card. The rule lives here rather than in dashboard.css so
 * that anybody changing .md-message can see everything that wears it --
 * css/members.css is loaded on every dashboard page, this card included.
 *
 * BIGGER THAN THE DIRECTORY'S, not smaller. It was 26px first, on the
 * reasoning that it sits beside a line of text rather than in a row of its
 * own. Wrong: on a Directory card the envelope is in a foot of its own where
 * there is nothing to lose it among, and here it is one item in a line under a
 * card full of controls, where a small circle reads as part of the page rather
 * than as something to press. 34px with a 20px envelope, which is a little
 * larger than the 32px avatar next to it -- deliberately, because the avatar
 * is a picture and this is a button.
 *
 * The base margin-left:auto comes off: it pushes the envelope to the far edge
 * of its flex parent, which is right in a card foot and wrong when it belongs
 * directly after a name.
 */
.sd-message {
    width: 34px;
    height: 34px;
    margin-left: 4px;
    font-size: 20px;
}

/* In the rows view it is not in the foot at all -- it is the first thing in
   the actions corner, which does its own right-alignment. A margin-left:auto
   there would push it away from whatever action is added beside it. */
.md-card-actions .md-message {
    margin-left: 0;
}