/* Member account and help desk pages. */
.acct-page .signed-in { font-size: 15px; color: var(--muted); }
.acct-panel { border: 3px solid var(--black); background: var(--white); padding: 24px; box-shadow: 10px 10px 0 var(--blue); margin: 18px 0 24px; }
.acct-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.acct-tier { display: block; font: 800 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-dark); margin-bottom: 8px; }
.acct-no { display: block; font: 400 clamp(48px, 9vw, 72px)/1 var(--display); text-transform: uppercase; }
.acct-status { padding: 8px 10px; font: 800 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; background: var(--blue); color: var(--black); }
.acct-status.off { background: #3a3a3a; color: #fff; }
.acct-facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 22px 0 8px; font-size: 15.5px; }
.acct-facts dt { font: 800 11px/1.9 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.acct-facts dd { margin: 0; font-weight: 600; }
.acct-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.acct-btns .btn:not(.btn-primary):not(.btn-ghost) { background: var(--white); color: var(--black); border-color: var(--black); }
.acct-btns .btn-primary { background: var(--black); color: var(--white); border-color: var(--black); }
.acct-btns .btn:hover { background: var(--blue); color: var(--black); border-color: var(--blue); }
.checkout-banner.warn { background: #fff4d6; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* Help desk */
.chat { padding: 0; }
.chat-log { list-style: none; margin: 0; padding: 20px 20px 4px; max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 85%; padding: 12px 14px; font-size: 15.5px; line-height: 1.5; border: 2px solid var(--black); }
.msg p { margin: 0 0 8px; }
.msg p:last-child { margin: 0; }
.msg.bot { align-self: flex-start; background: #f2f2f2; }
.msg.me { align-self: flex-end; background: var(--black); color: var(--white); border-color: var(--black); }
.msg.wait { color: var(--muted); font-style: italic; }
.msg .btn { background: var(--black); color: var(--white); border-color: var(--black); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 8px 20px 4px; }
.chips button { font: 600 13px/1.2 var(--sans); background: var(--white); border: 2px solid var(--black); padding: 8px 10px; cursor: pointer; }
.chips button:hover { background: var(--blue); }
.chat-form { padding: 14px 20px 20px; border-top: 3px solid var(--black); margin-top: 12px; }
.chat-form textarea { min-height: 64px; }
.chat-actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.hp-label { position: absolute; left: -9999px; }
.person { padding: 4px 20px 20px; border-top: 3px solid var(--black); }
.person h2 { font-size: 28px; margin-top: 18px; }
@media (max-width: 560px) {
  .acct-panel { padding: 18px; box-shadow: 6px 6px 0 var(--blue); }
  .acct-btns .btn, .chat-actions .btn { width: 100%; }
  .msg { max-width: 92%; }
  .chat-log, .chips, .chat-form, .person { padding-left: 14px; padding-right: 14px; }
}
.chips[hidden] { display: none; }