/* The member's account pages (/user, views/layouts/account.php): pale blue at the top fading to white,
   white through the middle, and a light grey fade just above the graphite footer.
   The first page (views/areas/user.php): the hello, three big picture cards, then the small account cards. */

/* The page fills the screen, so the footer stays at the bottom of short pages. */
body:has(> .account) {
  display: flex;
  flex-direction: column;
}

.account {
  flex: 1;
  background: linear-gradient(
    var(--c-accent),
    var(--c-page) var(--account-band-h),
    var(--c-page) calc(100% - var(--account-fade-h)),
    var(--c-surface)
  );
}

.account__inner {
  padding-block: var(--sp-10) var(--sp-24);
}

/* Up to 991px: the full screen width with the header's 24px edges, so the content lines up with the menu
   (from 992px both use the standard container). */
@media (max-width: 991.98px) {
  .account__inner {
    max-width: none;
    padding-inline: var(--sp-6);
  }
}

.account__inner > * + * {
  margin-top: var(--sp-6);
}

/* Forms on the other account pages keep the sign-in pages' width. */
.account .form {
  max-width: var(--auth-w);
}

/* --- Breadcrumb (every page but the first) --- */
.account__crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.account__crumbs a {
  color: var(--c-accent-text);
  text-decoration: none;
  border-radius: var(--radius-1);
}

.account__crumbs a:hover {
  text-decoration: underline;
}

.account__crumbs li + li::before {
  content: "/";
  margin-right: var(--sp-2);
  color: var(--c-line);
}

/* --- The hello: eyebrow, "Hello, name" and a line, centred --- */
.account__hello {
  padding-block: var(--sp-6) var(--sp-4);
  text-align: center;
}

.account__eyebrow {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-accent-text);
}

.account__title {
  overflow: hidden;
  font-size: var(--fs-h1);
  white-space: nowrap;
  text-overflow: ellipsis; /* a long name stays on one line and stops with "…" */
}

.account__title--wrap {
  white-space: normal; /* the workspace's "Good afternoon, name" is too long for one line on phones */
}

.account__lead {
  margin-top: var(--sp-3);
  font-size: var(--fs-lead);
  color: var(--c-text-muted);
}

/* A long name: on phones the hello shrinks to fill one line instead of stopping with "…". The page passes its length
   in --chars; STIX Two letters average just under half their size in width, so the size is the width / letters x 2.1,
   never above the display size. From 768px there is room for the normal size. */
.account__hello {
  container-type: inline-size; /* lets the title measure the hello's width (cqi) */
}

.account__title--fit {
  font-size: min(var(--fs-display), calc(100cqi / var(--chars) * 2.1));
}

@media (min-width: 768px) {
  .account__title--fit {
    font-size: var(--fs-h1);
  }
}

/* --- For your attention: what waits on the member, above the cards. White fading from off-white; the title is a chip,
   joined to each item's round icon by a thin line. A line per item: the icon, the words and a chevron that nudges right
   on hover. --- */
.account-notes {
  margin-bottom: var(--sp-8);
  padding: var(--sp-5) var(--sp-6) var(--sp-3);
  background-image: linear-gradient(var(--c-panel), var(--c-page));
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-2);
}

.account-notes__title {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-accent-text);
  background-color: var(--c-accent);
  border: var(--border-1) solid var(--c-accent-border);
  border-radius: var(--radius-pill);
}

/* The joining line: each item draws it down its left side, through the middle of its icon. The first reaches up to the
   chip; the last stops at its icon. */
.account-notes__list > li {
  position: relative;
}

.account-notes__list > li::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--sp-8) / 2 - var(--border-1) / 2);
  border-left: var(--border-1) solid var(--c-accent-border);
}

.account-notes__list > li:first-child::before {
  top: calc(-1 * var(--sp-2)); /* up to the chip, across its margin */
}

.account-notes__list > li:last-child::before {
  bottom: 50%;
}

/* Dividers between items start after the icon, so they do not cross the joining line. */
.account-notes__list > li + li {
  background: linear-gradient(var(--c-line), var(--c-line)) right top / calc(100% - var(--sp-8) - var(--sp-3)) var(--border-1) no-repeat;
}

.account-notes__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  color: var(--c-text);
  text-decoration: none;
}

.account-notes__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--sp-8);
  height: var(--sp-8);
  font-size: var(--fs-small);
  color: var(--c-accent-text);
  background-color: var(--c-accent);
  border: var(--border-1) solid var(--c-accent-border);
  border-radius: 50%;
  position: relative; /* over the joining line */
}

.account-notes__icon--todo {
  color: var(--c-warning-text);
  background-color: var(--c-warning-bg);
  border-color: var(--c-warning-border);
}

.account-notes__icon--done {
  color: var(--c-success-text);
  background-color: var(--c-success-bg);
  border-color: var(--c-success-border);
}

.account-notes__done {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
}

.account-notes__text {
  font-size: var(--fs-small);
}

.account-notes__text strong {
  font-weight: 600;
}

.account-notes__text .bi-chevron-right {
  display: inline-block;
  font-size: var(--fs-xs);
  color: var(--c-accent-text);
  transition: translate var(--duration-fast) var(--ease);
}

.account-notes__link:hover .account-notes__text {
  color: var(--c-accent-text);
}

.account-notes__link:hover .bi-chevron-right {
  translate: var(--sp-1) 0;
}

/* --- The three big cards: a picture on top, then eyebrow and title with a round arrow beside them --- */
.account__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}

@media (min-width: 768px) {
  .account__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.account-card {
  container-type: inline-size; /* its status line changes with the card's own width */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background-color: var(--c-panel); /* off-white, so the card stands out from the white page */
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-2);
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}

.account-card:hover {
  border-color: var(--c-accent-border);
  box-shadow: var(--shadow-button);
}

.account-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: var(--account-card-ratio);
  object-fit: cover;
}

.account-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6) var(--sp-5);
}

.account-card__words {
  display: grid;
  min-width: 0; /* a long title wraps instead of pushing the arrow out */
}

.account-card__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-accent-text);
}

/* Title sizes: full size on phones and large screens; smaller where three cards share a narrow row. */
.account-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-heading);
  color: var(--c-heading);
}

@media (min-width: 768px) {
  .account-card__body {
    padding-inline: var(--sp-4);
  }

  .account-card__title {
    font-size: var(--fs-lead);
  }
}

@media (min-width: 992px) {
  .account-card__body {
    padding-inline: var(--sp-6);
  }

  .account-card__title {
    font-size: var(--fs-h4);
  }
}

@media (min-width: 1200px) {
  .account-card__title {
    font-size: var(--fs-h3);
  }
}

.account-card__arrow {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--sp-10);
  height: var(--sp-10);
  color: var(--c-text);
  background-color: var(--c-accent);
  border: var(--border-1) solid var(--c-accent-border);
  border-radius: 50%;
}

/* One line under each card's title: the next consultation, the latest order. In a narrow card the status chip
   (Tomorrow, On its way) sits on its own line above, as plain capitals in line with the card's left edge;
   where the card is wide enough (400px) it is a pill at the end of the line. */
.account-card__body:has(+ .account-card__status) {
  padding-bottom: var(--sp-3);
}

.account-card__status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--sp-10);
  margin: 0 var(--sp-6) var(--sp-5);
  padding-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  border-top: var(--border-1) solid var(--c-line);
}

.account-card__status .bi {
  color: var(--c-accent-text);
}

.account-card__info {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.account-card__info strong {
  font-weight: 500;
  color: var(--c-text);
}

.account-card__status--empty .account-card__info {
  font-style: italic;
}

.account-card__pill {
  grid-row: 1;
  grid-column: 1 / -1;
  justify-self: start;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-accent-text);
}

@container (min-width: 400px) {
  .account-card__status {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .account-card__pill {
    grid-row: auto;
    grid-column: auto;
    padding: var(--sp-1) var(--sp-3);
    background-color: var(--c-accent);
    border-radius: var(--radius-pill);
  }
}

/* --- You and your account: small white cards with an icon, words and a chevron --- */
.account__inner > .account__heading {
  margin-top: var(--sp-12); /* more room above than between the other blocks */
  font-size: var(--fs-h3);
}

.account__tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}

@media (min-width: 992px) {
  .account__tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.account-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  color: inherit;
  text-decoration: none;
  background-color: var(--c-page);
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-2);
  transition: border-color var(--duration-fast) var(--ease);
}

a.account-tile:hover {
  border-color: var(--c-accent-border);
}

.account-tile__icon {
  display: grid;
  place-items: center;
  width: var(--sp-12);
  height: var(--sp-12);
  font-size: var(--fs-lead);
  color: var(--c-text-muted);
  background-color: var(--c-surface);
  border-radius: 50%;
}

.account-tile__words {
  display: grid;
}

.account-tile__title {
  font-weight: 500;
}

.account-tile__text {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  overflow-wrap: anywhere; /* a long email address wraps instead of widening the card */
}

.account-tile .bi-chevron-right {
  color: var(--c-text-muted);
}

/* Sign out is a button in a form, drawn like the other cards. */
button.account-tile {
  width: 100%;
  text-align: left;
}

button.account-tile:hover {
  border-color: var(--c-accent-border);
}

.account__tiles > form {
  display: grid; /* so Sign out stretches to the row's height like the other cards */
}

/* From 992 to 1199px three cards share a narrow row: the line under the title would wrap, so it waits for 1200px. */
@media (min-width: 992px) {
  .account-tile__text {
    display: none;
  }
}

@media (min-width: 1200px) {
  .account-tile__text {
    display: block;
  }
}

/* --- The workspace (/staff): the big cards under Today and Waiting on you --- */
.panels + .account__cards {
  margin-top: var(--sp-12); /* room for the Open calendar button on the panel's edge */
}