/* Sign-in (/login/, 1.9.0), sign-up (/register/, 1.10.0) and My account (/account/…, 1.11.0) pages. Built from the reference's page, panel, field, alert, table, badge and button styles. */

.page.narrow.login-page { max-width: 520px; padding-bottom: 72px; }
.login-intro { margin: 6px 0 22px; font-size: 14px; color: var(--ink2); }
.panel.login-form, .panel.login-done { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.login-who { margin: 0; font-size: 15px; color: var(--ink); }
.login-remember { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink2); cursor: pointer; }
.login-remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.login-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.btn.login-submit, .btn.login-out { height: 48px; }
.login-forgot { font-size: 13.5px; font-weight: 700; }
.login-alt { margin: 18px 0 0; font-size: 14px; color: var(--ink2); }
.login-alt a { font-weight: 700; }
.login-hint { font-size: 12px; color: var(--mute); }
.login-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 640px) {
  .page.narrow.login-page { padding-bottom: 48px; }
  .login-actions { flex-direction: column; align-items: stretch; }
  .login-actions .btn { width: 100%; }
  .login-forgot { align-self: center; padding: 6px 0; }
}

/* My account (1.11.0): profile, order history, order. */
.page.narrow.acct-page { max-width: 1040px; padding-bottom: 72px; }
.acct-page > .eyebrow { margin-bottom: 6px; }
.acct-nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 22px; border-bottom: 1px solid var(--line); }
.acct-nav a { padding: 10px 14px; margin-bottom: -1px; font-size: 13.5px; font-weight: 700; color: var(--ink2); border-bottom: 2px solid transparent; }
.acct-nav a:hover { color: var(--ink); }
.acct-nav a.on { color: var(--ink); border-bottom-color: var(--orange2); }
.acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.panel.acct-card { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.acct-h { font-family: var(--display); font-weight: var(--cc-h-weight, 400); font-size: calc(26px * var(--cc-h-scale, 1)); letter-spacing: 0.02em; line-height: 1; margin: 0 0 4px; text-transform: var(--cc-h-transform, none); }
.acct-card .srow b { text-align: right; overflow-wrap: anywhere; }
.acct-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.acct-actions-center { justify-content: center; }
.acct-hint { margin: 4px 0 0; font-size: 12.5px; color: var(--mute); }
.acct-count { margin: 0; font-size: 14px; color: var(--ink2); }
.acct-latest { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); }
.acct-latest:hover { background: var(--tan); }
.acct-latest-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.acct-latest-meta { font-size: 13px; color: var(--mute); }
.acct-intro { margin: 0 0 12px; font-size: 14px; color: var(--ink2); }
.panel.acct-table-wrap { padding: 6px 12px; overflow-x: auto; }
.table.acct-orders td { vertical-align: middle; }
.table.acct-orders th.r, .table.acct-orders td.r { text-align: right; }
.table.acct-orders tbody tr:last-child td { border-bottom: 0; }
.acct-num { font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.acct-items { list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--ink2); }
.acct-items li + li { margin-top: 2px; }
.acct-view { white-space: nowrap; }
.panel.acct-table-wrap ~ .acct-hint { margin-top: 14px; }
.acct-pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 16px; font-size: 13.5px; color: var(--ink2); }
.panel.acct-empty { padding: 48px 24px; text-align: center; }
.acct-empty-title { font-size: calc(40px * var(--cc-h-scale, 1)); text-transform: var(--cc-h-transform, none); }
.acct-empty p { color: var(--ink2); }
.acct-back { display: inline-block; margin-bottom: 8px; font-size: 13.5px; font-weight: 700; color: var(--ink2); }
.alert.acct-test { margin-bottom: 16px; }
.acct-order-cols { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.acct-order-cols > .panel.od { flex: 1 1 520px; min-width: 0; }
.panel.strong.acct-side { flex: 1 1 280px; padding: 22px; display: flex; flex-direction: column; gap: 9px; }
.acct-addr { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.acct-addr address { font-style: normal; font-size: 14px; line-height: 1.5; margin-top: 6px; color: var(--ink); }
.acct-contact { margin-top: 4px; font-size: 12.5px; color: var(--mute); overflow-wrap: anywhere; }
.btn.acct-side-btn { margin-top: 8px; align-self: flex-start; }
.page.narrow.acct-nf { max-width: 720px; }
/* Tracking (1.12.0): James's checkout step indicator, not clickable. */
.page.narrow.acct-track-page { max-width: 720px; }
.panel.strong.acct-track { padding: 22px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.acct-track .acct-h { margin: 0; }
.steps.acct-steps { margin: 4px 0 6px; }
.acct-steps .step { cursor: default; }
.acct-steps .step-sep { color: var(--line2); margin-left: 4px; }
.acct-tracking-no { overflow-wrap: anywhere; text-align: right; }
.btn.acct-track-btn { align-self: flex-start; margin-top: 6px; }
.acct-nf .acct-actions { margin-top: 12px; }

@media (max-width: 640px) {
  .page.narrow.acct-page { padding-bottom: 48px; }
  .acct-nav a { padding: 10px 10px; }
  .panel.acct-table-wrap { padding: 0; border: 0; background: transparent; overflow: visible; }
  .table.acct-orders thead { display: none; }
  .table.acct-orders, .table.acct-orders tbody, .table.acct-orders tr, .table.acct-orders td { display: block; width: 100%; }
  .table.acct-orders tr { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; margin-bottom: 12px; }
  .table.acct-orders td { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 7px 0; text-align: right; }
  .table.acct-orders td::before { content: attr(data-label); flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); text-align: left; padding-top: 2px; }
  .table.acct-orders td.acct-view { display: block; border-bottom: 0; padding-top: 10px; }
  .table.acct-orders td.acct-view::before { content: none; }
  .table.acct-orders td.acct-view .btn { width: 100%; }
  .table.acct-orders tbody tr:last-child td { border-bottom: 1px solid var(--line); }
  .table.acct-orders tbody tr td.acct-view { border-bottom: 0; }
  .acct-items { text-align: right; }
  .btn.acct-track-btn { align-self: stretch; }
}