/* Pastor Care Board. Colours are tokens; dark mode follows the device or the header switch. */
:root {
	--bg: #f5f3ef;
	--surface: #ffffff;
	--surface-2: #faf8f5;
	--text: #22201c;
	--muted: #6b655c;
	--line: #e3ddd3;
	--accent: #5b4a8b;
	--accent-text: #ffffff;
	--focus: #2f6fdf;
	--critical: #c62828;
	--high: #e06a16;
	--elevated: #b88a00;
	--stable: #2e7d4f;
	--homebound: #2563a6;
	--ok-bg: #e5f3ea;
	--warn: #b45309;
	--warn-bg: #fdf3e2;
	--danger: #b42318;
	--danger-bg: #fdecea;
	--shadow: 0 1px 2px rgb(0 0 0 / .06), 0 2px 8px rgb(0 0 0 / .04);
	--radius: 10px;
	color-scheme: light;
}
/* Dark: the device's setting unless someone chose light, or when they chose dark (header switch). */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #17161a;
		--surface: #212026;
		--surface-2: #1c1b20;
		--text: #ece9e4;
		--muted: #a49e95;
		--line: #34323a;
		--accent: #a593e0;
		--accent-text: #17161a;
		--focus: #7aa7ff;
		--critical: #ff6b6b;
		--high: #ff9a4d;
		--elevated: #e8c040;
		--stable: #5fcf8f;
		--homebound: #6fa8e8;
		--ok-bg: #1d3326;
		--warn: #f0a050;
		--warn-bg: #3a2c18;
		--danger: #ff7b72;
		--danger-bg: #3a1f1f;
		--shadow: none;
		color-scheme: dark;
	}
}
:root[data-theme="dark"] {
	--bg: #17161a;
	--surface: #212026;
	--surface-2: #1c1b20;
	--text: #ece9e4;
	--muted: #a49e95;
	--line: #34323a;
	--accent: #a593e0;
	--accent-text: #17161a;
	--focus: #7aa7ff;
	--critical: #ff6b6b;
	--high: #ff9a4d;
	--elevated: #e8c040;
	--stable: #5fcf8f;
	--homebound: #6fa8e8;
	--ok-bg: #1d3326;
	--warn: #f0a050;
	--warn-bg: #3a2c18;
	--danger: #ff7b72;
	--danger-bg: #3a1f1f;
	--shadow: none;
	color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); }
h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* Header */
.top {
	display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem;
	padding: .75rem 1rem; background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; color: var(--text); text-decoration: none; }
.brand-mark { color: var(--critical); }
.tabs { display: flex; gap: .25rem; flex-wrap: wrap; }
.tabs a { padding: .35rem .7rem; border-radius: 999px; color: var(--muted); text-decoration: none; }
.tabs a[aria-current] { background: var(--accent); color: var(--accent-text); }
.who { margin-left: auto; display: flex; gap: .75rem; align-items: center; }
.who form { margin: 0; }
main { padding: 1rem; max-width: 1500px; margin: 0 auto; }

/* Pieces */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); }
.narrow { max-width: 420px; margin: 2rem auto; }
.narrow-left { max-width: 720px; margin-top: 1.5rem; }
.flash { padding: .6rem .8rem; border-radius: 8px; background: var(--ok-bg); margin: 0 0 1rem; }
.flash-danger { background: var(--danger-bg); color: var(--danger); }
.flash-warn { background: var(--warn-bg); color: var(--warn); }
.btn {
	display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
	padding: .5rem .9rem; border: 1px solid var(--line); border-radius: 8px;
	background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }
.pill { display: inline-block; font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.badge { font-size: .8rem; padding: .3rem .5rem; border-radius: 6px; margin: .5rem 0 0; }
.badge.ok { background: var(--ok-bg); color: var(--stable); }
.warn { color: var(--warn); }
.inline { display: inline; margin: 0; }

/* Forms */
.form { display: grid; gap: .75rem; }
.form label { display: grid; gap: .25rem; font-weight: 600; font-size: .9rem; }
.form label.check { display: flex; gap: .5rem; align-items: center; font-weight: 400; }
input, select, textarea {
	font: inherit; color: var(--text); background: var(--surface-2);
	border: 1px solid var(--line); border-radius: 8px; padding: .5rem .6rem; width: 100%;
}
input[type=checkbox], input[type=radio] { width: auto; margin: 0; }
.form label .small { font-weight: 400; }
textarea { resize: vertical; }
.row { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.sso { display: grid; gap: .5rem; margin-bottom: .5rem; }
.sso form { margin: 0; }
.sso .btn { width: 100%; }
.sso-logo { width: 18px; height: 18px; display: inline-block; }
.sso-microsoft .sso-logo { background: linear-gradient(90deg, #f25022 50%, #7fba00 50%) top / 100% 50% no-repeat, linear-gradient(90deg, #00a4ef 50%, #ffb900 50%) bottom / 100% 50% no-repeat; }
.sso-google .sso-logo { border-radius: 50%; background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); }
.or { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .85rem; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* Board */
.toolbar { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; margin-bottom: 1rem; }
.search { display: flex; gap: .5rem; align-items: center; flex: 1 1 240px; max-width: 420px; }
.level-critical { --level: var(--critical); }
.level-high { --level: var(--high); }
.level-elevated { --level: var(--elevated); }
.level-stable { --level: var(--stable); }
.level-homebound { --level: var(--homebound); }
.level-off { --level: var(--muted); }
.tabs-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: .25rem; border-bottom: 1px solid var(--line); }
.level-tab {
	display: flex; justify-content: center; align-items: baseline; gap: .4rem;
	padding: .7rem .5rem; text-decoration: none; color: var(--muted); font-weight: 600;
	border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
	border-top: 4px solid transparent; margin-bottom: -1px;
}
.level-tab:hover { color: var(--level); }
.level-tab[aria-selected=true] { color: var(--level); background: var(--surface); border-color: var(--line); border-top-color: var(--level); }
.count { display: inline-block; min-width: 1.6em; padding: 0 .4em; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font-size: .8rem; font-weight: 600; text-align: center; }
.panel { background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); padding: 1rem; min-height: 300px; }
.hint { color: var(--muted); font-size: .85rem; margin: 0 0 1rem; }
.cards { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.empty { color: var(--muted); text-align: center; padding: 2rem 0; margin: 0; }
.pcard {
	display: grid; gap: .4rem; align-content: start; text-decoration: none; color: var(--text);
	background: var(--surface-2); border: 1px solid var(--line); border-left: 5px solid var(--level);
	border-radius: 8px; padding: .75rem .85rem; box-shadow: var(--shadow); cursor: pointer;
}
.pcard:hover { border-color: var(--level); }
.pcard.is-done { border-style: dashed; border-left-style: solid; }
.pcard-name { font-weight: 700; font-size: 1.05rem; }
.care-need { font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.facts { display: grid; gap: .1rem; font-size: .82rem; overflow-wrap: anywhere; }
.meta { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: .75rem; color: var(--muted); }
@media (max-width: 640px) {
	.tabs-bar { grid-template-columns: repeat(2, 1fr); border-bottom: 0; }
	.level-tab, .level-tab[aria-selected=true] { border: 1px solid var(--line); border-top: 4px solid var(--line); border-radius: 8px; margin: 0; }
	.level-tab[aria-selected=true] { border-top-color: var(--level); }
	.panel { border-top: 1px solid var(--line); border-radius: var(--radius); margin-top: .5rem; padding: .75rem; }
}

/* Status dialog and form */
.status-dialog {
	width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
	border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem;
	background: var(--surface); color: var(--text);
}
.status-dialog::backdrop { background: rgb(0 0 0 / .45); }
.dialog-head { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.dialog-head h2 { margin: 0; font-size: 1.25rem; }
.dialog-head .pill, .person-head .pill { border-color: var(--level); color: var(--level); font-weight: 600; }
.care-need-full { white-space: pre-line; color: var(--muted); margin: .5rem 0 1rem; max-height: 8em; overflow: auto; }
.levels { border: 0; padding: 0; margin: 0; display: grid; gap: .4rem; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); }
.levels legend { font-weight: 600; font-size: .9rem; margin-bottom: .4rem; padding: 0; }
.form .level-choice { display: flex; gap: .4rem; align-items: center; font-weight: 600; color: var(--level); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .6rem; cursor: pointer; }
.level-choice:has(input:checked) { border-color: var(--level); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--level); }
.level-choice:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.level-choice input { accent-color: var(--level); }

/* Person page */
.crumbs { margin: 0 0 .75rem; }
.person-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
@media (max-width: 900px) { .person-grid { grid-template-columns: 1fr; } }
.person-head { display: flex; gap: .75rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.side { display: grid; gap: 1rem; }
.status-line { font-weight: 600; }
.history li.kind-status { border-color: var(--accent); }
.pco-failed { margin: .3rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; font-size: .85rem; color: var(--danger); }
.sync-counts { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0 0 .75rem; padding: 0; list-style: none; }
.history { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .6rem; }
.history li { border-left: 3px solid var(--line); padding-left: .6rem; }
.history li.kind-checkin { border-color: var(--stable); }
.history li.kind-event p:first-child { color: var(--muted); font-style: italic; }
.history p { margin: 0; overflow-wrap: anywhere; }
.note-cell { overflow-wrap: anywhere; }

/* Tables and lists */
.table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.table th, .table td { padding: .6rem .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.table th { font-size: .8rem; color: var(--muted); font-weight: 600; }
.table .clip { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table select { width: auto; }
@media (max-width: 700px) {
	.table, .table tbody, .table tr, .table td { display: block; }
	.table thead { display: none; }
	.table tr { border-bottom: 1px solid var(--line); padding: .5rem 0; }
	.table td { border: 0; padding: .2rem .75rem; }
	.table .clip { max-width: none; white-space: normal; }
}
.users { display: grid; gap: .5rem; }
.users summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.users details[open] summary { margin-bottom: .75rem; }
.users .inactive { opacity: .65; }

/* Planning Center picker and settings */
.remove-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); justify-items: start; }
.pco-picker { display: grid; gap: .5rem; padding: .75rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.pco-linked { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.pco-linked a { font-weight: 600; }
.pco-picker [data-pco-status]:empty { display: none; }
.pco-picker [data-pco-status], .pco-picker [data-pco-manual-wrap] { margin: 0; }
.pco-results { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; max-height: 320px; overflow: auto; }
.pco-results:empty { display: none; }
.pco-result {
	width: 100%; display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; text-align: left;
	padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
}
.pco-result:hover { border-color: var(--accent); }
.pco-result .badge { margin: 0; background: var(--danger-bg); color: var(--danger); }
input[readonly] { color: var(--muted); }
.pco-result .badge.info { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.form fieldset.contact { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; min-width: 0; }
.form fieldset.contact legend { font-weight: 600; font-size: .9rem; padding: 0; margin-bottom: .25rem; }

/* Card dialog: change status or quick note */
.mode-switch { border: 0; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.mode-switch legend { font-weight: 600; font-size: .9rem; margin-bottom: .4rem; padding: 0; }
.mode-switch label { display: flex; gap: .5rem; align-items: center; justify-content: center; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 8px; font-weight: 600; cursor: pointer; background: var(--surface-2); }
.mode-switch label:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.mode-switch input { accent-color: var(--accent); }
.history li.kind-note { border-color: var(--muted); }
.danger-zone h2 { color: var(--danger); }

/* One person, several cards (issues) */
.flag { color: var(--warn); font-size: .8rem; font-weight: 600; }
.pco-result .badge.flag { background: var(--warn-bg); color: var(--warn); }
.others { border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: 8px; padding: .6rem .8rem; margin-bottom: 1rem; background: var(--surface-2); }
.others p { margin: 0 0 .4rem; }
.others ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.others a { text-decoration: none; color: var(--text); display: flex; gap: .5rem; align-items: baseline; }
.others a:hover { text-decoration: underline; }
.others .pill { border-color: var(--level); color: var(--level); font-weight: 600; flex: none; }

/* Invites */
.invite { display: grid; gap: .5rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.invite label { font-weight: 600; font-size: .9rem; }
.invite textarea { font-size: .9rem; color: var(--text); }
.invite p { margin: 0; }
.invite-new { border-left: 4px solid var(--accent); margin-bottom: 1rem; }
.invite-new .invite { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.signed-in { margin-left: auto; }

/* Latest note on a card and in its dialog */
.last-note { display: grid; gap: .15rem; padding: .45rem .55rem; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); font-size: .85rem; }
.last-note-head { color: var(--muted); font-size: .75rem; font-weight: 600; }
.last-note-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; overflow-wrap: anywhere; }
.last-note-full { margin: -.5rem 0 1rem; padding: .5rem .65rem; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 6px 6px 0; font-size: .9rem; white-space: pre-line; max-height: 8em; overflow: auto; }

/* Check-in alerts */
.pcard.is-overdue { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.badge.overdue { margin: 0; background: var(--danger-bg); color: var(--danger); font-weight: 600; }
.overdue-count { font-size: .72rem; font-weight: 700; color: var(--danger); background: var(--danger-bg); border-radius: 999px; padding: .05rem .45rem; }
.overdue-banner { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; margin: 0 0 1rem; padding: .6rem .8rem; border-radius: 8px; background: var(--danger-bg); color: var(--danger); font-weight: 600; }
.overdue-banner a { color: var(--danger); font-weight: 400; }
.checkin-days { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.form .checkin-days label { color: var(--level); border: 1px solid var(--line); border-top: 3px solid var(--level); border-radius: 8px; padding: .5rem .6rem; }
.days-input { display: flex; gap: .4rem; align-items: center; color: var(--muted); font-weight: 400; }
.days-input input { width: 5.5rem; }
@media (max-width: 640px) { .level-tab { flex-wrap: wrap; } }

/* Confirm popups */
.confirm-dialog { width: min(480px, calc(100vw - 32px)); border: 1px solid var(--line); border-top: 4px solid var(--danger); border-radius: var(--radius); padding: 1.25rem; background: var(--surface); color: var(--text); }
.confirm-dialog::backdrop { background: rgb(0 0 0 / .45); }
.confirm-dialog h2 { color: var(--danger); margin: 0 0 .75rem; }
.delete-warning { background: var(--danger-bg); color: var(--danger); font-weight: 600; padding: .6rem .75rem; border-radius: 8px; margin: 0 0 .75rem; }
.confirm-inline { margin-top: .5rem; }

/* Sign-in lockout */
.pill.locked { border-color: var(--danger); color: var(--danger); font-weight: 600; }
.unlock { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: 1rem; padding: .5rem .75rem; border-radius: 8px; background: var(--danger-bg); color: var(--danger); font-size: .9rem; }

/* Light/dark switch in the header */
.theme-form { margin: 0; }
.theme-switch { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--text); font: inherit; font-size: .85rem; cursor: pointer; }
.theme-switch:hover { border-color: var(--muted); }
.theme-icon { font-size: 1rem; line-height: 1; }
.top .theme-form:only-child, .top > .theme-form { margin-left: auto; }

/* Phones */
@media (max-width: 640px) {
	/* Header: brand, switch and name on one row; the page links in one row that scrolls sideways. */
	.top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand who" "nav nav"; gap: .5rem; padding: .6rem 1rem .5rem; }
	.brand { grid-area: brand; align-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.who { grid-area: who; gap: .6rem; margin: 0; }
	.who > a { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.top > .theme-form { grid-area: who; }
	.theme-label { display: none; }
	.theme-switch { padding: .3rem .5rem; }
	.tabs { grid-area: nav; flex-wrap: nowrap; overflow-x: auto; margin: 0 -1rem; padding: 0 1rem .15rem; scrollbar-width: none; }
	.tabs::-webkit-scrollbar { display: none; }
	.tabs a { white-space: nowrap; flex: none; }
	main { padding: .75rem; }

	/* Level tabs: compact, three to a row. */
	.tabs-bar { grid-template-columns: repeat(3, 1fr); gap: .35rem; }
	.level-tab { padding: .45rem .25rem; font-size: .85rem; gap: .25rem; }
	.level-tab .count { min-width: 1.4em; font-size: .72rem; }
	.overdue-count { font-size: .65rem; padding: 0 .35rem; }
	.toolbar { gap: .5rem; margin-bottom: .75rem; }
	.toolbar h1 { font-size: 1.3rem; }
	.toolbar .search { flex-basis: 100%; max-width: none; order: 3; }

	/* All notes: person and time on one line, then the kind, the note and who wrote it. */
	.notes-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; padding: .6rem .75rem; }
	.notes-table td { padding: 0; }
	.notes-table td:nth-child(2) { order: 1; font-weight: 600; }
	.notes-table td:nth-child(1) { order: 2; margin-left: auto; color: var(--muted); font-size: .8rem; }
	.notes-table td:nth-child(3) { order: 3; width: 100%; color: var(--muted); font-size: .8rem; }
	.notes-table td:nth-child(4) { order: 4; width: 100%; }
	.notes-table td:nth-child(5) { order: 5; width: 100%; color: var(--muted); font-size: .8rem; }
	.notes-table td:nth-child(5):not(:empty)::before { content: "— "; }

	.status-dialog, .confirm-dialog { padding: 1rem; }
}

/* Person page: name and flags above the cards. On phones the quick note and status come first. */
.person-top { margin-bottom: 1rem; }
.person-top .person-head { margin-bottom: .5rem; }
.person-top > p { margin: .5rem 0 0; }
@media (max-width: 900px) {
	.person-grid { display: flex; flex-direction: column; align-items: stretch; }
	.person-grid > .side { display: contents; }
	.person-grid .card-note { order: 1; }
	.person-grid .card-status { order: 2; }
	.person-grid .card-details { order: 3; }
	.person-grid .danger-zone { order: 4; }
}

/* System check */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.checks li { display: grid; grid-template-columns: 8.5rem 1fr; gap: .15rem .75rem; padding: .5rem .65rem; border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 8px; font-size: .9rem; }
.checks .check-detail { grid-column: 2; color: var(--muted); overflow-wrap: anywhere; }
.check-state { grid-row: span 2; font-weight: 700; }
.check-ok { border-left-color: var(--stable); } .check-ok .check-state { color: var(--stable); }
.check-warn { border-left-color: var(--warn); } .check-warn .check-state { color: var(--warn); }
.check-bad { border-left-color: var(--danger); background: var(--danger-bg); } .check-bad .check-state { color: var(--danger); }
@media (max-width: 640px) { .checks li { grid-template-columns: 1fr; } .check-state, .checks .check-detail { grid-column: auto; grid-row: auto; } }

/* Teams */
.steps { margin: .25rem 0 1rem; padding-left: 1.25rem; display: grid; gap: .4rem; }
code { font-size: .85em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: .05rem .3rem; overflow-wrap: anywhere; }
.teams-signin { text-align: center; }