/* Sign in, sign up and password reset (BR Stage 3, PR 1: ModalsAccount, OtherPages). The window frame is the
   Stage 1 .ci-dialog: 480px centred, a sheet from the bottom on a phone. */
.ci-auth { overflow-y: auto; }
.ci-auth h1 { margin: 0 0 var(--ci-s3); font: var(--ci-h2); }
.ci-auth__lead { color: var(--ci-muted); }
.ci-auth__form { display: flex; flex-direction: column; gap: var(--ci-s1); }
.ci-auth__form .ci-field-label { margin-top: var(--ci-s3); }
.ci-auth__form .ci-field { width: 100%; }
.ci-field-label { font: var(--ci-small); font-weight: 600; }
.ci-field-hint { margin: var(--ci-s1) 0 0; font: var(--ci-small); color: var(--ci-muted); }
.ci-auth__secret { position: relative; }
.ci-auth__secret .ci-field { padding-right: 72px; }
.ci-auth__show {
    position: absolute;
    top: 50%;
    right: var(--ci-s2);
    transform: translateY(-50%);
    min-height: 32px;
    padding: 0 var(--ci-s2);
    border: 0;
    background: transparent;
    color: var(--ci-forest);
    font: 600 13px/1 var(--ci-sans);
    cursor: pointer;
}
.ci-auth__aside { margin: var(--ci-s2) 0 0; font: var(--ci-small); }
.ci-auth__main { width: 100%; margin-top: var(--ci-s4); }
.ci-auth__captcha { margin-top: var(--ci-s4); min-height: 78px; }
.ci-auth__banner {
    margin: 0 0 var(--ci-s2);
    padding: var(--ci-s3);
    border-radius: var(--ci-r-field);
    background: var(--ci-error-tint);
    color: var(--ci-error-text);
    font: var(--ci-small);
}
.ci-auth__or { display: flex; align-items: center; gap: var(--ci-s3); margin: var(--ci-s5) 0 var(--ci-s3); color: var(--ci-muted); font: var(--ci-small); }
.ci-auth__or + .ci-auth__main { margin-top: 0; }
.ci-auth__or::before, .ci-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--ci-line); }
.ci-auth__switch { margin: var(--ci-s4) 0 0; text-align: center; font: var(--ci-small); }
.ci-auth__small { margin: var(--ci-s3) 0 0; font: var(--ci-small); color: var(--ci-muted); }
.ci-auth button.ci-link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.ci-auth button.ci-link:disabled { color: var(--ci-muted); cursor: default; text-decoration: none; }
.ci-auth__done { text-align: center; }
.ci-auth__done .ci-dialog__actions { justify-content: center; }
.ci-auth__tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--ci-s3);
    border-radius: 50%;
    background: var(--ci-moss);
    color: var(--ci-forest);
    font: 600 24px/1 var(--ci-sans);
}
.ci-auth__tick .ci-icon { width: 28px; height: 28px; }
.ci-auth__tick--error { background: var(--ci-error-tint); color: var(--ci-error-text); }

.ci-auth-page {
    display: flex;
    justify-content: center;
    padding: var(--ci-s8) var(--ci-gutter);
    background: var(--ci-paper);
    min-height: 60vh;
}
.ci-auth-card {
    width: min(480px, 100%);
    padding: var(--ci-s6) var(--ci-s5) var(--ci-s5);
    border: 1px solid var(--ci-line);
    border-radius: var(--ci-r-panel);
    background: var(--ci-white);
    align-self: flex-start;
}
@media (max-width: 599px) {
    .ci-auth-page { padding-top: var(--ci-s5); }
}

/* Paywall and payment results (BR Stage 3, PR 2: ModalsPaywall, OtherPages) */
.ci-pay__project { margin: 0 var(--ci-s6) var(--ci-s2) 0; font: var(--ci-small); color: var(--ci-muted); }
.ci-pay__benefits { margin: var(--ci-s3) 0; padding: 0; list-style: none; }
.ci-pay__benefits li { display: flex; gap: var(--ci-s2); align-items: flex-start; margin: 0 0 var(--ci-s2); }
.ci-pay__benefits .ci-icon { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--ci-forest); }
.ci-pay__credits { font-weight: 600; }
.ci-pay__choices .ci-auth__main + .ci-auth__main { margin-top: var(--ci-s2); }
.ci-pay__google { margin-top: var(--ci-s2); }
.ci-pay__facts { display: grid; gap: var(--ci-s2); margin: var(--ci-s4) 0; padding: var(--ci-s3) var(--ci-s4);
    border-radius: var(--ci-r-field); background: var(--ci-paper); text-align: left; }
.ci-pay__facts div { display: flex; justify-content: space-between; gap: var(--ci-s3); }
.ci-pay__facts dt { color: var(--ci-muted); }
.ci-pay__facts dd { margin: 0; font-weight: 600; }

/* The account page (BR Stage 3, PR 3: Account board, six tabs) */
body:has(.ci-account) { background: var(--ci-paper); } /* the Account board's paper, as on About and the chat page */
.ci-account { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--ci-s6); align-items: start;
    max-width: calc(var(--ci-content) + 2 * var(--ci-gutter)); margin: 0 auto; padding: var(--ci-s6) var(--ci-gutter) var(--ci-s8); }
.ci-account h1 { margin: 0 0 var(--ci-s4); font: var(--ci-h2); }
.ci-account h2 { margin: 0; font: var(--ci-h3); }
.ci-account__menu { position: sticky; top: var(--ci-s4); display: grid; gap: var(--ci-s4); padding: var(--ci-s4);
    border: 1px solid var(--ci-line); border-radius: var(--ci-r-panel); background: var(--ci-surface); }
.ci-account__me { display: flex; gap: var(--ci-s3); align-items: center; min-width: 0; }
.ci-account__me div { display: grid; min-width: 0; }
.ci-account__me span:not(.ci-avatar) { overflow: hidden; text-overflow: ellipsis; color: var(--ci-muted); font: var(--ci-small); }
.ci-avatar--large { width: 44px; height: 44px; overflow: hidden; }
.ci-avatar--large img { width: 100%; height: 100%; object-fit: cover; }
.ci-account__tabs { display: grid; gap: 2px; }
.ci-account__tabs button { display: flex; justify-content: space-between; align-items: center; min-height: var(--ci-tap);
    padding: 0 var(--ci-s3); border: 0; border-radius: var(--ci-r-field); background: none; color: var(--ci-ink);
    font: 500 15px/1.2 var(--ci-sans); text-align: left; cursor: pointer; }
.ci-account__tabs button span { color: var(--ci-muted); font-size: 13px; }
.ci-account__tabs button:hover { background: var(--ci-paper); }
.ci-account__tabs button[aria-selected="true"] { background: var(--ci-moss); color: var(--ci-forest); font-weight: 600; }
.ci-account__tabs button:focus-visible { outline: none; box-shadow: var(--ci-focus-ring); }
.ci-account__foot { display: grid; gap: var(--ci-s1); padding-top: var(--ci-s3); border-top: 1px solid var(--ci-line); font: var(--ci-small); }
.ci-account__foot small { color: var(--ci-muted); }
.ci-account__foot button.ci-link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.ci-account__body section { display: grid; gap: var(--ci-s4); }
.ci-acc-card, .ci-acc-block { padding: var(--ci-s5); border: 1px solid var(--ci-line); border-radius: var(--ci-r-panel); background: var(--ci-surface); }
.ci-acc-card { display: grid; gap: var(--ci-s3); }
.ci-acc-card__head, .ci-acc-block__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ci-s3); flex-wrap: wrap; }
.ci-acc-block__head { margin-bottom: var(--ci-s3); }
.ci-acc-block__head button.ci-link, .ci-acc-actions button.ci-link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.ci-acc-card__actions { display: flex; flex-wrap: wrap; gap: var(--ci-s2); }
.ci-acc-card .ci-auth__form .ci-btn { justify-self: start; margin-top: var(--ci-s3); }
.ci-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ci-s4); }
.ci-meter__head { display: flex; justify-content: space-between; gap: var(--ci-s2); font: var(--ci-small); }
.ci-meter__bar { height: 8px; margin: var(--ci-s2) 0 0; border-radius: var(--ci-r-pill); background: var(--ci-paper); overflow: hidden; }
.ci-meter__bar span { display: block; height: 100%; background: var(--ci-forest); }
.ci-meter--low .ci-meter__bar span { background: var(--ci-clay); }
.ci-meter--low .ci-meter__head strong { color: var(--ci-clay-ink); }
.ci-acc-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ci-s2) var(--ci-s3); padding: var(--ci-s3) 0; border-top: 1px solid var(--ci-line); }
.ci-acc-row:first-of-type { border-top: 0; }
.ci-acc-row__main { flex: 1 1 260px; min-width: 0; }
.ci-acc-row h3 { margin: 0; font: 600 16px/1.3 var(--ci-sans); }
.ci-acc-row__q { flex-basis: 100%; }
.ci-acc-row__q summary { cursor: pointer; color: var(--ci-forest); font: var(--ci-small); font-weight: 600; }
.ci-acc-row__q ul { margin: var(--ci-s2) 0; padding-left: var(--ci-s4); }
.ci-acc-list { margin: 0; padding: 0; list-style: none; }
.ci-acc-list li { display: flex; justify-content: space-between; gap: var(--ci-s3); padding: var(--ci-s2) 0; border-top: 1px solid var(--ci-line); }
.ci-acc-list li:first-child { border-top: 0; }
.ci-acc-list li span:last-child { color: var(--ci-muted); font: var(--ci-small); }
.ci-acc-plan { display: flex; gap: var(--ci-s4); padding: var(--ci-s4); border: 1px solid var(--ci-line); border-radius: var(--ci-r-field); background: var(--ci-white); }
.ci-acc-plan__sum { flex: none; min-width: 88px; font: var(--ci-h3); color: var(--ci-forest); }
.ci-acc-plan h3 { margin: 0; font: 600 16px/1.3 var(--ci-sans); }
.ci-acc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ci-s2); margin: var(--ci-s2) 0 0; }
.ci-acc-ask { margin: 0; }
.ci-field--file { padding-top: 10px; }
.ci-btn--danger { border-color: var(--ci-error-text); color: var(--ci-error-text); }
.ci-btn--danger:hover { background: var(--ci-error-tint); color: var(--ci-error-text); }
.ci-pay__options { display: grid; gap: var(--ci-s2); margin: var(--ci-s3) 0; padding: 0; border: 0; }
.ci-pay__option { display: flex; gap: var(--ci-s3); align-items: flex-start; padding: var(--ci-s3); border: 1px solid var(--ci-line);
    border-radius: var(--ci-r-field); cursor: pointer; }
.ci-pay__option span { display: grid; gap: 2px; }
.ci-pay__option:has(input:checked) { border-color: var(--ci-forest); background: var(--ci-moss); }
@media (max-width: 899px) {
    .ci-account { grid-template-columns: minmax(0, 1fr); padding-top: var(--ci-s4); }
    .ci-account__menu { position: static; }
    .ci-account__tabs { display: flex; overflow-x: auto; gap: var(--ci-s1); }
    .ci-account__tabs button { flex: none; gap: var(--ci-s2); }
}
.ci-acc-row h3 a, .ci-acc-list a { color: var(--ci-ink); text-decoration: none; }
.ci-acc-row h3 a:hover, .ci-acc-list a:hover { color: var(--ci-forest); text-decoration: underline; }
.ci-acc-card .ci-auth__form .ci-btn { align-self: flex-start; }
.ci-account button.ci-link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.ci-account .ci-chip[aria-current="true"] { background: var(--ci-forest); color: var(--ci-white); }
.ci-account__me strong, .ci-account__me span { overflow-wrap: anywhere; }