/************* Settings *************/

/* The settings page (account/profile/index.html, assets/js/account/settings.js):
   four sections of label / value / action rows. A row's form opens in place
   under it (.editing), and a save shows "Saved" beside the new value. */
#settings {
}

#settingsTitle {
}

.settingsSection {
    margin-top: 48px;
    scroll-margin-top: 88px;
}

#settingsAccount {
    margin-top: 40px;
}

.settingsSectionTitle {
    margin-bottom: 8px;
}

.settingsSectionList {
    border-bottom: 1px solid var(--hairline);
}

/* label, value (with its note), action; the form spans the row under them */
.settingsSectionListRow {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) auto;
    gap: 0 24px;
    align-items: center;
    padding: 18px 0;
    border-top: 1px solid var(--hairline);
}

.settingsSectionListRowLabel {
    font-size: 15px;
    font-weight: 600;
}

.settingsSectionListRowMain {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.settingsSectionListRowMainValue {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
}

/* "Saved", green with a tick, for a few seconds after a change */
.settingsSectionListRowMainValueSaved {
    display: none;
    align-items: center;
    gap: 4px;
    color: var(--positive);
    font-size: var(--font-size-meta);
    font-weight: 700;
}

.settingsSectionListRowMainValueSaved.active {
    display: inline-flex;
}

.settingsSectionListRowMainValueSaved.active::before {
    content: "";
    width: 12px;
    height: 7px;
    margin-top: -3px;
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(-45deg);
}

.settingsSectionListRowMainNote {
    color: var(--muted);
    font-size: var(--font-size-meta);
    line-height: 1.5;
}

/* the plain status on a row with nothing to change ("Always on") */
.settingsSectionListRowStatus {
    color: var(--muted);
    font-size: var(--font-size-meta);
}

.settingsSectionListRowEdit {
}

.settingsSectionListRow.editing .settingsSectionListRowEdit {
    visibility: hidden;
}

/* the in-place form, full width under the row */
.settingsSectionListRowForm {
    display: none;
    grid-column: 1 / -1;
    max-width: 520px;
    margin-top: 16px;
}

.settingsSectionListRow.editing .settingsSectionListRowForm {
    display: block;
}

.settingsSectionListRowFormField {
}

.settingsSectionListRowFormHint {
    margin-top: 6px;
    color: var(--muted);
    font-size: var(--font-size-meta);
}

.settingsSectionListRowFormError {
}

.settingsSectionListRowFormError:empty {
    display: none;
}

.settingsSectionListRowFormButtons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

/************* Account *************/

#settingsAccountEmail {
}

#settingsAccountPassword {
}

#settingsAccountPasswordFormFields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.settingsAccountPasswordFormFieldsItem {
}

/************* Notifications *************/

#settingsNotificationsSms {
}

#settingsNotificationsSmsUpgrade {
    display: none;
}

#settingsNotificationsSmsUpgrade.active {
    display: flex;
}

#settingsNotificationsSmsFormOptIn {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}

#settingsNotificationsSmsFormOptInBox {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    accent-color: var(--primary);
}

#settingsNotificationsSmsFormOptInText {
}

#settingsNotificationsSmsFormDisclosure {
    margin-top: 10px;
    color: var(--muted);
    font-size: var(--font-size-meta);
    line-height: 1.5;
}

.settingsNotificationsSmsFormDisclosureLink {
    color: var(--primary);
    text-decoration: underline;
}

#settingsNotificationsUsage {
    display: none;
}

#settingsNotificationsUsage.active {
    display: grid;
}

/************* Ships to and currency *************/

.settingsRegionChange {
}

/************* Plan and billing *************/

/* a cancelled Pro that is still running */
#settingsBillingBanner {
    display: none;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding: 16px 20px;
    border: 1px solid var(--tint-border);
    border-radius: var(--radius-card);
    background-color: var(--tint);
}

#settingsBillingBanner.active {
    display: flex;
}

#settingsBillingBannerText {
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
}

#settingsBillingPlanNoteLink {
    color: var(--primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#settingsBillingPlanUpgrade {
}

#settingsBillingPlanSwitch {
}

/* Pro's two prices, opened by Upgrade */
#settingsBillingUpgrade {
    display: none;
    grid-column: 1 / -1;
    margin-top: 16px;
    padding: 16px 20px;
    border-radius: var(--radius-card);
    background-color: var(--surface);
}

#settingsBillingUpgrade.active {
    display: block;
}

#settingsBillingUpgradeTitle {
    font-size: 15px;
    line-height: 1.5;
}

#settingsBillingUpgradeOptions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

#settingsBillingManage {
    display: none;
    margin-top: 16px;
}

#settingsBillingManage.active {
    display: flex;
}

#settingsBillingError:empty {
    display: none;
}

#settingsBillingNote {
    margin-top: 10px;
    color: var(--muted);
    font-size: var(--font-size-meta);
}

#settingsFooter {
    margin-top: 32px;
    color: var(--muted);
    font-size: var(--font-size-meta);
}

#settingsFooterLink {
    color: var(--primary);
    font-weight: 700;
    text-decoration: underline;
}

/************* Phone *************/

@media (max-width: 800px) {
    .settingsSection {
        margin-top: 40px;
        scroll-margin-top: 72px;
    }

    #settingsAccount {
        margin-top: 28px;
    }

    /* label over value, the action beside the value */
    .settingsSectionListRow {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 16px;
        padding: 16px 0;
    }

    .settingsSectionListRowLabel {
        grid-column: 1 / -1;
        color: var(--muted);
        font-size: 14px;
    }

    #settingsAccountPasswordFormFields {
        grid-template-columns: minmax(0, 1fr);
    }

    #settingsBillingBanner {
        flex-direction: column;
        align-items: stretch;
    }
}