/*
 * The Big 5 Capital account pages. Uses the theme's colours when it defines them (Big 5 Capital theme 2.0), with the same
 * values as fallbacks, so the pages keep the brand under any theme. Scoped to .b5c-account.
 */
.b5c-account {
  --a-ink: var(--ink, #1a1b17);
  --a-slate: var(--slate, #53564d);
  --a-hair: var(--hair, #d8dad1);
  --a-sheet: var(--sheet, #ffffff);
  --a-paper: var(--paper, #f3f4f0);
  --a-brass: var(--brass, #875b00);
  --a-gold: var(--gold, #d89a1e);
  --a-acacia: var(--acacia, #2e6b4e);
  --a-brick: var(--brick, #a3362a);
  color: var(--a-ink);
}
.b5c-account :focus-visible { outline: 3px solid var(--a-brass); outline-offset: 2px; }

@media (min-width: 960px) {
  body .b5c-wrap.b5c-account { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 3rem; align-items: start; }
  .b5c-account > .b5c-account-main:only-child { grid-column: 1 / -1; }
}
.b5c-account-main { min-width: 0; }

/* Navigation inside the account */
.b5c-account-nav ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; border-bottom: 1px solid var(--a-hair); }
.b5c-account-nav a { display: inline-block; padding: .65rem 0; color: var(--a-slate); font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.b5c-account-nav a:hover { color: var(--a-ink); }
.b5c-account-nav a[aria-current="page"] { color: var(--a-ink); border-bottom-color: var(--a-gold); }
@media (min-width: 960px) {
  .b5c-account-nav { position: sticky; top: 7rem; }
  .b5c-account-nav ul { display: block; border-bottom: 0; border-left: 1px solid var(--a-hair); }
  .b5c-account-nav a { display: block; padding: .5rem 0 .5rem 1rem; margin: 0 0 0 -1px; border-bottom: 0; border-left: 2px solid transparent; }
  .b5c-account-nav a[aria-current="page"] { border-left-color: var(--a-gold); }
}

/* Sign-in, registration and password cards */
.b5c-auth-card { max-width: 32rem; margin: 0 auto; padding: clamp(24px, 4vw, 40px); background: var(--a-sheet); border: 1px solid var(--a-hair); border-top: 3px solid var(--a-gold); border-radius: 4px; }
.b5c-auth-card h1 { margin: .35rem 0 .75rem; font-size: clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem); line-height: 1.1; }
.b5c-auth-card > p { color: var(--a-slate); }
.b5c-auth-links { margin: 1rem 0 0; font-size: .9375rem; color: var(--a-slate); }
.b5c-auth-links a, .b5c-account a:not(.b5c-btn) { color: var(--a-ink); text-decoration-color: var(--a-brass); text-underline-offset: .2em; }

.b5c-account-form { display: grid; gap: 1rem; margin-top: 1.25rem; }
.b5c-field { display: grid; gap: .35rem; }
.b5c-field label { font-weight: 600; font-size: .9375rem; color: var(--a-ink); }
.b5c-field input { width: 100%; box-sizing: border-box; padding: .75rem .85rem; font: inherit; color: var(--a-ink); background: var(--a-sheet); border: 1px solid #8a8e83; border-radius: 2px; }
.b5c-field input:focus-visible { border-color: var(--a-brass); }
.b5c-field-hint { margin: 0; font-size: .8125rem; color: var(--a-slate); }
.b5c-field-row { display: grid; gap: 1rem; }
@media (min-width: 560px) { .b5c-field-row { grid-template-columns: 1fr 1fr; } }
.b5c-account-form label.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .9375rem; color: var(--a-ink); }
.b5c-account-form label.check input { margin-top: .25rem; accent-color: var(--a-brass); }
.b5c-account-form .b5c-btn { justify-self: start; }

/* The honeypot: hidden from people, present for bots */
.b5c-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Messages */
.b5c-account-alert { max-width: 32rem; margin: 0 auto 1.25rem; padding: 14px 16px; border: 1px solid var(--a-hair); border-left: 4px solid var(--a-acacia); background: #eef5f0; border-radius: 2px; color: var(--a-ink); }
.b5c-account-alert.is-error { border-left-color: var(--a-brick); background: #fbf0ee; }
.b5c-account-alert p { margin: 0 0 .35rem; color: var(--a-ink); }
.b5c-account-alert ul { margin: 0; padding-left: 1.2rem; }
.b5c-account-main > .b5c-account-alert { max-width: none; }

/* Dashboard cards */
.b5c-account-card { margin: 0 0 18px; padding: clamp(20px, 3vw, 28px); background: var(--a-sheet); border: 1px solid var(--a-hair); border-radius: 4px; }
.b5c-account-card h2 { margin: 0 0 .6rem; font-size: clamp(1.2rem, 1.1rem + .4vw, 1.5rem); }
.b5c-account-card h3 { margin: 1.25rem 0 .5rem; font-size: 1.05rem; }
.b5c-account-card p { color: var(--a-slate); }
.b5c-account-card > :last-child { margin-bottom: 0; }
.b5c-account-grid { display: grid; gap: 18px; }
@media (min-width: 720px) { .b5c-account-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .b5c-account-grid .b5c-account-card { margin: 0; } }
.b5c-account-status { border-left: 3px solid var(--a-gold); }
.b5c-account-status.is-active, .b5c-account-status.is-non-renewing { border-left-color: var(--a-acacia); }
.b5c-account-status.is-past-due, .b5c-account-status.is-expired, .b5c-account-status.is-suspended, .b5c-account-status.is-revoked { border-left-color: var(--a-brick); }
.b5c-account-state { margin: 0 0 .5rem; }
.b5c-account-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
body .b5c-account .b5c-btn.b5c-btn-quiet { background: transparent !important; color: var(--a-ink) !important; border: 1px solid rgba(26, 27, 23, .4) !important; }
body .b5c-account .b5c-btn.b5c-btn-quiet:hover { border-color: var(--a-ink) !important; }
.b5c-account-list { margin: 0; padding-left: 1.2rem; color: var(--a-slate); }
.b5c-account-list li, .b5c-account-steps li { margin: .35rem 0; }
.b5c-account-steps { padding-left: 1.3rem; color: var(--a-slate); }
.b5c-account .b5c-detail-list { margin: 0; }
.b5c-account .b5c-detail-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--a-hair); }
.b5c-account .b5c-detail-list span { color: var(--a-slate); }
.b5c-account .b5c-progress-list { display: grid; gap: 14px; }
.b5c-account .b5c-profile-panel { margin: 0; padding: 0; border: 0; background: none; }

/* The licence key panel (Trading Agent) */
.b5c-licence { border-left: 3px solid var(--a-gold); }
.b5c-licence.is-active, .b5c-licence.is-legacy { border-left-color: var(--a-acacia); }
.b5c-licence.is-expired, .b5c-licence.is-revoked, .b5c-licence.is-attention { border-left-color: var(--a-brick); }
.b5c-licence-box { margin: 0 0 1rem; padding: 14px 16px; background: var(--a-paper); border: 1px solid var(--a-hair); border-radius: 2px; overflow-wrap: anywhere; }
.b5c-licence-box[hidden] { display: none; }
.b5c-licence-key { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(1rem, .92rem + .45vw, 1.3rem); letter-spacing: .06em; color: var(--a-ink); background: none; padding: 0; user-select: all; }
.b5c-licence .b5c-account-actions [hidden] { display: none !important; }
.b5c-licence .b5c-btn[disabled] { opacity: .6; cursor: progress; }
.b5c-licence-message { min-height: 1.5em; margin: .5rem 0 1rem; color: var(--a-acacia) !important; font-weight: 500; }
.b5c-licence-message.is-error { color: var(--a-brick) !important; }
.b5c-licence-message:empty { margin: 0; min-height: 0; }
.b5c-licence-warning { padding: 10px 12px; border-left: 3px solid var(--a-brick); background: #fbf0ee; color: var(--a-ink) !important; }
.b5c-licence-devices { list-style: none; margin: 0; padding: 0; }
.b5c-licence-devices li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--a-hair); color: var(--a-slate); }