/* Shared private customer visual system.
   Page specific styles keep ownership of layout and feature states. This layer
   owns the storefront palette, typography, controls and common dark surfaces. */

.my-account-page,
.my-reading-page,
.my-message-page,
.follow-up-page {
  color-scheme: dark;
  --ink: #fff4e3;
  --muted: #bfb09b;
  --panel: rgba(20, 15, 10, .76);
  --panel-soft: rgba(255, 244, 227, .035);
  --line: rgba(214, 160, 90, .24);
  --gold: #d8a45f;
  --gold-light: #e9bd72;
  --purple: #533746;
  --danger: #ffad9d;
  --success: #9be0b5;
  --display: Georgia, "Times New Roman", serif;
  color: var(--ink);
  font-family: var(--display);
  text-rendering: optimizeLegibility;
}

.my-account-page main,
.my-reading-page main,
.my-message-page main,
.follow-up-page main {
  border-top: 0;
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.my-account-page main .eyebrow,
.my-reading-page main .eyebrow,
.my-message-page main .eyebrow,
.follow-up-page main .eyebrow {
  margin-bottom: 12px;
  color: #d8a45f;
  font: 800 .76rem/1.3 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.my-account-page main h1,
.my-reading-page main h1,
.my-message-page main h1,
.follow-up-page main h1 {
  color: #fff4e3;
  font-size: clamp(2.5rem, 4.5vw, 4.75rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.06em;
}

.my-account-page main h2,
.my-reading-page main h2,
.my-message-page main h2,
.follow-up-page main h2 {
  color: #fff3df;
  font-weight: 500;
  letter-spacing: -.035em;
}

.my-account-page main :where(p, dd, small),
.my-reading-page main :where(p, dd, small),
.my-message-page main :where(p, dd, small),
.follow-up-page main :where(p, dd, small) {
  text-wrap: pretty;
}

.my-account-page main .button,
.my-reading-page main .button,
.my-message-page main .button,
.follow-up-page main .button {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 18px;
  font: 800 .86rem/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .01em;
  text-decoration: none;
  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    color .2s ease;
}

.my-account-page main .button-primary,
.my-reading-page main .button-primary,
.my-message-page main .button-primary,
.follow-up-page main .button-primary {
  color: #fffaf0;
  background: #875a24;
  box-shadow: 0 9px 24px rgba(105, 72, 90, .18);
}

.my-account-page main .button-primary:hover,
.my-reading-page main .button-primary:hover,
.my-message-page main .button-primary:hover,
.follow-up-page main .button-primary:hover {
  color: #fffaf0;
  background: #533746;
  filter: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(105, 72, 90, .22);
}

.my-account-page main .button-secondary,
.my-reading-page main .button-secondary,
.my-message-page main .button-secondary,
.follow-up-page main .button-secondary {
  color: #ead8bc;
  border-color: rgba(218, 170, 94, .34);
  background: linear-gradient(135deg, rgba(133, 78, 31, .14), rgba(78, 38, 84, .10));
  box-shadow: inset 0 0 0 1px rgba(255, 239, 210, .015);
}

.my-account-page main .button-secondary:hover,
.my-reading-page main .button-secondary:hover,
.my-message-page main .button-secondary:hover,
.follow-up-page main .button-secondary:hover {
  color: #f6dfb8;
  border-color: rgba(229, 181, 108, .58);
  background: linear-gradient(135deg, rgba(147, 88, 34, .22), rgba(88, 42, 95, .15));
  transform: translateY(-2px);
}

.my-account-page main :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select),
.my-reading-page main :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select),
.my-message-page main :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select),
.follow-up-page main :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  border: 1px solid rgba(214, 160, 90, .20);
  border-radius: 11px;
  color: #fff4e3;
  background: rgba(255, 250, 241, .07);
  font-family: ui-sans-serif, system-ui, sans-serif;
  box-shadow: none;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.my-account-page main :where(input, textarea)::placeholder,
.my-reading-page main :where(input, textarea)::placeholder,
.my-message-page main :where(input, textarea)::placeholder,
.follow-up-page main :where(input, textarea)::placeholder {
  color: rgba(221, 207, 188, .48);
}

.my-account-page main :where(input, textarea, select):focus,
.my-reading-page main :where(input, textarea, select):focus,
.my-message-page main :where(input, textarea, select):focus,
.follow-up-page main :where(input, textarea, select):focus {
  border-color: rgba(224, 176, 103, .70);
  outline: 3px solid rgba(224, 173, 102, .30);
  outline-offset: 2px;
}

.my-account-page main :where(a, button):focus-visible,
.my-reading-page main :where(a, button):focus-visible,
.my-message-page main :where(a, button):focus-visible,
.follow-up-page main :where(a, button):focus-visible {
  outline: 3px solid rgba(224, 173, 102, .92);
  outline-offset: 3px;
}

.my-account-page main :where(.access-card, .order-card, .empty-state, .order-dialog),
.my-reading-page main :where(.reading-heading, .reading-message, .reading-pdf, .reading-follow-up),
.my-message-page main .message-shell,
.follow-up-page main :where(.follow-up-shell, .countdown-card, .submitted-card) {
  border-color: rgba(214, 160, 90, .24);
  background-color: rgba(20, 15, 10, .76);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .22);
}

.my-account-page main :where(.reading-details > div, .detail-grid div),
.my-reading-page main :where(.follow-up-question-block, .follow-up-answer-block),
.my-message-page main :where(.message-reply, .message-reply-form),
.follow-up-page main :where(.reading-summary, .submitted-question) {
  border-color: rgba(214, 160, 90, .16);
  background-color: rgba(255, 244, 227, .035);
}

.my-account-page main :where(.signed-in-copy, .form-help, dt),
.my-reading-page main :where(.reading-order, .reading-meta, .reading-pdf-help, .follow-up-status-copy),
.my-message-page main :where(.message-meta, .message-event-meta, .message-reply-status),
.follow-up-page main :where(.order-reference, .form-meta, .form-status) {
  color: #bfb09b;
}

@media (max-width: 560px) {
  .my-account-page main h1,
  .my-reading-page main h1,
  .my-message-page main h1,
  .follow-up-page main h1 {
    font-size: clamp(2.35rem, 11vw, 3.7rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .my-account-page main .button,
  .my-reading-page main .button,
  .my-message-page main .button,
  .follow-up-page main .button {
    transition: none;
  }
}