:root{--error:#a3262d;--error-soft:#fdf1f1;--warning:#b45309;--warning-soft:#fffbeb;--warning-border:#fbbf24;--control-border:#c9d3da}
.account-main{display:block;flex:none;background:transparent;padding:48px 24px 64px}
.account-main:focus{outline:0}
.account-card{max-width:460px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:32px}
.account-card h1{margin:0 0 24px}
.account-text{margin:0 0 24px;font-size:18px}
.field{margin:0 0 24px}
.field label{display:block;margin-bottom:8px;font-size:18px;font-weight:600}
.field input{display:block;width:100%;min-height:56px;padding:12px 16px;font-size:20px;background:var(--paper);border:1px solid var(--control-border);border-radius:var(--radius)}
.field input[aria-invalid="true"]{border:2px solid var(--error)}
.field-hint{margin:0 0 10px;color:var(--muted);font-size:16px}
.field-error{margin:8px 0 0;color:var(--error);font-size:17px;font-weight:600}
.show-password{margin-top:12px;font-size:16px}
.account-submit{width:100%;min-height:56px;font-size:20px}
a.button,a.primary-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid transparent;border-radius:var(--radius);text-decoration:none;transition:background-color 160ms ease-out}
a.button{border-color:var(--control-border);color:var(--ink)}
a.button:hover{background:var(--accent-soft)}
a.primary-button{color:white}
a.primary-button:hover{background:var(--accent-hover)}

.manage-page{max-width:1040px;margin:0 auto}
.manage-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px;margin-bottom:24px}
.manage-heading h1{margin:0}
.manage-heading span{color:var(--muted);font-size:18px}
.manage-heading .button{margin-left:auto;padding:8px 14px;font-weight:600}
.workspace-switch{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.workspace-switch .button{padding:8px 14px;border-width:2px}
/* The chosen workspace is told apart by border and weight, not by colour alone. */
.workspace-switch [aria-current]{background:var(--current-nav);border-color:var(--accent);color:var(--accent);font-weight:700}
.add-form{display:grid;grid-template-columns:1fr 1fr auto;gap:8px 16px;align-items:start;margin-bottom:24px;padding:20px 24px 24px;background:var(--paper);border:1px solid var(--line);border-radius:8px}
.add-form h2{grid-column:1/-1;margin:0 0 4px;font-size:19px}
:is(.add-form,.row-actions) .field{margin:0}
:is(.add-form,.row-actions) .field label{font-size:15px}
:is(.add-form,.row-actions) .field :is(input,select){min-height:48px;padding:10px 12px;font-size:17px}
.field select{display:block;width:100%;background:var(--paper);border:1px solid var(--control-border);border-radius:var(--radius)}
.field select[aria-invalid="true"]{border:2px solid var(--error)}
.add-form .field-error{font-size:15px}
.add-form .primary-button{min-height:48px;margin-top:31px}
/* The name and address of a new teacher start their own row and show only when a new
   teacher is chosen. Without :has() they simply stay visible. */
.workspace-form .new-teacher{grid-column:1}
.workspace-form .new-teacher+.new-teacher{grid-column:2}
.workspace-form:has(select[name="teacher"] option:not([value="new"]):checked) .new-teacher{display:none}
.notice-line{margin:0 0 16px;padding:12px 16px;background:var(--accent-soft);border:1px solid var(--line);border-radius:var(--radius)}
.notice-line.error{background:var(--error-soft);border-color:var(--error);color:var(--error);font-weight:600}
.account-table{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line)}
.account-table th,.account-table td{padding:12px 16px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line)}
.account-table thead th{color:var(--muted);font-size:14px;font-weight:600}
.account-table tbody th{font-weight:600;overflow-wrap:break-word}
/* An address or a long name may break anywhere; a state and a count keep their words whole. */
.account-table .breakable{overflow-wrap:anywhere}
.account-table .count{white-space:nowrap}
.row-detail{display:block;color:var(--muted);font-size:14px}
.invitation-state.not_sent{color:var(--error);font-weight:600}
.invitation-state.invited{color:var(--muted)}
.row-actions{display:flex;justify-content:flex-end;gap:8px;white-space:nowrap}
.row-actions>form{margin:0}
.row-actions dialog{white-space:normal}
.row-actions dialog h2{margin:0 0 12px;font-size:19px}
.row-actions dialog p{margin:0;font-size:16px}
.list-empty{margin:0;padding:24px;color:var(--muted);background:var(--paper);border:1px solid var(--line)}
/* Three actions beside four columns need a second line before the table needs a scrollbar. */
@media(max-width:1100px){.row-actions{flex-wrap:wrap}}
@media(max-width:1100px){
 .header-actions .account-link+.account-link{display:inline-flex}
}
@media(max-width:760px){
 .account-main{padding:24px 16px 48px}.account-card{padding:24px 20px}
 .app-header{gap:8px}.header-actions{gap:2px}
 .header-actions .account-link{padding:4px 2px;font-size:12px}
 .header-actions .sign-out{display:flex}
 .add-form{grid-template-columns:1fr}.add-form .primary-button{margin-top:4px}
 .workspace-form .new-teacher+.new-teacher{grid-column:1}
 .account-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .account-table tr{display:block;padding:12px 16px;border-bottom:1px solid var(--line)}
 .account-table tbody th,.account-table td{display:block;padding:2px 0;border:0}
 .row-actions{flex-wrap:wrap;justify-content:flex-start;padding-top:10px}
}