/* The account page (/jobs/account/). Builds on styles.css and legal.css. */

.acct { max-width: 860px; padding: clamp(1.6rem, 4vw, 2.6rem) 0 clamp(3rem, 6vw, 4.5rem); }
.acct__status { min-height: 1.5rem; margin: 0 0 1rem; font-weight: 600; color: var(--navy); }
.acct__status.is-error { color: #a12a2a; }
.acct__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.acct__card { border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem; display: grid; gap: .9rem; }
.acct__card h2 { font-size: 1.25rem; margin: 0; }
.acct__card p { margin: 0; color: var(--muted); }
.acct__form { display: grid; gap: .45rem; }
.acct__form label { font-size: .9rem; font-weight: 600; color: var(--navy); }
.acct__form input { font: inherit; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 10px; }
.acct__form button { justify-self: start; }
.acct__form--inline { max-width: 420px; margin-bottom: .8rem; }
.acct__check { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; color: var(--navy); margin-bottom: .2rem; }
.acct__check input { margin-top: .25rem; }
#create-form { display: grid; gap: .9rem; }
.acct__fine { font-size: .85rem; }
.acct__blocked { color: var(--navy) !important; }
.acct__section { padding: 1.4rem 0; border-top: 1px solid var(--line); }
.acct__section:first-child { border-top: 0; padding-top: 0; }
.acct__section h2.plain { margin-top: 0; }
.acct__list { list-style: none; padding: 0; margin: 0 0 .9rem; display: grid; gap: .6rem; }
.acct__list li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "main action" "sub action"; gap: .1rem 1rem; align-items: center; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 10px; }
.acct-row__main { grid-area: main; font-weight: 600; color: var(--navy); }
.acct-row__sub { grid-area: sub; font-size: .85rem; color: var(--muted); }
.acct__list .btn { grid-area: action; }
.acct__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.acct__danger { background: #a12a2a; color: #fff; border-color: #a12a2a; }
.acct__danger:hover { background: #861f1f; }
@media (max-width: 720px) { .acct__grid { grid-template-columns: 1fr; } }