/* Sign-in, message and dashboard pages. Loaded after style.css. */
[hidden] { display: none !important; } /* keep `hidden` working on elements styled with display */
.user-bar {
	display: flex; justify-content: flex-end; align-items: center; gap: 1rem;
	padding: 0.375rem 1rem; font-size: 0.875rem; color: #374151;
	background: #eff6ff; border-bottom: 1px solid #dbeafe;
}
.user-bar a, .link-btn { color: #1d4ed8; font-weight: 500; }
.user-bar a:hover, .link-btn:hover { text-decoration: underline; }

.acct-card {
	background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem;
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .08);
	padding: 1.75rem; margin: 3rem auto; width: min(26rem, calc(100% - 2rem));
}
.acct-card.wide { width: min(40rem, calc(100% - 2rem)); }
.acct-card h1 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #111827; }
.acct-card .sub { color: #6b7280; font-size: 0.875rem; margin: 0.25rem 0 1.25rem; }

.tabs { display: flex; gap: 0.25rem; background: #f3f4f6; border-radius: 0.5rem; padding: 0.25rem; margin-bottom: 1.25rem; }
.tabs button { flex: 1; padding: 0.5rem; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; color: #4b5563; }
.tabs button[aria-selected='true'] { background: #fff; color: #111827; box-shadow: 0 1px 2px rgb(0 0 0 / .08); }

.field { display: block; margin-bottom: 1rem; }
.field > span { display: block; font-size: 0.875rem; font-weight: 500; color: #111827; margin-bottom: 0.375rem; }
.field input, .field textarea, .search {
	width: 100%; padding: 0.625rem 0.75rem; font: inherit; font-size: 0.9375rem; color: #111827;
	background: #f9fafb; border: 1px solid #d1d5db; border-radius: 0.5rem;
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus, .search:focus { outline: 2px solid #3b82f6; outline-offset: -1px; background: #fff; }
.field .hint { display: block; font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem; }

.form-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.counter { font-size: 0.75rem; color: #6b7280; }
.counter.over { color: #b91c1c; font-weight: 600; }

.status { min-height: 1.25rem; font-size: 0.875rem; margin-top: 0.75rem; }
.status.error { color: #b91c1c; }
.status.ok { color: #047857; }

/* dashboard */
.dash { width: min(64rem, calc(100% - 2rem)); margin: 2rem auto; }
.dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.dash-head h1 { font-size: 1.5rem; font-weight: 700; color: #111827; }
.dash-head .sub { color: #4b5563; font-size: 0.875rem; }
.dash-tools { display: flex; gap: 0.5rem; align-items: center; }
.dash-tools .search { width: 16rem; background: #fff; }
.table-wrap { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; overflow: auto; }
.msg-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.msg-table th { text-align: left; font-weight: 600; color: #374151; background: #f9fafb; padding: 0.625rem 1rem; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
.msg-table td { padding: 0.75rem 1rem; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
.msg-table tr:last-child td { border-bottom: 0; }
.msg-table td.when { white-space: nowrap; color: #6b7280; }
.msg-table td.who { white-space: nowrap; font-weight: 500; }
.msg-table td.body { white-space: pre-wrap; overflow-wrap: anywhere; }
.empty { padding: 2rem; text-align: center; color: #6b7280; }

/* account pages */
.field-link { text-align: right; margin: -0.5rem 0 1rem; font-size: 0.8125rem; }
.field-link a, .back-link a, .small a { color: #1d4ed8; font-weight: 500; }
.field-link a:hover, .back-link a:hover, .small a:hover { text-decoration: underline; }
.small { font-size: 0.8125rem; color: #6b7280; line-height: 1.4; }
.back-link { margin-top: 1rem; text-align: center; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.notice { margin-top: 0.75rem; padding: 0.875rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: 0.5rem; font-size: 0.8125rem; line-height: 1.45; color: #78350f; }
.notice p { margin-bottom: 0.75rem; }
.acct-card .sub strong { color: #111827; }
.btn-row .link-btn { font-size: 0.875rem; }

/* pass phrase (reset page) */
.phrase {
	padding: 0.625rem 0.75rem; margin-bottom: 0.5rem; background: #fffbea; border: 1px dashed #e7c64a; border-radius: 0.5rem;
	font: 600 1.0625rem/1.4 ui-monospace, Consolas, monospace; color: #1e3a8a; overflow-wrap: anywhere;
}
.check-row { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.875rem; margin: 0.25rem 0 1rem; }
.check-row input { margin-top: 0.2rem; }