/* Account dashboard panels. Every rule is confined to the account-area root. */
.hb-account-area {
  --hba-paper: #efe1bb;
  --hba-card: #d1c3a6;
  --hba-card-alt: #dbceb1;
  --hba-ink: #3d3021;
  --hba-muted: #756349;
  --hba-gold: #b68c43;
  --hba-line: #b19a70;
  display: flex;
  flex-direction: column;
  gap: 17px;
  width: 100%;
  max-width: 760px;
  min-width: 0;
  margin: 0 auto;
  color: var(--hba-ink);
  font: 400 11px/1.55 Verdana,Arial,sans-serif;
  text-align: left;
  overflow-wrap: anywhere;
}
.hb-account-area,
.hb-account-area *,
.hb-account-area *::before,
.hb-account-area *::after { box-sizing: border-box; }
.hb-account-area p { margin: 0 0 8px; }
.hb-account-area p:last-child { margin-bottom: 0; }
.hb-account-area a:link,
.hb-account-area a:visited { color: #21546d; text-decoration: none; }
.hb-account-area a:hover { color: #80561d; text-decoration: underline; }
.hb-account-area [hidden] { display: none !important; }

/* Independent navy and gold headings, instead of one large parchment frame. */
.hb-account-area .hb-account-panel {
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--hba-gold);
  border-radius: 0;
  background: var(--hba-paper);
  box-shadow: 0 2px 4px rgba(19,15,8,.20), inset 0 0 0 1px rgba(255,244,208,.55);
}
.hb-account-area .hb-account-panel > .hb-account-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  margin: 0;
  padding: 5px 10px;
  border: 0;
  border-bottom: 1px solid #b6924a;
  background: linear-gradient(#214c62 0%,#102f43 56%,#163b4f 100%);
  color: #f7edcf;
  font: 400 11px/20px Georgia,'Times New Roman',serif;
  letter-spacing: .8px;
  text-align: left;
  text-transform: uppercase;
  text-shadow: 0 1px 1px #000;
  box-shadow: inset 0 1px rgba(235,220,168,.17);
}
.hb-account-area .hb-account-heading > .hb-icon {
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  margin: 0;
  color: #edcd7b;
}
.hb-account-area .hb-account-heading > span { min-width: 0; }
.hb-account-area .hb-account-panel > summary.hb-account-heading {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.hb-account-area .hb-account-panel > summary.hb-account-heading::-webkit-details-marker { display: none; }
.hb-account-area .hb-account-panel > summary.hb-account-heading::after {
  content: '+';
  flex: 0 0 auto;
  margin-left: auto;
  color: #ebcb7c;
  font: 700 14px/1 Verdana,Arial,sans-serif;
  text-shadow: 0 1px #000;
}
.hb-account-area .hb-account-panel[open] > summary.hb-account-heading::after { content: '\2212'; }
.hb-account-area .hb-account-panel-body { min-width: 0; padding: 11px 12px 12px; }
.hb-account-area .hb-account-panel-body > :last-child { margin-bottom: 0; }

/* Compact information strips and their actual account actions. */
.hb-account-area .hb-account-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  min-width: 0;
  margin: 0 0 10px;
  padding: 9px 11px;
  border: 1px solid var(--hba-line);
  background: var(--hba-card);
  box-shadow: inset 0 1px rgba(255,246,219,.28);
}
.hb-account-area .hb-account-copy { flex: 1 1 auto; min-width: 0; }
.hb-account-area .hb-account-copy :is(h3,h4) {
  margin: 0 0 4px;
  color: #49361f;
  font: 700 12px/1.4 Georgia,'Times New Roman',serif;
}
.hb-account-area .hb-account-copy > strong { color: #3f2c17; }
.hb-account-area .hb-account-copy small {
  display: block;
  margin-top: 3px;
  color: var(--hba-muted);
  font: 400 10px/1.5 Verdana,Arial,sans-serif;
}
.hb-account-area .hb-account-actions {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.hb-account-area .hb-account-button {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  min-height: 28px;
  margin: 0;
  padding: 5px 12px;
  border: 1px solid #1c456b;
  border-radius: 1px;
  background: linear-gradient(#377bb0,#20517e);
  color: #fff6df;
  font: 400 10px/16px Verdana,Arial,sans-serif;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 1px #173856;
  box-shadow: inset 0 1px rgba(240,249,255,.25), 0 1px 2px rgba(32,24,11,.28);
  cursor: pointer;
  transition: background-color .12s,border-color .12s;
  appearance: none;
  filter: none;
}
.hb-account-area a.hb-account-button:link,
.hb-account-area a.hb-account-button:visited { color: #fff6df; text-decoration: none; }
.hb-account-area .hb-account-button:not(:disabled):not([aria-disabled="true"]):hover {
  border-color: #204f76;
  background: linear-gradient(#438ac0,#2b6393);
  color: #fffdf1;
  text-decoration: none;
  transform: none;
  filter: none;
}
.hb-account-area .hb-account-button.is-brown { border-color: #685136; background: linear-gradient(#978263,#735b3d); text-shadow: 0 1px #594124; }
.hb-account-area .hb-account-button.is-brown:not(:disabled):not([aria-disabled="true"]):hover { border-color: #735a35; background: linear-gradient(#aa9472,#836a48); }
.hb-account-area .hb-account-button.is-green { border-color: #2a5b24; background: linear-gradient(#4d8d3b,#326b28); text-shadow: 0 1px #244f20; }
.hb-account-area .hb-account-button.is-green:not(:disabled):not([aria-disabled="true"]):hover { border-color: #356b2a; background: linear-gradient(#5b9b46,#3d7a31); }
.hb-account-area .hb-account-button.is-red { border-color: #713731; background: linear-gradient(#b4665a,#894138); text-shadow: 0 1px #653027; }
.hb-account-area .hb-account-button.is-red:not(:disabled):not([aria-disabled="true"]):hover { border-color: #804338; background: linear-gradient(#c77769,#9b5144); }
.hb-account-area .hb-account-button > .hb-icon { flex: 0 0 12px; width: 12px; height: 12px; }
.hb-account-area .hb-account-button:disabled,
.hb-account-area .hb-account-button[aria-disabled="true"] {
  opacity: 1;
  border-color: #ac9c7e;
  background: linear-gradient(#c9bda4,#b6a78c);
  color: #685b46;
  text-shadow: 0 1px rgba(255,250,231,.45);
  box-shadow: inset 0 1px rgba(255,250,228,.32);
  cursor: default;
  pointer-events: none;
}
.hb-account-area a.hb-account-button[aria-disabled="true"] { color: #685b46; }
.hb-account-area :is(a,button,input,select,textarea,summary):focus-visible { outline: 2px solid #3d6f8a; outline-offset: 3px; }

/* Status icon, account summary and modest benefit tiles. */
.hb-account-area .hb-account-status {
  display: grid;
  grid-template-columns: 50px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px 14px;
  min-width: 0;
  padding: 2px 3px 8px;
}
.hb-account-area .hb-account-status-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  color: #4d8632;
}
.hb-account-area .hb-account-status-icon :is(svg,img,.hb-icon) { display: block; width: 50px; height: 50px; max-width: 50px; max-height: 50px; }
.hb-account-area .hb-account-status .hb-account-copy > strong { display: block; margin-bottom: 3px; font: 700 13px/1.4 Georgia,'Times New Roman',serif; color: #4f3a20; }
.hb-account-area .hb-account-benefits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; min-width: 0; margin-top: 10px; padding-top: 11px; border-top: 1px solid #c0a978; }
.hb-account-area .hb-account-benefit { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 9px 6px; border: 1px solid #b7a078; background: #dcd0b2; color: #5c4a31; text-align: center; font-size: 10px; }
.hb-account-area .hb-account-benefit > .hb-icon { width: 20px; height: 20px; color: #9a752f; }
.hb-account-area .hb-account-benefit :is(strong,b) { color: #385e2a; font-size: 11px; }
.hb-account-area .hb-account-benefit :is(p,small) { margin: 0; font-size: 10px; line-height: 1.4; }

/* Personal records retain a fixed table layout even for long account addresses. */
.hb-account-area .hb-account-table { width: 100%; max-width: 100%; margin: 0; table-layout: fixed; border-collapse: collapse; border-spacing: 0; font: 11px/1.5 Verdana,Arial,sans-serif; }
.hb-account-area .hb-account-table :is(th,td) { padding: 7px 10px; border: 1px solid #b9a57b; color: var(--hba-ink); font: 11px/1.5 Verdana,Arial,sans-serif; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.hb-account-area .hb-account-table th { width: 31%; background: #cbbc9c; font-weight: 700; }
.hb-account-area .hb-account-table td { background: #e2d5b5; }
.hb-account-area .hb-account-table tr:nth-child(even) td { background: #d9caaa; }
.hb-account-area .hb-account-table td p { margin: 0 0 5px; text-align: left; }
.hb-account-area .hb-account-table thead th { width: auto; background: #21465a; color: #f7eac6; }

/* Character rows stay compact on desktop and wrap their actions on phones. */
.hb-account-area .hb-character-list { display: grid; min-width: 0; border: 1px solid #b5a078; }
.hb-account-area .hb-character-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 6px 12px;
  min-width: 0;
  min-height: 40px;
  padding: 5px 9px;
  border-bottom: 1px solid #b8a47d;
  background: var(--hba-card);
}
.hb-account-area .hb-character-row:nth-child(even) { background: var(--hba-card-alt); }
.hb-account-area .hb-character-row:last-child { border-bottom: 0; }
.hb-account-area .hb-character-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 9px; min-width: 0; }
.hb-account-area .hb-character-info > :is(a,strong,b) { max-width: 100%; color: #244e65; font: 700 11px/1.4 Verdana,Arial,sans-serif; overflow-wrap: anywhere; }
.hb-account-area .hb-character-meta { color: var(--hba-muted); font: 400 10px/1.4 Verdana,Arial,sans-serif; }
.hb-account-area .hb-character-row .hb-account-actions { flex-wrap: nowrap; gap: 5px; }
.hb-account-area .hb-character-row .hb-account-button { min-height: 25px; padding: 3px 8px; font-size: 9px; line-height: 17px; }
.hb-account-area .hb-account-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0; margin-top: 9px; font-size: 10px; }
.hb-account-area .hb-account-pagination .hb-account-button { min-height: 24px; padding: 3px 8px; font-size: 9px; }

/* Empty reports, confirmations and unavailable features remain unobtrusive. */
.hb-account-area .hb-account-empty { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 10px 2px; color: #725d3f; font: 11px/1.5 Verdana,Arial,sans-serif; }
.hb-account-area .hb-account-empty > .hb-icon { flex: 0 0 16px; width: 16px; height: 16px; color: #8a6b30; }
.hb-account-area .hb-account-empty p { margin: 0; }
.hb-account-area .hb-account-muted { color: var(--hba-muted); font: 10px/1.5 Verdana,Arial,sans-serif; }
.hb-account-area .hb-account-note { min-width: 0; margin: 10px 0; padding: 9px 11px; border: 1px solid #b59b67; border-left: 3px solid #ad8131; background: #e0cea5; color: #635035; font: 10px/1.55 Verdana,Arial,sans-serif; }

@media (max-width: 700px) {
  .hb-account-area .hb-account-card { align-items: flex-start; flex-wrap: wrap; }
  .hb-account-area .hb-account-card > .hb-account-copy { flex-basis: 220px; }
  .hb-account-area .hb-account-card > .hb-account-actions { margin-left: auto; }
}
@media (max-width: 560px) {
  .hb-account-area { gap: 13px; }
  .hb-account-area .hb-account-panel-body { padding: 10px; }
  .hb-account-area .hb-account-panel > .hb-account-heading { padding-left: 9px; padding-right: 9px; font-size: 10px; letter-spacing: .45px; }
  .hb-account-area .hb-account-card { padding: 9px; }
  .hb-account-area .hb-account-card > .hb-account-copy { flex: 1 1 100%; }
  .hb-account-area .hb-account-card > .hb-account-actions { flex: 1 1 100%; margin-left: 0; justify-content: flex-start; }
  .hb-account-area .hb-account-status { grid-template-columns: 50px minmax(0,1fr); gap: 9px 11px; padding: 1px 0 7px; }
  .hb-account-area .hb-account-status > .hb-account-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .hb-account-area .hb-account-benefits { gap: 6px; }
  .hb-account-area .hb-account-benefit { padding: 8px 4px; font-size: 9px; }
  .hb-account-area .hb-account-benefit :is(p,small) { font-size: 9px; }
  .hb-account-area .hb-account-table :is(th,td) { padding: 6px 7px; font-size: 10px; }
  .hb-account-area .hb-account-table th { width: 35%; }
  .hb-account-area .hb-character-row { grid-template-columns: minmax(0,1fr); gap: 7px; padding: 8px 9px; }
  .hb-account-area .hb-character-row .hb-account-actions { justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 360px) {
  .hb-account-area .hb-account-benefits { grid-template-columns: 1fr; }
  .hb-account-area .hb-account-benefit { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 8px; text-align: left; }
}

/* Match the supplied account screenshots with the site's painted header artwork. */
.hb-account-area .hb-account-home,
.hb-account-area .hb-account-details { display: flex; flex-direction: column; gap: 17px; min-width: 0; }
.hb-account-area .hb-account-panel { overflow: visible; border-top: 0; background: linear-gradient(#f1e5c6,#e8d7ad); }
.hb-account-area .hb-account-panel > .hb-account-heading {
  position: relative; width: calc(100% + 20px); height: 31px; min-height: 31px;
  margin: 0 -10px; padding: 0 18px; border: 0; box-shadow: none;
  background: url('/templates/highbinot/images/ui/page/header-editable.png') center / 100% 100% no-repeat;
  color: #f7edcf; font: 700 12px/31px 'Cinzel',Georgia,serif; letter-spacing: .4px;
}
.hb-account-area .hb-account-heading > .hb-icon { width: 13px; height: 13px; flex-basis: 13px; color: #e9e9df; }
.hb-account-area .hb-account-panel-body { padding: 12px 17px 16px; }
.hb-account-area .hb-account-button { min-height: 24px; padding: 3px 10px; white-space: nowrap; }
.hb-account-area .hb-account-card > .hb-account-button,
.hb-account-area .hb-account-card > form { flex: 0 0 auto; }
.hb-account-area .hb-account-status { align-items: start; }
.hb-account-area .hb-account-status > .hb-account-actions { flex-direction: column; align-items: stretch; min-width: 120px; }
.hb-account-area .hb-account-status-icon { border: 1px solid #13c87c; border-radius: 6px; color: #b2ffda; background: #009d69; box-shadow: 0 2px 5px rgba(20,84,52,.2); }
.hb-account-area .hb-account-status-icon :is(svg,.hb-icon) { width: 28px; height: 28px; }
.hb-account-area .hb-account-status-icon.is-free { background: #897b55; border-color: #b7a377; color: #efe2b9; }
.hb-account-area .hb-account-status-icon.is-pending { background: #d9cba3; border-color: #d3c49d; color: #968555; border-radius: 50%; box-shadow: none; }
.hb-account-area .hb-account-status-label { margin-bottom: 3px; }
.hb-account-area .hb-account-status-label :is(b,span) { font-weight: 400; }
.hb-account-area .hb-account-benefit { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 7px; text-align: left; font: 9px/1.4 Verdana,Arial,sans-serif; background: #d1c3a6; }
.hb-account-area .hb-benefit-icon { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 3px; color: #ffd25e; }
.hb-account-area .hb-benefit-icon .hb-icon { width: 18px; height: 18px; }
.hb-account-area .hb-benefit-icon.is-orange { background: linear-gradient(#ee8f18,#b94f0c); }
.hb-account-area .hb-benefit-icon.is-blue { background: linear-gradient(#2b7bf1,#1743a5); }
.hb-account-area .hb-benefit-icon.is-purple { background: linear-gradient(#bb36ed,#8021b8); }
.hb-account-area .hb-account-benefits-link { margin-top: 9px; text-align: center; font-size: 9px; }
.hb-account-area .hb-account-table { margin: 12px 0; }
.hb-account-area .hb-account-table :is(th,td),
.hb-account-area .hb-account-table tr:nth-child(even) td { padding: 4px 0; border: 0; border-bottom: 1px solid #bbaa83; background: transparent; font-weight: 400; }
.hb-account-area .hb-account-table th { padding-right: 10px; }
.hb-account-area .hb-account-table th > .hb-icon { width: 12px; height: 12px; margin-right: 4px; }
.hb-account-area .hb-account-table thead th { color: #4c3a25; font-weight: 700; }
.hb-account-area .hb-account-security-actions { margin-top: 12px; padding-top: 3px; }
.hb-account-area .hb-account-security-actions > .hb-account-actions { justify-content: flex-start; margin: 8px 0; }
.hb-account-area .hb-account-log-scroll { max-height: 320px; overflow: auto; }
.hb-account-area .hb-account-log th:first-child { width: 48%; }
.hb-account-area .hb-character-list { gap: 4px; border: 0; }
.hb-account-area .hb-character-row { min-height: 40px; border: 1px solid #b6a17c; border-radius: 1px; }
.hb-account-area .hb-character-row:last-child { border-bottom: 1px solid #b6a17c; }
.hb-account-area .hb-character-info { display: block; }
.hb-account-area .hb-character-info > a { font-weight: 400; }
.hb-account-area .hb-character-meta { margin-top: 1px; font-size: 9px; }
.hb-account-area .hb-character-online { color: #288249; }
.hb-account-area .hb-character-action { display: inline-flex; align-items: center; justify-content: center; padding: 3px; color: #6c553d; }
.hb-account-area .hb-character-action .hb-icon,
.hb-account-area .hb-character-hidden .hb-icon { width: 13px; height: 13px; }
.hb-account-area .hb-account-character-tools { justify-content: flex-end; margin-top: 13px; }
.hb-account-area .hb-account-pagination { justify-content: center; border-top: 1px solid #bbaa83; margin-top: 12px; padding-top: 10px; gap: 7px; }
.hb-account-area .hb-account-empty { flex-direction: column; justify-content: center; min-height: 82px; gap: 8px; padding: 14px 0; text-align: center; }
.hb-account-area .hb-account-empty > .hb-icon { flex-basis: auto; width: 27px; height: 27px; color: #b5a587; }
.hb-account-area .hb-account-empty > [data-hb-icon="check"] { color: #61d49c; }
.hb-account-area .hb-account-panel > summary.hb-account-heading::after { content: '\2304'; color: #ece4d0; }
.hb-account-area .hb-account-panel[open] > summary.hb-account-heading::after { content: '\2303'; }
.hb-account-area .hb-account-chevron { display: none; }
.hb-account-area .hb-account-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 560px) {
  .hb-account-area .hb-account-home,.hb-account-area .hb-account-details { gap: 14px; }
  .hb-account-area .hb-account-panel > .hb-account-heading { width: calc(100% + 12px); margin: 0 -6px; padding-left: 14px; padding-right: 14px; font-size: 10px; }
  .hb-account-area .hb-account-panel-body { padding: 11px 10px 13px; }
  .hb-account-area .hb-account-status > .hb-account-actions { flex-direction: row; align-items: center; min-width: 0; }
  .hb-account-area .hb-account-benefits { grid-template-columns: 1fr; }
  .hb-account-area .hb-account-table :is(th,td) { font-size: 10px; padding-top: 5px; padding-bottom: 5px; }
  .hb-account-area .hb-character-row { grid-template-columns: minmax(0,1fr) auto; gap: 7px; padding: 5px 8px; }
  .hb-account-area .hb-character-row .hb-account-actions { flex-wrap: nowrap; }
}