/* Montiliya — account pieces (batch 4): the signed-out screen (introduction, language, show / hide, field errors, a lost access code), the support contact, the guide (dialog and
   first-time card), the settings additions, the billing warning on every screen and the billing additions. Only the tokens of css/styles.css: black and white, dark and light, RTL. */

/* ---- the signed-out screen */
.signin-wrap { margin: auto; width: 100%; max-width: 920px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); grid-template-areas: 'lang lang' 'intro card'; gap: var(--s6) var(--s10); align-items: center; }
.signin-wrap .signin-card { grid-area: card; margin: 0; }
.signin-lang { grid-area: lang; justify-self: end; width: auto; }
.signin-lang .seg-opt { min-height: 36px; padding-inline: var(--s4); }
.signin-intro { grid-area: intro; display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.signin-intro h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 650; letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance; }
.signin-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.signin-steps li { display: flex; align-items: flex-start; gap: var(--s3); color: var(--ink-2); font-size: var(--fs-lg); line-height: 1.45; }
.signin-steps .icon { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--ink); }
.field label { color: var(--ink-2); }
.field-err { margin: 0; color: var(--danger); font-size: var(--fs-sm); line-height: 1.4; }
.field input[aria-invalid='true'] { border-color: var(--danger); }
.pw { position: relative; display: flex; direction: ltr; }     /* the code is left to right in both languages: its toggle sits at the end of the text (right), never over it */
.pw input { flex: 1; min-width: 0; padding-inline-end: 52px; }
.pw-toggle { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; }
.pw-toggle[aria-pressed='true'] { color: var(--ink); }
.pw-toggle[aria-pressed='true']::after { content: ''; position: absolute; width: 22px; height: 2px; background: currentColor; transform: rotate(-45deg); border-radius: 2px; }
.signin-link { align-self: center; min-height: 44px; padding-inline: var(--s3); border-radius: var(--r-full); color: var(--ink-2); font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; }
.signin-link:hover { color: var(--ink); }
.signin-lost { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--panel); font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.signin-lost[hidden] { display: none; }
.signin-lost-h { margin: 0; font-size: var(--fs-md); font-weight: 650; color: var(--ink); }
.signin-lost p { margin: 0; }
#signin-btn[aria-busy='true'] { cursor: progress; }
@media (max-width: 760px) {
  .signin { padding: var(--s4); }
  .signin-wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'lang' 'intro' 'card'; gap: var(--s4); align-items: stretch; }
  .signin-wrap .signin-card { width: 100%; max-width: 480px; justify-self: center; padding: var(--s6) var(--s5); }
  .signin-intro { max-width: 480px; width: 100%; justify-self: center; gap: var(--s3); }
  .signin-intro h2 { font-size: var(--fs-xl); }
  .signin-steps li { font-size: var(--fs-md); }
}

/* ---- the support contact */
.sup { display: flex; flex-direction: column; gap: var(--s2); }
.sup-line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); font-size: var(--fs-sm); color: var(--ink-3); }
.sup-addr { color: var(--ink); font-weight: 600; user-select: all; overflow-wrap: anywhere; }
.sup-acts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sup-acts .btn { min-height: 40px; }
.sup-none { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.prof-support:empty { display: none; }

/* ---- the guide: the dialog (Help) and the first-time card (step 1) */
#acct-dlg { width: min(560px, calc(100vw - 32px)); }
.ad-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-full); background: var(--panel-3); color: var(--ink); }
.ad-ic .icon { width: 22px; height: 22px; }
.guide-list { margin: var(--s5) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s4); }
.guide-list li { display: flex; gap: var(--s3); align-items: flex-start; }
.g-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-md); border: 1px solid var(--line-strong); color: var(--ink); }
.g-ic .icon { width: 18px; height: 18px; }
.guide-list strong { display: block; font-size: var(--fs-md); }
.guide-list p { margin: var(--s1) 0 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.guide-help { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s2); }
.guide-help h3 { margin: 0; font-size: var(--fs-md); }
.guide-help p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
#acct-dlg .sup { margin-top: var(--s4); }
#acct-dlg .guide-help .sup { margin-top: 0; }
.cr-guide[hidden] { display: none; }
.gcard { margin: 0 auto var(--s4); width: 100%; max-width: 880px; padding: var(--s4) var(--s5); border: 1px solid var(--line-strong); border-radius: var(--r-xl); background: var(--panel-2); }
.gcard-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.gcard h2 { margin: 0; font-size: var(--fs-lg); font-weight: 650; }
.gcard-x { flex: none; }
.gcard-list { margin: var(--s3) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s5); }
.gcard-list li { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.45; }
.gcard-list .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ink); }
.gcard-acts { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s2); }
.gcard-acts .btn { min-height: 40px; }
@media (max-width: 640px) { .gcard { padding: var(--s3) var(--s4); } .gcard-list { grid-template-columns: minmax(0, 1fr); } }

/* ---- the billing warning on every screen (a failed renewal, a paused plan, a payment being confirmed) */
.bill-alert { flex: none; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s2) var(--s3); padding: var(--s2) var(--s4); border-block: 1px solid var(--line-strong); background: var(--panel-2); color: var(--ink); font-size: var(--fs-sm); line-height: 1.4; }
.bill-alert[hidden] { display: none; }
.bill-alert.danger { border-color: var(--danger); background: var(--danger-bg); }
.bill-alert.danger > .icon { color: var(--danger); }
.bill-alert span { min-width: 0; text-align: center; }
.ba-act { flex: none; min-height: 32px; padding-inline: var(--s3); border-radius: var(--r-full); background: var(--ink); color: var(--on-ink); font-weight: 600; font-size: var(--fs-sm); }
.ba-x { flex: none; width: 32px; height: 32px; }
@media (pointer: coarse) { .ba-act, .ba-x { min-height: 44px; } .ba-x { width: 44px; } }

/* ---- billing additions */
.bs-parts-note { margin: var(--s2) 0 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.bs-view { min-height: 32px; padding-inline: var(--s3); font-size: var(--fs-sm); }
.bs-view[aria-busy='true'] { cursor: progress; }
.bd-ph { margin: var(--s3) 0 0; }
.bd-k { margin: var(--s4) 0 var(--s2); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.bd-plans ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s2); }
.bd-plans li { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--ink-2); }
.bd-plans strong { color: var(--ink); }
.bd-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); overflow-wrap: anywhere; user-select: all; }