/* Master Runes D35 - Settings, change password, recovery centre, Recovery Key, login code step.
   Compact cards matching My account (tp-myaccount.css). Brand tokens: brand-tokens.css. Mobile-first. */
.tp-acc { display: grid; gap: 14px; color: var(--brand-text-soft); font-size: 14px; line-height: 1.5; min-width: 0; }
.tp-acc--narrow { max-width: 560px; }
.tp-acc h1, .tp-acc h2 { font-family: var(--brand-font-display); color: var(--brand-text); letter-spacing: .03em; margin: 0; border: 0 !important; padding: 0 !important; background: none; }
.tp-acc h1 { font-size: clamp(22px, 5vw, 28px); color: var(--brand-accent); }
.tp-acc h2 { font-size: 16px; display: flex; align-items: center; gap: 8px; line-height: 1.3; }
.tp-acc-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tp-acc h2 .tp-acc-ico { color: var(--brand-accent); }
.tp-acc-hint { font-size: 12.5px; color: var(--brand-text-muted); margin: 0; }
.tp-acc p { margin: 0; }
.tp-acc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; }
.tp-acc-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.tp-acc-card {
  display: grid; gap: 10px; min-width: 0; padding: 14px 16px;
  background: var(--brand-gradient-surface); border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-lg); box-shadow: var(--brand-shadow-sm), var(--brand-shadow-inset);
}
.tp-acc-card--accent { border-top: 2px solid var(--brand-accent-strong); }
.tp-acc-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.tp-acc-value { font-size: 15px; color: var(--brand-text); font-weight: 600; word-break: break-all; }
.tp-acc-note { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--brand-radius-md); background: rgb(var(--brand-accent-rgb) / .08); border: 1px solid rgb(var(--brand-accent-rgb) / .3); font-size: 13.5px; }
.tp-acc-note strong { color: var(--brand-text); }

/* pills */
.tp-acc-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  color: var(--brand-text-muted); background: rgb(var(--brand-bg-rgb) / .6); border: 1px solid var(--brand-border-strong); white-space: nowrap; }
.tp-acc-pill--on { color: var(--brand-success-text); border-color: rgb(var(--brand-success-rgb, 74 222 128) / .45); background: rgb(var(--brand-success-rgb, 74 222 128) / .1); }

/* alerts */
.tp-acc-alert { padding: 9px 12px; border-radius: var(--brand-radius-md); font-size: 13.5px; line-height: 1.45; border: 1px solid var(--brand-border-strong); background: var(--brand-surface-2); color: var(--brand-text); overflow-wrap: anywhere; }
.tp-acc-alert--ok { border-color: rgb(var(--brand-success-rgb, 74 222 128) / .45); background: rgb(var(--brand-success-rgb, 74 222 128) / .1); }
.tp-acc-alert--err { border-color: rgb(var(--brand-danger-rgb) / .45); background: rgb(var(--brand-danger-rgb) / .12); color: var(--brand-danger-text); }
.tp-acc-alert--warn { border-color: rgb(var(--brand-premium-rgb, 224 178 73) / .5); background: rgb(var(--brand-premium-rgb, 224 178 73) / .1); }
.tp-acc-alert--info { border-color: rgb(var(--brand-info-rgb) / .4); background: rgb(var(--brand-info-rgb) / .1); }

/* forms: label above, sensible widths, 38px controls */
.tp-acc-form { display: grid; gap: 10px; max-width: 400px; margin: 0; }
.tp-acc-field { display: grid; gap: 4px; min-width: 0; }
.tp-acc-field label { font-size: 12.5px; font-weight: 700; color: var(--brand-text); }
.tp-acc input[type="text"], .tp-acc input[type="email"], .tp-acc input[type="password"], .tp-acc input[type="number"], .tp-acc select {
  width: 100% !important; max-width: 400px !important; height: 38px !important; min-height: 38px; box-sizing: border-box !important;
  margin: 0 !important; padding: 0 11px !important; font-size: 14px !important; line-height: normal;
  background-color: var(--brand-bg-deep) !important; border-radius: var(--brand-radius-md) !important;
}
.tp-acc .tp-acc-code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important; letter-spacing: .12em; }
.tp-acc-inline { display: flex; gap: 8px; align-items: center; }
.tp-acc-inline input { flex: 1 1 auto; min-width: 0; }
.tp-acc-inline .tp-acc-btn { flex: none; }
.tp-acc-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--brand-text); cursor: pointer; }
.tp-acc-check input { width: 16px; height: 16px; margin: 0; }
.tp-acc-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.tp-acc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tp-acc-row--start { justify-content: flex-start; }
.tp-acc-row form { margin: 0; }
.tp-acc-link { color: var(--brand-info) !important; font-size: 13px; text-decoration: none; }
.tp-acc-link:hover { text-decoration: underline; }

/* buttons (override the generic gold `button` rule of site.css) */
.tp-acc .tp-acc-btn, .tp-acc-btn {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
  height: 36px; padding: 0 14px !important; margin: 0; width: auto;
  font: 700 13px/1 var(--brand-font-sans) !important; text-transform: none; letter-spacing: normal; text-decoration: none !important;
  color: var(--brand-text) !important; background: var(--brand-surface-3) !important;
  border: 1px solid var(--brand-border-strong) !important; border-radius: var(--brand-radius-md) !important;
  box-shadow: none !important; cursor: pointer; white-space: nowrap; transition: border-color .15s, filter .15s;
}
.tp-acc .tp-acc-btn:hover { border-color: var(--brand-accent-strong) !important; filter: none; }
.tp-acc .tp-acc-btn--primary { background: var(--brand-gradient-gold) !important; color: var(--brand-accent-contrast) !important; border-color: var(--brand-accent-strong) !important; }
.tp-acc .tp-acc-btn--primary:hover { filter: brightness(1.06); color: var(--brand-accent-contrast) !important; }
.tp-acc .tp-acc-btn--danger { color: var(--brand-danger-text) !important; background: rgb(var(--brand-danger-rgb) / .1) !important; border-color: rgb(var(--brand-danger-rgb) / .45) !important; }
.tp-acc .tp-acc-btn--ghost { background: transparent !important; border-color: transparent !important; color: var(--brand-text-muted) !important; }
.tp-acc .tp-acc-btn--ghost:hover { color: var(--brand-text) !important; border-color: var(--brand-border) !important; }
.tp-acc .tp-acc-btn--sm { height: 30px; padding: 0 10px !important; font-size: 12px !important; }
.tp-acc .tp-acc-btn--block { width: 100%; }
.tp-acc .tp-acc-btn.is-disabled, .tp-acc .tp-acc-btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.tp-acc .tp-acc-btn:focus-visible, .tp-acc summary:focus-visible, .tp-acc a:focus-visible, .tp-acc input:focus-visible, .tp-acc select:focus-visible {
  outline: 2px solid var(--brand-accent); outline-offset: 2px;
}

/* disclosure */
.tp-acc-details { display: grid; gap: 10px; }
.tp-acc-details > summary { list-style: none; justify-self: start; }
.tp-acc-details > summary::-webkit-details-marker { display: none; }
.tp-acc-details[open] > summary { border-color: var(--brand-accent-strong) !important; background: rgb(var(--brand-accent-rgb) / .12) !important; }
.tp-acc-details[open] > .tp-acc-form { padding: 12px; border-radius: var(--brand-radius-md); background: rgb(var(--brand-bg-rgb) / .55); border: 1px solid var(--brand-border); max-width: none; }
.tp-acc-details[open] > .tp-acc-form > * { max-width: 400px; }

/* trusted browsers */
.tp-acc-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; gap: 6px; }
.tp-acc-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px !important;
  border-radius: var(--brand-radius-md); background: rgb(var(--brand-bg-rgb) / .55); border: 1px solid var(--brand-border); }
.tp-acc-list li > div { display: grid; min-width: 0; }
.tp-acc-list strong { color: var(--brand-text); font-size: 13.5px; }
.tp-acc-list form { margin: 0; }

/* Recovery Key reveal */
.tp-acc-keypanel { display: grid; gap: 10px; }
.tp-acc-key { font: 700 clamp(17px, 4.6vw, 22px)/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; color: var(--brand-accent);
  text-align: center; padding: 14px 10px; border-radius: var(--brand-radius-md); background: var(--brand-bg-deep); border: 1px dashed var(--brand-accent-strong); overflow-wrap: anywhere; user-select: all; }

/* login code step */
.tp-acc--login { gap: 12px; }
.tp-acc--login .tp-acc-form { max-width: none; }
.tp-acc--login .tp-acc-form input { max-width: none !important; }
.tp-acc-login-title { font-size: 17px !important; }

/* EN/ES toggle (same look as premium.php) */
.tp-i18n:not([data-lang="es"]) [data-l="es"], .tp-i18n[data-lang="es"] [data-l="en"] { display: none !important; }
.tp-lang { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--brand-border); border-radius: 999px; background: rgb(0 0 0 / .25); }
.tp-acc .tp-lang__btn { display: inline-flex !important; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 6px !important; font: 700 11.5px/1 var(--brand-font-sans) !important;
  color: var(--brand-text-muted) !important; background: transparent !important; border: 1px solid transparent !important; border-radius: 999px !important; box-shadow: none !important; cursor: pointer; }
.tp-acc .tp-lang__btn[aria-pressed="true"] { color: var(--brand-text) !important; background: rgb(var(--brand-accent-rgb) / .16) !important; border-color: rgb(var(--brand-accent-rgb) / .55) !important; }
.tp-lang__flag { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / .35); flex: none; }

@media (min-width: 900px) {
  .tp-acc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-acc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .tp-acc-card { padding: 12px; }
  .tp-acc-inline { flex-wrap: wrap; }
  .tp-acc-inline .tp-acc-btn { width: 100%; }
}
@media print {
  body * { visibility: hidden !important; }
  .tp-acc-keypanel, .tp-acc-keypanel * { visibility: visible !important; }
  .tp-acc-keypanel { position: absolute; left: 0; top: 0; width: 100%; }
  .tp-acc-noprint { display: none !important; }
  .tp-acc-key { color: #000 !important; background: #fff !important; border-color: #000 !important; }
}

/* card header: status pill stays on the title row, top-right (long titles wrap inside the h2) */
.tp-acc-card__head { flex-wrap: nowrap; align-items: flex-start; }
.tp-acc-card__head h2 { min-width: 0; flex: 1 1 auto; }
.tp-acc-card__head .tp-acc-pill { flex: none; margin-top: 2px; }