/*
 * The musolli's pages: sign in (W15), asking to be a member, their account (M8 on the website), the salat log and
 * deleting it.
 * Loaded after fund.css, whose .caption, .strong, .narrow and .btn-block these pages share.
 */

.account-page {
    display: grid;
    gap: var(--space-4);
    padding-block: var(--space-5) var(--space-7);
}

.account-kicker {
    color: var(--color-accent);
    font: 600 14px/22px var(--font-ui);
}

.account-kicker a {
    color: inherit;
    text-decoration: none;
}

.account-title {
    font: var(--text-headline);
    text-wrap: balance;
}

.account-page > .account-title + .caption {
    margin-top: calc(var(--space-3) * -1);
}

.account-reasons {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--color-line);
}

.account-reasons li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-line);
}

.account-reasons .icon {
    margin-top: 2px;
    color: var(--color-ink-muted);
}

.account-fine {
    margin-top: calc(var(--space-2) * -1);
}

.account-dev {
    margin-top: var(--space-5);
    padding: var(--space-4);
    border: 1px dashed var(--color-control);
    border-radius: var(--radius-sm);
}

.account-form .chips + .field-help {
    display: block;
    margin-top: var(--space-3);
}

.account-form .chips + .field-help + .input {
    margin-top: var(--space-1);
}

.account-facts {
    margin: 0;
    border-top: 1px solid var(--color-line);
}

.account-facts > div {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--space-3);
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--color-line);
}

.account-facts dt {
    color: var(--color-ink-muted);
    font: var(--text-caption);
}

.account-facts dd {
    margin: 0;
}

.account-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-line);
}

.avatar-lg {
    width: 56px;
    height: 56px;
    font: 600 18px/1 var(--font-ui);
}

.account-name {
    font: var(--text-title);
}

.account-section {
    display: grid;
    gap: var(--space-2);
}

.account-h2 {
    font: 600 18px/28px var(--font-ui);
}

.account-section .rows > li > a.row-main {
    color: inherit;
    text-decoration: none;
}

.account-section .row-title a {
    color: inherit;
    text-decoration: none;
}

.account-aside {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
}

.account-link {
    flex: none;
    font: 600 14px/22px var(--font-ui);
}

.account-amount {
    flex: none;
    font: 600 16px/24px var(--font-ui);
    font-variant-numeric: var(--numeric);
}

.is-voided .row-title,
.is-voided .account-link {
    flex: none;
    font: 600 14px/22px var(--font-ui);
}

.account-amount {
    color: var(--color-ink-muted);
    text-decoration: line-through;
}

.account-inline {
    display: inline;
}

.btn-small {
    min-height: 40px;
    padding: 0 var(--space-2);
    font: 600 14px/22px var(--font-ui);
}

.account-list {
    margin: 0;
    padding-left: var(--space-5);
}

.account-list li + li {
    margin-top: var(--space-1);
}

.account-delete {
    margin-top: var(--space-3);
}

.push-panel {
    padding-block: var(--space-2);
}

.caption.block {
    display: block;
}

/* The salat log: a day's five prayers, and the mosque chosen for one */
.salat-cells {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-block: 1px solid var(--color-line);
}

.salat-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: 64px;
    padding: var(--space-2) 0;
    color: var(--color-ink-muted);
    font: var(--text-caption);
    text-decoration: none;
}

.salat-cell + .salat-cell {
    border-inline-start: 1px solid var(--color-line);
}

.salat-cell.is-done {
    background: var(--color-accent-soft);
    color: var(--color-ink);
    font-weight: 600;
}

.salat-cell.is-locked {
    cursor: default;
}

.salat-opens {
    color: var(--color-ink-muted);
    font: var(--text-caption);
    font-variant-numeric: var(--numeric);
}

.salat-mark {
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-control);
    border-radius: 50%;
}

.salat-cell .icon {
    width: 20px;
    height: 20px;
    color: var(--color-accent);
}

.salat-month {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.salat-month a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    color: var(--color-ink);
}

.salat-month a[aria-disabled] {
    visibility: hidden;
}

.salat-day {
    display: grid;
    gap: var(--space-1);
}

.salat-days {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.salat-choices {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--color-line);
}

.salat-choice {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 64px;
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--color-line);
    cursor: pointer;
}

.salat-choice input {
    flex: none;
    width: 20px;
    height: 20px;
    accent-color: var(--color-accent);
}

.salat-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.salat-search {
    display: flex;
    gap: var(--space-2);
}

.salat-search .input {
    flex: 1;
    min-width: 0;
}

.account-count {
    flex: none;
    font: 600 16px/24px var(--font-ui);
    font-variant-numeric: var(--numeric);
}

.row-title.block {
    display: block;
}