.accounts-page { max-width: 960px; }
.accounts-page h1, .accounts-page h2, .accounts-page h3 { overflow-wrap: anywhere; }
.account-nav { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; }
.account-panel { background: #fff; border: 1px solid #e3e3e3; border-radius: 16px; padding: clamp(1rem, 3vw, 1.75rem); margin: 1.25rem 0; overflow-wrap: anywhere; }
.account-panel h2, .account-panel h3 { margin-top: 0; }
.accounts-page form { display: grid; gap: .8rem; margin: 1rem 0; max-width: 34rem; }
.accounts-page label { display: grid; gap: .35rem; }
.accounts-page input, .accounts-page select { box-sizing: border-box; width: 100%; min-width: 0; padding: .75rem; font: inherit; color: #0d043b; background: #fff; border: 1px solid #898898; border-radius: 8px; }
.accounts-page button { padding: .75rem 1rem; font: inherit; color: #fff; background: #0d043b; border: 1px solid #0d043b; border-radius: 8px; cursor: pointer; }
.accounts-page button.secondary { color: #0d043b; background: #e9e9e9; }
.accounts-page :focus-visible { outline: 3px solid #898898; outline-offset: 3px; }
.accounts-page .check-label { display: flex; align-items: center; gap: .6rem; min-height: 44px; }
.accounts-page .check-label input[type="checkbox"] { flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; min-width: 20px; padding: 0; margin: 0; accent-color: #0d043b; }
.account-error, .account-success { padding: 1rem; background: #fff; border: 2px solid #0d043b; border-radius: 8px; }
.account-error { border-color: #a42626; }
.setup-secret, .recovery-codes { padding: 1rem; background: #e9e9e9; overflow-wrap: anywhere; }
.recovery-codes { list-style: none; display: grid; gap: .6rem; }
.recovery-codes code { font-size: .9rem; }
.account-sessions { padding-left: 1.25rem; }
.accounts-page details { margin-top: 1rem; }
.accounts-page summary { cursor: pointer; font-weight: bold; }
.accounts-page [hidden] { display: none; }

/* Explicit, readable multiple role selection; prepared roles are disabled. */
.accounts-page .account-role-fieldset{border:1px solid #d5d3df;border-radius:10px;margin:14px 0;padding:12px;display:grid;gap:10px}
.accounts-page .account-role-fieldset legend{font-weight:700;padding:0 7px;color:#0d043b}
.accounts-page .account-role-option{display:flex;align-items:flex-start;gap:12px;margin:0;padding:8px 5px}
.accounts-page .account-role-option input{width:20px;height:20px;min-width:20px;margin:2px 0;accent-color:#0d043b}
.accounts-page .account-role-option small{display:block;color:#6c6b78;font-weight:400;line-height:1.5}
.accounts-page .account-role-option:has(input:disabled){opacity:.58}
.accounts-page .account-role-guide{display:grid;gap:6px}
.accounts-page .account-role-guide dt{font-weight:700;margin-top:10px}
.accounts-page .account-role-guide dd{margin:0;color:#666573;line-height:1.5}


/* Compact summaries; full controls are expanded only for the selected person. */
.account-user{padding:1rem;margin:.65rem 0;font-size:1rem;line-height:1.4}
.account-user h3{font-size:1.05rem;margin:0 0 .3rem}
.account-user>p{font-size:.9rem;margin:.25rem 0;color:#555463}
.accounts-page .account-user>.account-edit{margin-top:.5rem}
.account-edit>summary{min-height:44px;display:flex;align-items:center;color:#0d043b}
.account-edit>summary::before{content:'▸';margin-right:.5rem}
.account-edit[open]>summary::before{content:'▾'}
.accounts-page .account-role-fieldset{gap:0;padding:.5rem;margin:.5rem 0}
.accounts-page .account-role-option{min-height:44px;padding:.45rem;align-items:center;box-sizing:border-box;font-size:1rem}
.accounts-page .account-role-option input{flex:0 0 20px}
.accounts-page form.account-filters{max-width:none;grid-template-columns:2fr 1fr 1fr auto;align-items:end;gap:.6rem}
.account-pagination{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin:1rem 0}
.account-pagination a{padding:.6rem}
@media(max-width:600px){
 .accounts-page{padding:1rem}
 .accounts-page h1{font-size:1.8rem}
 .account-nav{gap:.6rem;font-size:.9rem}
 .accounts-page form.account-filters{grid-template-columns:1fr 1fr}
 .account-filters label:first-child{grid-column:1/-1}
 .account-filters button{grid-column:1/-1}
 .account-panel{border-radius:12px}
}

@media(max-width:600px){
 .accounts-body .topbar{padding-left:1rem;padding-right:1rem;flex-wrap:wrap}
 .accounts-body .topbar .brand{gap:.6rem}
 .accounts-body .topbar .brand img{width:44px;height:44px}
 .accounts-body .topbar .brand strong{font-size:1rem}
 .accounts-body .topbar .brand small{font-size:.7rem;margin-top:.25rem}
 .accounts-body .internal-header-back{font-size:.85rem}
}


.password-checklist{padding-left:0;list-style:none;display:grid;gap:.5rem;font-size:.95rem;line-height:1.45}
[data-password-fields]{display:grid;gap:.8rem;min-width:0}
[data-password-fields] p{margin:.25rem 0;line-height:1.5}
[data-password-status]:empty{display:none}
[data-password-status]{font-weight:700;color:#0d043b}

/* Role matrix: horizontal scrolling stays inside the table, including on small phones. */
.accounts-page form.account-filters{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}
.account-filters label:first-child{grid-column:span 2}
.account-filter-reset{min-height:44px;display:inline-flex;align-items:center;color:#0d043b}
.account-matrix-note{font-size:.9rem;line-height:1.5;color:#555463}
.account-matrix-scroll{max-width:100%;max-height:65vh;overflow:auto;overscroll-behavior-x:contain;border:1px solid #d5d3df;border-radius:12px;isolation:isolate;background:#fff;scrollbar-gutter:stable}
.account-matrix{border-spacing:0;width:100%;font-size:.875rem;color:#0d043b}
.account-matrix caption{text-align:left;padding:.8rem 1rem;background:#fff;font-weight:700}
.account-matrix th,.account-matrix td{padding:.7rem .6rem;border-bottom:1px solid #e3e3e3;border-right:1px solid #e3e3e3;text-align:center;min-width:6.5rem;box-sizing:border-box}
.account-matrix thead th{position:sticky;top:0;z-index:2;background:#e9e9e9;vertical-align:top;font-weight:700}
.account-matrix thead small{display:block;font-weight:400;font-size:.75rem;line-height:1.4;margin-top:.35rem}
.account-matrix .account-matrix-person{position:sticky;left:0;z-index:1;text-align:left;min-width:12rem;max-width:16rem;background:#fff;box-shadow:2px 0 0 #d5d3df}
.account-matrix thead .account-matrix-person{z-index:3;background:#e9e9e9}
.account-matrix-person a{display:inline-flex;align-items:center;min-height:44px;color:#0d043b;font-weight:700;overflow-wrap:anywhere}
.account-matrix-person small{display:block;font-weight:400;line-height:1.5;overflow-wrap:anywhere}
.account-matrix td{position:relative;background:#fff}
.account-matrix tr[data-active="0"] td,.account-matrix tr[data-active="0"] .account-matrix-person{background:#f3f3f3}
.account-matrix-mark{display:inline-flex;align-items:center;justify-content:center;min-width:1.8rem;height:1.8rem;border-radius:6px;font-weight:700}
.account-matrix-mark.is-direct{background:#0d043b;color:#fff}
.account-matrix-mark.is-admin{background:#e9e9e9;color:#0d043b;border:1px solid #898898}
.account-matrix-mark.is-none{color:#777582}
.account-matrix .account-matrix-empty{text-align:left;padding:1rem}
.account-user:target{outline:2px solid #898898;outline-offset:3px;scroll-margin-top:1rem}
.account-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:600px){
 .accounts-page form.account-filters{grid-template-columns:1fr 1fr}
 .account-filters label:first-child{grid-column:1/-1}
 .account-filter-reset{grid-column:1/-1;justify-content:center}
 .account-matrix .account-matrix-person{min-width:9rem;max-width:9rem;width:9rem}
 .account-matrix th,.account-matrix td{padding:.55rem .45rem;min-width:6rem}
}
.accounts-page .account-matrix-panel>summary{min-height:44px;padding:.6rem 0;line-height:1.4}