:root {
	--bg: #12141a;
	--fg: #e8eaf0;
	--muted: #8b93a7;
	--accent: #7aa2f7;
	--border: #262b38;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	padding: 3rem 1rem;
	background: var(--bg);
	color: var(--fg);
	font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}

main {
	max-width: 40rem;
	margin: 0 auto;
}

h1 {
	margin: 0 0 .25rem;
	font-size: 2rem;
	letter-spacing: -0.02em;
}

h2 {
	margin: 2rem 0 .75rem;
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
}

.lede { margin: 0 0 2rem; color: var(--muted); }

.error {
	padding: .75rem 1rem;
	border: 1px solid #7f1d1d;
	border-radius: 6px;
	background: #2a1414;
	color: #fca5a5;
}

ul.todos {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
}

ul.todos li {
	display: flex;
	gap: .75rem;
	padding: .7rem 1rem;
	border-bottom: 1px solid var(--border);
}

ul.todos li:last-child { border-bottom: 0; }

.id { color: var(--muted); font-variant-numeric: tabular-nums; }
.empty { color: var(--muted); font-style: italic; }

form {
	display: flex;
	gap: .5rem;
}

input[type=text] {
	flex: 1;
	padding: .6rem .8rem;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: #1a1d26;
	color: var(--fg);
	font: inherit;
}

input[type=text]:focus {
	outline: 2px solid var(--accent);
	outline-offset: -1px;
}

button {
	padding: .6rem 1.2rem;
	border: 0;
	border-radius: 6px;
	background: var(--accent);
	color: #0d1017;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

footer {
	margin-top: 3rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
	color: var(--muted);
	font-size: .875rem;
}

a { color: var(--accent); }
/* --- Phase 2: board page ------------------------------------------- */

.canvas-frame {
	margin: 1rem 0 1.5rem;
	padding: 2.5rem 1rem;
	border: 1px dashed var(--border);
	border-radius: 8px;
	background:
		linear-gradient(var(--border) 1px, transparent 1px) 0 0 / 24px 24px,
		linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0 / 24px 24px;
	opacity: .9;
}

ul.members { list-style: none; padding: 0; margin: 0 0 1.5rem; }
ul.members li {
	display: flex;
	gap: .75rem;
	align-items: center;
	padding: .35rem 0;
	border-bottom: 1px solid var(--border);
}
ul.members .email { flex: 1; }
ul.members .role, .boards .role {
	color: var(--muted);
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .05em;
}

form.inline { display: inline; }
form.inline button, form.inline select { font-size: .8rem; padding: .25rem .6rem; }

select {
	background: var(--bg);
	color: var(--fg);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: .35rem .5rem;
	font: inherit;
}

button.danger {
	background: #a63d40;
	color: #fff;
	font-weight: 500;
}

form.inline-stacked { display: grid; gap: .75rem; max-width: 22rem; }

code {
	background: #1b1e27;
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: .15rem .4rem;
	font-size: .85em;
	word-break: break-all;
}

/* --- Phase 3: image filmstrip --------------------------------------- */

ul.filmstrip {
	list-style: none; padding: 0; margin: 0 0 1.5rem;
	display: flex; flex-wrap: wrap; gap: 1rem;
}
ul.filmstrip li { display: flex; flex-direction: column; gap: .25rem; }
ul.filmstrip img {
	border: 1px solid var(--border); border-radius: 6px;
	display: block; background: #0d1017;
}
ul.filmstrip .dims { color: var(--muted); font-size: .75rem; }
input[type="file"] { color: var(--muted); font: inherit; }

/* --- Phase 4: canvas, toolbar, notes -------------------------------- */

.canvas-frame {
	position: relative;
	height: 480px;
	padding: 0;
	cursor: crosshair;
	overflow: hidden;
}

.canvas-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
	margin: .75rem 0 1.25rem;
}

.canvas-toolbar button {
	padding: .3rem .7rem;
	font-size: .85rem;
	background: #1b1e27;
	color: var(--fg);
	border: 1px solid var(--border);
	border-radius: 6px;
}

.canvas-toolbar button.on {
	background: var(--accent);
	color: #0d1017;
	border-color: var(--accent);
}

.canvas-toolbar .swatches { display: inline-flex; gap: .3rem; }
.canvas-toolbar .sw {
	width: 1.4rem; height: 1.4rem; padding: 0;
	border-radius: 50%;
	border: 2px solid var(--border);
}
.canvas-toolbar .sw:hover { border-color: var(--fg); }

.canvas-toolbar .size-label {
	display: inline-flex; align-items: center; gap: .4rem;
	color: var(--muted); font-size: .85rem;
}
.canvas-toolbar input[type="range"] { width: 6rem; }

.canvas-toolbar .hint {
	flex-basis: 100%;
	color: var(--muted);
	font-size: .75rem;
}

.note-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.note {
	position: absolute;
	transform-origin: 0 0;	/* JS scales around the world anchor */
	padding: .3rem .5rem;
	background: rgba(13, 16, 23, .75);
	border: 1px solid var(--border);
	border-radius: 6px;
	font-size: .9rem;
	transform: translate(4px, 4px);
	pointer-events: auto;
	cursor: grab;
	max-width: 22rem;
	white-space: pre-wrap;
	word-break: break-word;
}

.live-hud {
	position: absolute;
	right: .5rem;
	top: .4rem;
	z-index: 2;
	font-size: .75rem;
	color: var(--muted);
	background: rgba(13, 16, 23, .6);
	padding: .1rem .5rem;
	border-radius: 4px;
	pointer-events: none;
}

.ws-notice {
	position: absolute;
	left: 50%;
	bottom: .8rem;
	transform: translate(-50%, 8px);
	background: #a63d40;
	color: #fff;
	font-size: .8rem;
	padding: .25rem .7rem;
	border-radius: 6px;
	opacity: 0;
	transition: opacity .2s, transform .2s;
	pointer-events: none;
}

.ws-notice.show { opacity: 1; transform: translate(-50%, 0); }

/* --- Phase 5e: note editor + lock affordances ----------------------- */

.note.locked {
	cursor: not-allowed;
	opacity: .75;
}

.note.editing {
	cursor: auto;
	background: rgba(13, 16, 23, .92);
	border-color: var(--accent);
}

.note textarea {
	display: block;
	width: 18rem;
	min-width: 8rem;
	resize: both;
	background: transparent;
	border: none;
	outline: none;
	color: inherit;
	font: inherit;
	line-height: 1.3;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	pointer-events: auto;
	cursor: text;
}

/* --- Phase 6: auth forms + fullscreen board app --------------------- */

/* form controls: the legacy rules only styled input[type=text]; email,
 * password and file inputs rendered as white OS boxes on a dark UI */
input[type="email"], input[type="password"], input[type="text"],
select {
	background: #1a1d26;
	color: var(--fg);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: .6rem .8rem;
	font: inherit;
	color-scheme: dark;
}

input:focus, select:focus {
	outline: 2px solid var(--accent);
	outline-offset: -1px;
}

/* stacked auth forms: label above field, full width, comfortable tap
 * targets -- identical story small or large screens */
form.stacked {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .9rem;
	max-width: 26rem;
	margin: 0 0 1rem;
}

form.stacked label {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	color: var(--muted);
	font-size: .85rem;
}

form.stacked input { width: 100%; }

form.stacked button { align-self: flex-start; }

/* flash notices (login errors, upload confirmations) */
.flash {
	padding: .6rem .9rem;
	margin: 0 0 1.25rem;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: #1b2233;
}

.flash.ok { background: #16241d; border-color: #2c5840; color: #a9d8bb; }
.flash.error { background: #2a1414; border-color: #7f1d1d; color: #fca5a5; }

/* fullscreen board app ------------------------------------------------ */

body.board-app {
	height: 100dvh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
}

.app-header {
	flex: 0 0 auto;
	background: #171a22;
	border-bottom: 1px solid var(--border);
}

.app-header .bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .6rem;
	padding: .55rem .9rem;
}

.brand {
	color: var(--fg);
	font-weight: 700;
	text-decoration: none;
	letter-spacing: -0.01em;
}

.board-title { font-weight: 600; }

.role-chip {
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--muted);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: .1rem .55rem;
}

.app-header .spacer { flex: 1; }

/* settings menu: overflow UI (members, invite, share, delete, filmstrip)
 * behind a details/summary -- zero JS, Escape closes natively */
.settings { position: relative; }

.settings summary {
	list-style: none;
	cursor: pointer;
	padding: .35rem .7rem;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: #1b1e27;
	color: var(--fg);
	font-size: .85rem;
	user-select: none;
}

.settings summary::-webkit-details-marker { display: none; }
.settings[open] summary { border-color: var(--accent); }

.settings-panel {
	position: absolute;
	right: 0;
	top: calc(100% + .45rem);
	z-index: 30;
	width: min(34rem, calc(100vw - 1.5rem));
	max-height: min(70dvh, 40rem);
	overflow: auto;
	background: #171a22;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: .5rem 1rem 1rem;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}

.settings-panel h3 {
	margin: 1rem 0 .4rem;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--muted);
}

.settings-panel ul.members li { flex-wrap: wrap; }

/* toolbar row, glued under the bar */
.board-app .canvas-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	padding: .45rem .9rem;
	border-top: 1px solid var(--border);
	margin: 0;
}

.upload-form {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
}

.upload-form label {
	color: var(--muted);
	font-size: .8rem;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}

.upload-form input[type="file"] {
	width: 15rem;
	max-width: 60vw;
	font-size: .8rem;
	color-scheme: dark;
}

.upload-form button {
	font-size: .8rem;
	padding: .3rem .7rem;
}

/* canvas owns every pixel the header does not claim */
.board-app .canvas-frame {
	flex: 1 1 auto;
	min-height: 240px;
	height: auto;
	margin: 0;
	border: 0;
	border-radius: 0;
}

.board-app .flash { margin: .6rem .9rem 0; }

/* small screens: upload row takes its own line, paddings tighten */
@media (max-width: 640px) {
	.upload-form { flex-basis: 100%; }
	.upload-form input[type="file"] { flex: 1; max-width: none; width: auto; }
	.app-header .bar { padding: .5rem .7rem; }
	.board-app .canvas-toolbar { padding: .4rem .7rem; }
	.board-app .canvas-toolbar .hint { display: none; }
	.settings-panel { right: -4px; }
}

/* non-board pages get some breathing room back on phones */
@media (max-width: 640px) {
	body:not(.board-app) { padding: 1.5rem .9rem; }
	body:not(.board-app) main { max-width: none; }
	h1 { font-size: 1.6rem; }
}

/* --- Phase 6b: flash dismiss + note edge overflow -------------------- */

.flash {
	position: relative;
	padding-right: 2.2rem;		/* room for the close button */
}

.flash-close {
	position: absolute;
	top: .3rem;
	right: .4rem;
	padding: .1rem .5rem;
	background: transparent;
	border: 0;
	color: inherit;
	font: inherit;
	font-size: 1.15rem;
	line-height: 1;
	font-weight: 400;
	opacity: .65;
	cursor: pointer;
}

.flash-close:hover { opacity: 1; background: transparent; }

/* notes must keep their natural width off the edge of the canvas:
 * an absolutely-positioned box with only `left` shrink-wraps against
 * the containing block's remaining width, so text wrapped in a narrow
 * column near the right border instead of running off-screen */
.note { width: max-content; }