/*
 * The customer's account pages, and the admin sign-in that shares their shell.
 *
 * Every colour, space and radius is a token from tokens.css. Nothing here
 * introduces a new value: these pages are the least visited part of the shop
 * and the most likely to be forgotten in a later redesign, so a hardcoded
 * colour here would be the one that still looked like 2026 afterwards.
 *
 * Clerk's own components render inside `.account-shell` and bring their own
 * styling. They are given room rather than overridden — fighting a vendor's
 * widget with `!important` is a maintenance cost that returns on every one of
 * their releases. `--clerk-*` variables below are the supported seam for
 * making them agree with the rest of the page.
 */

.account-shell {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-3xl);
}

.account-shell__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--ink);
  margin: 0 0 var(--space-2xs);
}

.account-shell__lede {
  color: var(--ink-2);
  font-size: var(--text-md);
  margin: 0 0 var(--space-lg);
}

.account-shell__crumb {
  margin: 0 0 var(--space-md);
  font-size: var(--text-sm);
}

.account-shell__crumb a,
.account-shell__back {
  color: var(--accent-deep);
}

/* --- the heading row: who you are, and the way out --------------------- */

.account-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.account-head__email {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--text-sm);
}

/*
 * Wraps Clerk's own `<button>`, which this SDK version renders unstyled and
 * which accepts no class of its own. Styling the wrapper's descendant is the
 * only hook available, and it is stable because the component's whole purpose
 * is to emit one button.
 */
.account-head__signout button {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-md);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.account-head__signout button:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.account-head__signout button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* --- notices ----------------------------------------------------------- */

.account-note {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--paper-2);
  border-left: 3px solid var(--line-strong);
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.account-note--good {
  border-left-color: var(--accent);
  background: var(--paper-3);
  color: var(--ink);
}

.account-note--warn {
  border-left-color: var(--danger);
  background: var(--danger-soft);
  color: var(--ink);
}

.account-section__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--ink);
  margin: var(--space-xl) 0 var(--space-sm);
}

/* --- the order list --------------------------------------------------- */

.order-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}

.order-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  background: var(--paper);
}

.order-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

.order-card__number {
  margin: 0;
  font-size: var(--text-md);
  font-family: var(--font-display);
}

.order-card__number a { color: var(--ink); text-decoration: none; }
.order-card__number a:hover { text-decoration: underline; }

/*
 * The status pill. Four of the six statuses share the neutral treatment and
 * only the two that need the customer to do something are coloured: a page
 * where every badge shouts is a page where none of them is read.
 */
.order-card__status {
  flex: none;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--paper-3);
  color: var(--ink-2);
  white-space: nowrap;
}

.order-card__status--shipped {
  background: var(--accent);
  color: var(--accent-ink);
}

.order-card__status--pending,
.order-card__status--cancelled,
.order-card__status--refunded {
  background: var(--danger-soft);
  color: var(--ink);
}

.order-card__meta {
  margin: var(--space-3xs) 0 0;
  color: var(--ink-3);
  font-size: var(--text-sm);
}

.order-card__flag {
  margin: var(--space-2xs) 0 0;
  color: var(--ink);
  font-size: var(--text-sm);
}

/* --- one order -------------------------------------------------------- */

.order-items {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.order-items__row {
  display: grid;
  /* `minmax(0, 1fr)` so a long name wraps instead of forcing the row wide. */
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-sm);
  align-items: baseline;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--line);
}

.order-items__text {
  color: var(--ink);
  overflow-wrap: anywhere;
  min-width: 0;
}

.order-items__qty,
.order-items__money {
  color: var(--ink-2);
  font-size: var(--text-sm);
  /* Tabular figures so a column of prices lines up on the decimal. */
  font-variant-numeric: tabular-nums;
}

.order-totals {
  margin: var(--space-md) 0 0;
  display: grid;
  gap: var(--space-3xs);
}

.order-totals > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
}

.order-totals dt { color: var(--ink-2); font-size: var(--text-sm); margin: 0; }
.order-totals dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--ink); }

.order-totals__grand {
  border-top: 1px solid var(--line-strong);
  padding-top: var(--space-2xs);
  margin-top: var(--space-2xs);
  font-weight: 600;
}

.order-address {
  font-style: normal;
  color: var(--ink);
  line-height: 1.7;
}

/* --- the forms -------------------------------------------------------- */

.order-action {
  margin: 0 0 var(--space-lg);
}

.order-action__grid {
  display: grid;
  gap: var(--space-sm);
  /* One column on a phone, two where there is room. */
  grid-template-columns: 1fr;
  margin-bottom: var(--space-sm);
}

@media (min-width: 40rem) {
  .order-action__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.order-action__grid label,
.order-action__label {
  display: block;
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.order-action__grid input,
.order-action__textarea,
.claim__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: var(--space-3xs);
  padding: var(--space-2xs) var(--space-xs);
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.order-action__grid input:focus-visible,
.order-action__textarea:focus-visible,
.claim__input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}

.order-action__textarea { resize: vertical; }

.order-action__note {
  margin: var(--space-2xs) 0 0;
  color: var(--ink-3);
  font-size: var(--text-sm);
}

.order-action__submit,
.claim__submit {
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-lg);
  font: inherit;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
  /*
   * 44px minimum, because these are the controls a customer taps on a phone
   * to correct an address before their parcel goes out.
   */
  min-height: 44px;
}

.order-action__submit:hover,
.claim__submit:hover { background: var(--accent-deep); }

.order-action__submit:focus-visible,
.claim__submit:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* Asking to cancel is not the thing we are encouraging. */
.order-action__submit--quiet {
  background: none;
  color: var(--ink-2);
  border-color: var(--line-strong);
}

.order-action__submit--quiet:hover {
  background: var(--paper-3);
  color: var(--ink);
}

/* --- claiming a past order -------------------------------------------- */

.claim {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line);
}

.claim__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2xs);
  color: var(--ink);
}

.claim__lede {
  margin: 0 0 var(--space-sm);
  color: var(--ink-2);
  font-size: var(--text-sm);
  max-width: 48ch;
}

.claim__label {
  display: block;
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.claim__form { max-width: 20rem; }

/* --- Clerk's components ----------------------------------------------- */

/*
 * Clerk reads these at runtime to theme its own widgets, which is the
 * supported way to make them look like they belong to this site. Set from
 * the same tokens as everything above, so a palette change carries through.
 */
.account-shell {
  --clerk-color-primary: var(--accent-deep);
  --clerk-color-background: var(--paper);
  --clerk-color-text: var(--ink);
  --clerk-color-text-secondary: var(--ink-2);
  --clerk-color-input-background: var(--paper);
  --clerk-color-danger: var(--danger);
  --clerk-border-radius: var(--radius-md);
  --clerk-font-family: var(--font-body);
}

/*
 * Clerk's card centres itself in whatever box it is given and ships its own
 * border and shadow. It gets a plain block to sit in rather than a styled
 * one, so the two do not end up with two borders around one form.
 */
.account-shell .cl-rootBox,
.account-shell .cl-card {
  margin-inline: auto;
  max-width: 25rem;
  width: 100%;
}