/* Premium Blue | account adapter (account, password, two-step verification pages and the API key box) | loaded after the theme sheet.
 *
 * Sits ON TOP of the theme sheet (premium-blue.css) and only adds what is specific to SCRIOT on these pages; the theme modules are not
 * edited. Colours are the page's own --acc-* tokens (defined by the sheet on `.page-account`, with dark values) and the theme's
 * --tp-* tokens, no new colour constants.
 *   - .acc-form-row, .acc-subform, .acc-note, .acc-rule, .acc-sub, .acc-linkrow: small building blocks inside a card
 *   - .acc-state: the On / Off pill at the end of a card head
 *   - .acc-btn--danger, .acc-codes, .acc-secret: two-step verification
 *   - .pb-key: the API key box (also used on the API documentation page, outside .page-account)
 */

/* The theme resets the font of everything inside the right-hand column (host forms inherit the page font): give the icons back their
   icon fonts, or every glyph there turns into an empty box. */
.page-account #settings_addon_fields .fa,
.page-account #settings_addon_fields .fas,
.page-account #settings_addon_fields .far {
  font-family: "Font Awesome 5 Free";
}

.page-account #settings_addon_fields .fab {
  font-family: "Font Awesome 5 Brands";
}

.page-account .acc-shell--narrow {
  max-width: 720px;
}

.page-account .acc-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.page-account .acc-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-12);
}

@media (max-width: 560px) {
  .page-account .acc-form-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.page-account .acc-note {
  margin: 0 0 var(--sp-12);
  color: var(--acc-muted);
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: 1.6;
}

.page-account .acc-note a,
.page-account .acc-linkrow a {
  color: var(--acc-blue);
  font-weight: 700;
  text-decoration: none;
}

.page-account .acc-note a:hover,
.page-account .acc-linkrow a:hover {
  text-decoration: underline;
}

.page-account .acc-linkrow {
  margin: var(--sp-8) 0 0;
  font-size: var(--fs-13);
}

.page-account .acc-linkrow i {
  margin-inline-end: var(--sp-4);
  font-size: 11px;
}

.page-account .acc-rule {
  margin: var(--sp-16) 0;
  border: 0;
  border-top: 1px dashed var(--acc-border);
}

.page-account .acc-sub {
  margin: var(--sp-16) 0 var(--sp-4);
  color: var(--acc-ink);
  font-size: var(--fs-14);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.page-account .acc-subform {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.page-account .acc-subform .acc-btn {
  align-self: flex-start;
}

.page-account .acc-alert {
  margin: 0;
}

/* the On / Off pill at the end of a card head */
.page-account .acc-section__head .acc-state {
  margin-inline-start: auto;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--acc-border);
  color: var(--acc-muted);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.page-account .acc-state--on {
  border-color: color-mix(in srgb, var(--acc-green) 40%, transparent);
  background: color-mix(in srgb, var(--acc-green) 12%, transparent);
  color: var(--acc-green);
}

.page-account .acc-hero__chip--amber {
  border-color: color-mix(in srgb, var(--acc-amber) 40%, transparent);
  color: var(--acc-amber);
}

/* a picture is the hero avatar */
.page-account .acc-hero__avatar.has-image {
  padding: 0;
  overflow: hidden;
}

.page-account .acc-hero__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-account .acc-avatar-preview {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 0 var(--sp-8);
  border-radius: var(--r-16);
  object-fit: cover;
}

.page-account .acc-avatar-preview[hidden] {
  display: none;
}

/* danger button (turn off) */
.page-account .acc-btn--danger {
  border-color: color-mix(in srgb, var(--acc-red) 40%, transparent);
  background: color-mix(in srgb, var(--acc-red) 10%, transparent);
  color: var(--acc-red);
  box-shadow: none;
}

.page-account .acc-btn--danger:hover,
.page-account .acc-btn--danger:focus-visible {
  border-color: transparent;
  background: var(--acc-red);
  color: #fff;
}

/* the picture field: the sheet has no rule for a file input, the browser's grey button stood out in the card */
.page-account .form-control-file {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px dashed var(--acc-border);
  border-radius: var(--r-12);
  background: var(--acc-card-2);
  color: var(--acc-ink);
  font-size: var(--fs-14);
}

.page-account .form-control-file::file-selector-button {
  margin-inline-end: 12px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--acc-blue) 30%, transparent);
  border-radius: var(--r-10);
  background: color-mix(in srgb, var(--acc-blue) 10%, transparent);
  color: var(--acc-blue);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* ghost button (Copy, Regenerate codes, Open in app): the sheet gives it a gap but never the flex box, so the icon touched the label */
.page-account .acc-btn--ghost,
.pb-key .acc-btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* recovery codes: one chip per code */
.page-account .acc-codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-account .acc-codes code,
.page-account .acc-secret code {
  display: block;
  /* the sheet's base rule `code { margin-top: -20px }` is meant for the host's inline snippets: on a block chip it pulls it over the row above */
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--acc-border);
  border-radius: var(--r-12);
  background: var(--acc-card-2);
  color: var(--acc-ink);
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
  overflow-wrap: anywhere;
}

.page-account .acc-secret {
  margin: var(--sp-4) 0 0;
}

.page-account .acc-secret code {
  text-align: start;
  user-select: all;
}

/* ---- the API key box */
.pb-key {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-12);
  width: 100%;
  min-width: 0;
}

.pb-key .form-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
}

.pb-key > .acc-btn {
  align-self: flex-start;
}

.pb-key .acc-key-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-8);
  align-items: stretch;
}

.pb-key .acc-key-row .form-control {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.pb-key .acc-key-row .acc-btn {
  white-space: nowrap;
}

.pb-key .acc-key-row .acc-btn[disabled],
.pb-key [data-pb-key-generate][disabled] {
  opacity: .5;
  cursor: not-allowed;
}

.pb-key .form-control.is-new {
  border-color: var(--tp-green);
}

.pb-key__note {
  margin: var(--sp-8) 0 0;
  color: var(--tp-500);
  font-size: var(--fs-13);
  line-height: 1.55;
}

.pb-key__note--ok {
  color: var(--tp-green);
  font-weight: 700;
}

.pb-key__note[hidden],
.pb-key__confirm[hidden] {
  display: none;
}

.pb-key__confirm {
  margin: var(--sp-12) 0;
  padding: var(--sp-16);
  border: 1px solid var(--tp-300);
  border-radius: var(--r-16);
  background: var(--tp-100);
}

.pb-key__warn {
  margin: 0 0 var(--sp-12);
  color: var(--tp-800);
  font-size: var(--fs-13);
  line-height: 1.55;
}

.pb-key__warn i {
  color: var(--tp-yellow);
}

.pb-key__error {
  margin: var(--sp-6) 0 0;
  color: var(--tp-red);
  font-size: var(--fs-13);
  font-weight: 600;
}

.pb-key__error:empty {
  display: none;
}

.pb-key__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}

/* "Use the time zone of this browser" is a 14px line of small print: on a phone it is a 44px target (checked 17.10.2026 at 375px).
   :not([hidden]) because an author display rule would show the link before the page script has found out that it can work. */
@media (max-width: 767.98px) {
  #profile-timezone-detect:not([hidden]) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---- pb3 X4 polish: contrast and targets of the account page (measured 17.10.2026 in Chrome) ---- */
/* the e-mail line of the hero was the slate colour at 4.2:1 on the light card */
html:not(.dark) .page-account .acc-hero__email {
  color: var(--tp-600);
}

html:not(.dark) .page-account .acc-hero__email span {
  color: var(--tp-600);
}

@media only screen and (max-width: 767.98px) {
  /* the one-line links of the cards are 44px targets (the password toggles have the sheet's ::after hit area) */
  .page-account .acc-linkrow a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---- pb3 X4 polish: the API key field in the dark mode was the neutral #222 beside navy cards; it is one step darker than its card ---- */
html.dark .page-account .pb-key .acc-key-row .form-control,
html.dark .page-api-v2 .pb-key .acc-key-row .form-control {
  background-color: color-mix(in srgb, var(--td-surface-900-94) 60%, black);
  border-color: var(--td-border-14);
}