/* ---- membership --------------------------------------------------------------
   The plan columns and, above them, what this person already holds.

   Columns rather than a table: three tiers on a phone is a scroll, and a table that
   has to be scrolled sideways to compare prices compares nothing. Free is first and
   styled the same as the rest - it is an option, not a footnote, and the page would
   be telling a lie about the giveaways if it read as one. */
.mem { display: grid; gap: 14px; }

.mem-mine {
    display: grid; gap: 8px;
    padding: 14px;
}
.mem-mine-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mem-mine-name { margin: 0; font-size: 1.05rem; font-weight: 700; }

.mem-mine-terms { margin: 0; font-size: .85rem; color: var(--wx-muted, #6f7a85); }

.mem-plans { display: grid; gap: 12px; }
/* Wide enough that a card sold both ways keeps its two join buttons on one line, and
   the billing sentence under them on one too. */
@media (min-width: 620px) { .mem-plans { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }

.mem-plan {
    display: grid; gap: 6px; align-content: start;
    padding: 16px 16px 20px;
}
.mem-plan.is-mine { border-color: var(--wx-signal, #e5841e); }
/* Name and price on the left; the face in the top-right corner, level with the name.
   A fixed height - the face, a name and a badge word is the tallest it gets - so the
   first benefit sits on the same line across every card, whether or not this one
   wears a badge. */
.mem-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 92px; }
.mem-plan-lead { display: grid; gap: 6px; min-width: 0; }
.mem-plan-name { margin: 0; font-size: 1rem; font-weight: 700; }
.mem-price { margin: 0; display: flex; align-items: baseline; gap: 4px; }
.mem-price-n { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.mem-price-l { font-size: .8rem; color: var(--wx-muted, #6f7a85); }
/* The small print under the buttons, centred under them. */
.mem-plan-tag { margin: 6px 0 0; font-size: .74rem; color: var(--wx-muted, #6f7a85); text-align: center; white-space: nowrap; }
/* One column on a phone, and a card that narrow cannot promise the sentence one line. */
@media (max-width: 619px) { .mem-plan-tag { white-space: normal; } }

.mem-list { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.mem-list li { font-size: .84rem; line-height: 1.4; }
/* The partner's own promises, told apart from the ones the platform delivers. */
.mem-list li.is-perk { font-style: italic; }
/* A link inside a benefit line: the line's own colour, underlined. */
.mem-inline-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* "All the benefits of ..." - the line a higher tier leads with. */
.mem-list li.is-includes { font-weight: 600; }

/* The face in every card's corner, their name under it and the badge's word under
   that: plain on Free, wearing the badge on a tier that has one. Theirs when signed
   in. */
.mem-sample { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; text-align: center; font-size: .78rem; }
.mem-sample-name { font-weight: 600; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The terms, opened in place. */
.mem-terms-doc {
    display: grid; gap: 8px;
    padding: 14px;
}
.mem-terms-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mem-terms-title { margin: 0; font-size: 1rem; font-weight: 700; }
.mem-terms-body { font-size: .84rem; line-height: 1.5; }
.mem-terms-body :first-child { margin-top: 0; }
.mem-terms-body :last-child { margin-bottom: 0; }
.mem-terms-body :is(ol, ul) { padding-left: 20px; }

.mem-note { margin: 4px 0 0; font-size: .76rem; color: var(--wx-muted, #6f7a85); }
.mem-note.is-mine { color: var(--wx-signal, #e5841e); }
.mem-note.is-warn { color: var(--wx-warn, #d9534f); }

.mem-btn { justify-self: start; margin-top: 4px; }

/* Auto Renew, top right of their own membership. Placement only - the switch is
   ui.css's .wx-switch. */
.mem-renew { margin: 0 0 0 auto; white-space: nowrap; }

/* The same switch on a line of its own, under their benefits: their name in the credits. */
.mem-renew.is-row { margin: 14px 0 0; }

/* The month button and the year button, on one line where they fit - each says its own
   price, so neither reads as a footnote to the other. Where they do not (a 360px phone,
   a long price or a partner's long plan name), the row wraps and each button's words
   wrap inside it: nowrap on both made the card wider than the screen. The basis keeps
   the pair side by side until each would be narrower than its words comfortably fit. */
.mem-join { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mem-join .mem-btn { margin-top: 0; padding-inline: 8px; flex: 1 1 9rem; min-width: 0; text-align: center; overflow-wrap: break-word; }

/* What a join agrees to, once, under the cards. */
.mem-terms { margin-top: 0; line-height: 1.45; }


/* The plan they are on, billed the way they are billed: a label in a button's place,
   so the row lines up with every other card's, and nothing to press. */
.mem-btn.is-current { border-style: dashed; opacity: .7; }

/* The sheet before a change: in the card it is about, boxed off from the benefits
   above it, the button that does it last. */
.mem-confirm {
    margin-top: 14px; padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--wx-signal, #e5841e);
    display: flex; flex-direction: column; gap: 6px;
}
.mem-confirm-what { margin: 0; font-size: .9rem; }
.mem-confirm .mem-join { margin-top: 8px; }

/* Their own benefits, two columns on the website's wider page - a line never split
   across the two. Still one column on a narrow screen. */
@media (min-width: 640px) {
    .mem-mine.is-wide .mem-mine-benefits { column-count: 2; column-gap: 28px; display: block; }
    .mem-mine.is-wide .mem-mine-benefits li { break-inside: avoid; margin-bottom: 4px; }
}