/* Minimal structural styling only. Brand styling is applied later via Claude
   Design from these semantic templates — keep this light on purpose. */

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: system-ui, sans-serif;
	line-height: 1.4;
}

#main-nav {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid #ccc;
	flex-wrap: wrap;
}

#main-nav .logout { margin-left: auto; }

#content, #login { padding: 1rem; max-width: 900px; }

#login { max-width: 360px; margin: 4rem auto; }

form label { display: block; margin: 0.5rem 0; }

input, select, textarea, button { font: inherit; }

.error { color: #b00020; }

table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ddd; padding: 0.4rem 0.6rem; text-align: left; }

/* Live quick-post (mobile) */
.notice { padding: 0.5rem; background: #e8f5e9; border: 1px solid #a5d6a7; }
#roster-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.chip { border: 1px solid #999; border-radius: 999px; padding: 0.3rem 0.7rem; }
.post-btn { font-size: 1.1rem; padding: 0.6rem 1.2rem; margin-top: 0.5rem; }