/* Account page frame, panel, feedback, and shared links. */
:root {
  --account-measure-narrow: 28rem;
  --account-measure: 60rem;
  --control-height: 40px;
}

.account-page {
  padding-block: var(--space-6) var(--space-7);

  .section-inner { max-width: var(--account-measure); }

  &.is-narrow .section-inner,
  &.is-reset .section-inner { max-width: var(--account-measure-narrow); }

  .page-heading {
    font-size: var(--font-size-7);
    font-weight: 700;
    margin-bottom: var(--space-2);
    text-wrap: balance;
  }

  .text-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-secondary-hover);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);

    &:hover { color: var(--color-black); }
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.account-edit-page {
  .section-inner { max-width: var(--account-measure); }
  &.account-edit-page--compact .section-inner { max-width: 34rem; }
}

.account-panel {
  padding: var(--space-7) var(--space-6);
  border: 1px solid var(--color-gray-4);
  border-radius: var(--radius-3);
  background-color: var(--color-white);
  box-shadow: var(--shadow-1);

}

.account-panel--registration { padding: var(--space-6); }

/* Heading row: title on the left, supporting link right-justified on the same
   baseline. Wraps to stacked rows on narrow screens. */
.account-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);

  .page-heading,
  .account-lede { margin-bottom: var(--space-4); }
}

.account-lede {
  max-width: 65ch;
  margin-bottom: var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--font-size-4);
  line-height: var(--line-height-body);
  text-wrap: pretty;

  .account-page:not(.is-narrow) & {
    margin-bottom: var(--space-4);
    font-size: var(--font-size-3);
  }
}

.account-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.account-inline-form { display: inline; }

/* Shared column-header link for the DON-backed history tables (order
   history, rug configurations) — see SortableTableHelper#sortable_column_header. */
.sortable-column {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: inherit;
  text-decoration: none;

  &:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
  &:hover, &.active { color: var(--color-black); }
  span { font-size: var(--font-size-3); font-weight: 400; line-height: 1; }
}

.account-notice,
.account-alert,
.account-error-summary {
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  border-radius: var(--radius-2);
  color: var(--color-black);
  font-size: var(--font-size-3);
  line-height: var(--line-height-body);
}

.account-notice {
  border: 1px solid var(--color-primary);
  background-color: var(--color-primary-tint);
}

.account-alert {
  border: 1px solid var(--color-secondary);
  background-color: var(--color-secondary-tint);
}

.account-error-summary {
  border: 1px solid var(--color-red);
  background-color: #fdf3f3;

  h2 {
    margin-bottom: var(--space-2);
    color: #a30000;
    font-size: var(--font-size-3);
    font-weight: 700;
  }

  ul { margin: 0; padding-left: var(--space-4); list-style: disc; }
  li { margin-block: var(--space-1); }

  a {
    color: #a30000;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

@media (max-width: 28rem) {
  .account-panel { padding: var(--space-6) var(--space-5); }
}