/* Elizabet M — the customer account, composed.
 *
 * It was nine cards in one column, every one the same size, the same border, the same weight. The
 * next visit — the single thing a customer opens this page to check — looked exactly like "Report a
 * problem". A page where nothing is more important than anything else reads as a list, not as
 * something made for you.
 *
 * Three rules do the work here, and they are the whole of what "expensive" means in an interface:
 *
 *   1. ONE loud thing. The next visit is a dark panel with the date set large. Everything else is
 *      quiet. Contrast is only available if most of the page declines to use it.
 *   2. LEFT is their cleaning, RIGHT is what we are offering them — the owner's own blueprint,
 *      written twice, for home and for business. Money on the right, admin on the left.
 *   3. Hairlines and space instead of boxes. Nine bordered cards fight each other; rules and margin
 *      do the same job of separating without shouting. Space is the most expensive material there
 *      is and it costs nothing to ship.
 */

/* ── the header row: who they are, and what kind of account this is ───────────────────────────── */
.acc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin: 0 0 22px }
.acc-who h2 { margin: 0; font-size: clamp(26px, 5.2vw, 36px); letter-spacing: -.015em }
/* The badge names the relationship — Member, One-time, Airbnb host, Business. Small caps, hairline,
   no fill: a coloured pill would compete with the one accent this page is allowed. */
.acc-badge { display: inline-flex; align-items: center; gap: 7px; margin: 9px 0 0; padding: 5px 11px 5px 9px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font: 700 11.5px/1 var(--body); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft) }
.acc-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grad) }
.acc-badge.is-plain::before { background: var(--line) }

/* ── the one loud thing ───────────────────────────────────────────────────────────────────────── */
.acc-hero { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--ink); color: #fff;
  padding: clamp(22px, 5vw, 34px); box-shadow: var(--sh) }
.acc-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--grad) }
.acc-hero .eyebrow { display: block; margin: 0 0 12px; font: 700 11.5px/1 var(--body);
  letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.62) }
.acc-hero .when { margin: 0; font: 800 clamp(24px, 5.4vw, 34px)/1.15 var(--display); letter-spacing: -.02em }
/* Time sits after the date with a middot between them. On a narrow phone the date fills the line and
   the time drops below it — so the separator is CSS, not text, and simply stops existing there
   instead of dangling at the end of "Thursday 6 August 2026 ·". */
.acc-hero .when .at { opacity: .62; white-space: nowrap }
.acc-hero .when .at::before { content: " · " }
@media (max-width: 560px) {
  .acc-hero .when .at { display: block }
  .acc-hero .when .at::before { content: none }
}
.acc-hero .what { margin: 8px 0 0; color: rgba(255,255,255,.72); font-size: 14.5px }
.acc-hero .none { margin: 0; color: rgba(255,255,255,.72) }
.acc-hero .acts { display: flex; flex-wrap: wrap; gap: 9px; margin: 20px 0 0 }
/* Ghost buttons: on a dark panel a filled button would be the third loud thing on a page that is
   allowed one. */
.acc-hero .acts button, .acc-hero .acts a { font: 700 14px/1 var(--body); padding: 11px 16px; border-radius: 11px;
  border: 1.5px solid rgba(255,255,255,.28); background: transparent; color: #fff; cursor: pointer }
.acc-hero .acts button:hover, .acc-hero .acts a:hover { background: rgba(255,255,255,.10) }
.acc-hero .acts .is-key { background: #fff; color: var(--ink); border-color: #fff }

/* ── left is their cleaning, right is what we are offering ────────────────────────────────────── */
.acc-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 26px; margin: 26px 0 0; align-items: start }
@media (max-width: 900px) { .acc-grid { grid-template-columns: 1fr; gap: 18px } }
.acc-side { position: sticky; top: 86px }
@media (max-width: 900px) { .acc-side { position: static } }

/* ── the quiet majority ───────────────────────────────────────────────────────────────────────── */
/* Cards inside the columns lose their heavy frame: a hairline and space separate them just as well,
   and the page stops looking like a stack of receipts. */
/* Every one of them gets the rule, including the first: which card is first here depends on who is
   signed in — a member opens with the membership controls, a one-time customer with their bookings,
   and half of these are display:none — so a rule that exempts ":first-child" exempts a card that is
   not visible and leaves the real top card looking different from one account to the next. */
.acc-grid .mech { max-width: none; margin: 0 0 18px; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; box-shadow: none; background: transparent; padding: 20px 0 0 }
.acc-grid .mech > h3 { font-size: 15px; letter-spacing: .005em; margin: 0 0 10px }
.acc-grid .mech > .mech-sub { font-size: 14px }

/* The right-hand column is the offer, so it keeps a surface — it should feel like a card you can
   act on, against a left side that is a document you read. */
.acc-side .mech { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 20px; margin: 0 0 14px }

/* Money, set like money. A total in 14px looks like admin; the same figure large reads as a
   statement, and that is most of the difference between a cheap page and an expensive one. */
.acc-figure { font: 800 clamp(26px, 5vw, 34px)/1 var(--display); letter-spacing: -.02em; color: var(--ink) }

/* Status: only the thing that needs action is allowed colour. "Paid" is not news. */
.acc-grid .paid, .acc-side .paid { color: var(--muted); font-weight: 700; font-size: 12px;
  letter-spacing: .05em; text-transform: uppercase }

@media (prefers-reduced-motion: no-preference) {
  .acc-hero, .acc-grid > * { animation: acc-rise .5s cubic-bezier(.22,.61,.36,1) both }
  .acc-grid > :nth-child(2) { animation-delay: .06s }
  @keyframes acc-rise { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
}

/* The signed-out card should not stretch to the width the dashboard needs — a lone email field
   across 1120px reads as a form nobody proof-read. */
.acc-wrap #acc-signin { max-width: 520px }