/* Colabriq: one hand-written stylesheet. "Daylight on a trail" (R1): one action color (Sunrise), one
   link and focus color (Sky), and status colors that only ever mean status. */

/* Self-hosted (OFL, public/fonts): Bricolage Grotesque for headings and big numbers, Instrument Sans for the rest. */
@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 500 800;
	font-display: swap;
	src: url('/fonts/bricolage-grotesque-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 500 800;
	font-display: swap;
	src: url('/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('/fonts/instrument-sans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('/fonts/instrument-sans-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* Paper, surfaces, ink. */
	--bg: #f4f7fb;
	--surface: #ffffff;
	--surface-muted: #eaeff8;
	--header-bg: #ffffff;
	--ink: #171a2f;
	--ink-soft: #3e4566;
	/* Muted: 6.2:1 on white, 5.8:1 on paper. */
	--ink-faint: #596079;
	--line: #dde2ec;
	--line-strong: #c5ccdc;
	/* Sky: links, selection and focus (6.5:1 on white). */
	--accent: #1f4fe0;
	--accent-ink: #ffffff;
	--accent-soft: #e7edff;
	--accent-hover: #1238b0;
	--accent-text: #1238b0;
	/* Sunrise: the one action color, with ink text (5.5:1). */
	--action: #ff5b1f;
	--action-ink: #171a2f;
	--action-hover: #f04a0e;
	--action-soft: #fff0e8;
	--action-text: #a33a0c;
	/* Sun: highlights only. Meadow: done. Berry: pings, unread, destructive. */
	--sun: #ffc83d;
	--meadow: #13a36e;
	--meadow-text: #0a7a50;
	--meadow-soft: #e3f6ee;
	--berry: #d81b5e;
	--danger: #b0124a;
	--danger-soft: #fce8ef;
	--danger-ink: #ffffff;
	--focus: #1f4fe0;
	/* Form fields need a 3:1 boundary (WCAG 1.4.11): darker than the brief's #C5CCDC, which stays for lines. */
	--input-border: #8790ab;
	--notice-border: #c9d6ff;
	--danger-border: #f3b8cc;
	--mark-bg: #fff1c2;
	--guest-bg: #fff6db;
	--guest-border: #e8c35a;
	--done-col: #e3f6ee;
	--done-card-border: #c4ead9;
	/* Chat bubbles: others', and your own (R2 artboard). */
	--bubble: #f0f3fa;
	--bubble-own: #ffe7dc;
	/* R4: the wall's empty slots (dashed), and bricks laid by agents (reserved). */
	--slot: #b9c1d6;
	--agent: #3047d6;
	/* Behind pictures that may be transparent: a light checkerboard by day, a mid-grey one at night, so dark-on-transparent and light-on-transparent both show. */
	--checker-a: #ffffff;
	--checker-b: #e6eaf2;
	--radius: 12px;
	--radius-panel: 18px;
	--radius-small: 8px;
	--shadow: 0 1px 0 rgb(23 26 47 / 6%), 0 1px 3px rgb(23 26 47 / 5%);
	--shadow-lift: 0 18px 40px rgb(23 26 47 / 22%), 0 4px 10px rgb(23 26 47 / 12%);
	--font: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--font-display: 'Bricolage Grotesque', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
	color-scheme: light;
}

/* Dark ("night trail", never pure black): the device's setting, unless the person chose Light; or their
   choice of Dark. The two blocks hold the same set (a test checks they match, and their contrast). */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--bg: #10132a;
		--surface: #191d3a;
		--surface-muted: #232849;
		--header-bg: #161a35;
		--ink: #f1f2fa;
		--ink-soft: #b8bedb;
		--ink-faint: #a3a9c9;
		--line: #2e3458;
		--line-strong: #3b4270;
		--accent: #9db2ff;
		--accent-ink: #10132a;
		--accent-soft: #26326b;
		--accent-hover: #c3d0ff;
		--accent-text: #c3d0ff;
		--action: #ff6a2e;
		--action-ink: #10132a;
		--action-hover: #ff8452;
		/* R3: no brown on the night trail: Sunrise text on an indigo tint (6.1:1). */
		--action-soft: #2a2340;
		--action-text: #ff8452;
		--sun: #ffc83d;
		--meadow: #3fd49a;
		--meadow-text: #3fd49a;
		--meadow-soft: #1b3533;
		--berry: #ff5c93;
		--danger: #ff5c93;
		--danger-soft: #3a1f38;
		--danger-ink: #10132a;
		--focus: #9db2ff;
		--input-border: #6b7399;
		--notice-border: #33407a;
		--danger-border: #5c2846;
		--mark-bg: #4a3f12;
		--guest-bg: #3a3218;
		--guest-border: #7a6326;
		--done-col: #142b2a;
		--done-card-border: #24453f;
		--bubble: #232849;
		/* Your own chat lines: indigo, ink #F1F2FA on it is 9.4:1. */
		--bubble-own: #2b3a7a;
		--slot: #4a527f;
		--agent: #8796ff;
		--checker-a: #c4c9d8;
		--checker-b: #aeb4c6;
		--shadow: 0 1px 0 rgb(0 0 0 / 30%);
		--shadow-lift: 0 18px 40px rgb(0 0 0 / 50%), 0 4px 10px rgb(0 0 0 / 35%);
		color-scheme: dark;
	}
}

:root[data-theme='dark'] {
	--bg: #10132a;
	--surface: #191d3a;
	--surface-muted: #232849;
	--header-bg: #161a35;
	--ink: #f1f2fa;
	--ink-soft: #b8bedb;
	--ink-faint: #a3a9c9;
	--line: #2e3458;
	--line-strong: #3b4270;
	--accent: #9db2ff;
	--accent-ink: #10132a;
	--accent-soft: #26326b;
	--accent-hover: #c3d0ff;
	--accent-text: #c3d0ff;
	--action: #ff6a2e;
	--action-ink: #10132a;
	--action-hover: #ff8452;
	/* R3: no brown on the night trail: Sunrise text on an indigo tint (6.1:1). */
	--action-soft: #2a2340;
	--action-text: #ff8452;
	--sun: #ffc83d;
	--meadow: #3fd49a;
	--meadow-text: #3fd49a;
	--meadow-soft: #1b3533;
	--berry: #ff5c93;
	--danger: #ff5c93;
	--danger-soft: #3a1f38;
	--danger-ink: #10132a;
	--focus: #9db2ff;
	--input-border: #6b7399;
	--notice-border: #33407a;
	--danger-border: #5c2846;
	--mark-bg: #4a3f12;
	--guest-bg: #3a3218;
	--guest-border: #7a6326;
	--done-col: #142b2a;
	--done-card-border: #24453f;
	--bubble: #232849;
	/* Your own chat lines: indigo, ink #F1F2FA on it is 9.4:1. */
	--bubble-own: #2b3a7a;
	--slot: #4a527f;
	--agent: #8796ff;
	--checker-a: #c4c9d8;
	--checker-b: #aeb4c6;
	--shadow: 0 1px 0 rgb(0 0 0 / 30%);
	--shadow-lift: 0 18px 40px rgb(0 0 0 / 50%), 0 4px 10px rgb(0 0 0 / 35%);
	color-scheme: dark;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 15px/1.5 var(--font);
	font-feature-settings: 'tnum' 0;
}

h1,
h2,
h3 {
	line-height: 1.15;
	margin: 0 0 0.5rem;
	letter-spacing: -0.02em;
}

/* Bricolage for h1, h2 and big numbers only; everything else is Instrument Sans. */
h1,
h2 {
	font-family: var(--font-display);
	font-weight: 800;
}

h1 {
	font-size: 2.4rem;
	letter-spacing: -0.03em;
}

h2 {
	font-size: 1.35rem;
}

h3 {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
}

p {
	margin: 0 0 0.75rem;
}

a {
	color: var(--accent);
	text-underline-offset: 2px;
}

a:hover {
	color: var(--accent-hover);
}

time,
.badge,
.ov-count,
.tabular {
	font-variant-numeric: tabular-nums;
}

/* Every field reads on both themes (specific rules still win: :where adds no specificity). */
:where(input:not([type='checkbox'], [type='radio'], [type='file'], [type='hidden'], [type='submit']), textarea, select) {
	background-color: var(--surface);
	color: var(--ink);
}

:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.muted {
	color: var(--ink-faint);
}

.small {
	font-size: 0.8667rem;
}

.inline {
	display: inline;
	margin: 0;
}

/* Header (R1): the mark, the org switcher pill, five places, and the avatar menu. */

.topbar {
	background: var(--header-bg);
	border-bottom: 1px solid var(--line);
}

.topbar-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0.6rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 64px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.35rem;
	/* The wordmark: lowercase "colabriq", Bricolage 800 (BR1). */
	letter-spacing: -0.03em;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}

.brand:hover {
	color: var(--ink);
}

.brand-mark {
	display: block;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	/* Small sizes use the small mark; the full mark is for 48 px and up (BR1). */
	background: url('/mark-small.svg') center / contain no-repeat;
}

.org-switcher {
	flex: 0 1 auto;
	min-width: 0;
	position: relative;
}

.org-switcher summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	max-width: 18rem;
	padding: 0.45rem 0.85rem;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.org-switcher summary::-webkit-details-marker {
	display: none;
}

.org-switcher summary::before {
	content: '';
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	border-radius: 4px;
	background: var(--accent);
}

.org-switcher-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.org-switcher summary::after {
	content: '';
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	margin: -3px 0 0 0.15rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.nav-places {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
}

.place {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 40px;
	padding: 0.4rem 0.8rem;
	border-radius: 10px;
	color: var(--ink-soft);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.place:hover {
	color: var(--ink);
	background: var(--surface-muted);
}

/* U6: where you are, as on the board: a Sky-tint pill. */
.place[aria-current='page'] {
	color: var(--accent-text);
	background: var(--accent-soft);
}

/* On wide screens the words name the places; icons are for phones (the bottom bar). */
.place .icon {
	display: none;
}

.place-key {
	display: inline-block;
	min-width: 1.4em;
	padding: 0 0.35em;
	border: 1px solid var(--line-strong);
	border-radius: 5px;
	font: inherit;
	font-size: 0.75rem;
	line-height: 1.5;
	text-align: center;
	color: var(--ink-faint);
}

.place[href='/search'] .icon {
	display: inline-block;
}

.account-menu {
	position: relative;
	flex-shrink: 0;
}

.account-menu > summary {
	display: block;
	list-style: none;
	cursor: pointer;
	border-radius: 999px;
}

.account-menu > summary::-webkit-details-marker {
	display: none;
}

.account-menu > summary .avatar {
	width: 38px;
	height: 38px;
	font-size: 0.8rem;
}

.account-panel {
	position: absolute;
	right: 0;
	top: calc(100% + 0.5rem);
	z-index: 40;
	min-width: 15rem;
	padding: 0.75rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lift);
}

.account-who {
	display: flex;
	flex-direction: column;
	margin: 0 0 0.5rem;
	padding: 0 0.4rem 0.6rem;
	border-bottom: 1px solid var(--line);
}

.account-panel ul {
	list-style: none;
	margin: 0 0 0.4rem;
	padding: 0;
}

.account-panel a,
.account-panel .link-button {
	display: block;
	width: 100%;
	padding: 0.45rem 0.4rem;
	border-radius: var(--radius-small);
	color: var(--ink);
	text-align: left;
	text-decoration: none;
}

.account-panel a:hover,
.account-panel .link-button:hover {
	background: var(--surface-muted);
}

/* Page: wider and simpler (R1). */

.page {
	max-width: 1280px;
	margin: 0 auto;
	padding: 2rem 1.25rem 4rem;
}

.page-narrow > .narrow-body {
	max-width: 600px;
	margin: 0 auto;
}

.page-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.page-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

.page-header h1 {
	margin: 0;
}

.subtitle {
	color: var(--ink-soft);
	margin: 0.35rem 0 0;
}

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-panel);
	box-shadow: var(--shadow);
	padding: 1.5rem;
}

.auth-card {
	margin-top: 2rem;
}

.empty {
	text-align: center;
	color: var(--ink-soft);
	background: var(--surface);
	border: 1.5px dashed var(--line-strong);
	border-radius: var(--radius-panel);
	padding: 2.5rem 1rem;
}

/* Buttons: primary is Sunrise with ink text; secondary is ink; outline; quiet (Sky text); destructive (Berry outline). */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0.55rem 1.1rem;
	border: 1.5px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.button:hover {
	color: var(--ink);
	border-color: var(--line-strong);
	background: var(--surface-muted);
}

.button-primary {
	background: var(--action);
	border-color: var(--action);
	color: var(--action-ink);
	box-shadow: inset 0 -3px 0 rgb(23 26 47 / 22%);
}

.button-primary:hover {
	background: var(--action-hover);
	border-color: var(--action-hover);
	color: var(--action-ink);
}

.button-ink {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--surface);
}

.button-ink:hover {
	background: var(--ink-soft);
	border-color: var(--ink-soft);
	color: var(--surface);
}

.button-outline {
	border-color: var(--ink);
	background: transparent;
}

.button-danger {
	border-color: var(--berry);
	color: var(--danger);
	background: transparent;
}

.button-small {
	min-height: 36px;
	padding: 0.3rem 0.85rem;
	font-size: 0.875rem;
}

.link-button {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--ink-soft);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.link-button:hover {
	color: var(--ink);
}

.link-button.danger {
	color: var(--danger);
}

/* Quiet: a Sky text action ("All lists", "Mark all read"). */
.quiet-link,
.quiet-button {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-weight: 700;
	color: var(--accent);
	text-decoration: none;
	cursor: pointer;
}

.quiet-link:hover,
.quiet-button:hover {
	color: var(--accent-hover);
	text-decoration: underline;
}

/* Forms */

.stack > * + * {
	margin-top: 1rem;
}

.field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.field input,
.field textarea {
	width: 100%;
	min-height: 46px;
	padding: 0.65rem 0.9rem;
	border: 1.5px solid var(--input-border);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
	font: inherit;
}

.field input[type='checkbox'],
.field input[type='radio'] {
	width: auto;
	min-height: 0;
}

.field textarea {
	resize: vertical;
	min-height: 6rem;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
	border-color: var(--accent);
	outline: 2px solid var(--focus);
	outline-offset: 1px;
}

.field-hint {
	color: var(--ink-faint);
	font-size: 0.875rem;
	margin: 0.35rem 0 0;
}

.field-error {
	color: var(--danger);
	font-size: 0.9rem;
	margin: 0.35rem 0 0;
}

.has-error input,
.has-error textarea {
	border-color: var(--danger);
}

.form-actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.notice {
	border-radius: var(--radius-small);
	padding: 0.75rem 1rem;
	margin: 1rem 0;
	background: var(--accent-soft);
	border: 1px solid var(--notice-border);
}

.notice p:last-child {
	margin-bottom: 0;
}

.notice-error {
	background: var(--danger-soft);
	border-color: var(--danger-border);
}

.notice-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Home: project cards */

.project-grid,
.tool-list,
.plain-list,
.people-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.project-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1rem;
}

.project-card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	height: 100%;
	min-height: 140px;
	padding: 1.25rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	color: var(--ink);
	text-decoration: none;
	transition: border-color 120ms, transform 120ms;
}

.project-card:hover {
	border-color: var(--accent);
	transform: translateY(-1px);
}

.project-card-name {
	font-weight: 650;
	font-size: 1.1rem;
	overflow-wrap: anywhere;
}

.project-card-description {
	color: var(--ink-soft);
	font-size: 0.925rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.project-card-meta {
	margin-top: auto;
	color: var(--ink-faint);
	font-size: 0.85rem;
}

.archived {
	margin-top: 3rem;
}

.archived h2 {
	color: var(--ink-soft);
	font-size: 1rem;
}

.plain-list li + li {
	margin-top: 0.35rem;
}

/* Project page */

.project-header {
	margin: 0 0 1.75rem;
}

.project-header h1 {
	font-size: 2rem;
	overflow-wrap: anywhere;
}

.project-header-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 1rem;
}

.owner-actions {
	display: inline-flex;
	gap: 0.5rem;
}

.avatars {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--ink-soft);
	font-size: 0.9rem;
}

.avatars .avatar + .avatar {
	margin-left: -8px;
}

.avatars-label {
	margin-left: 0.5rem;
}

.avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--sun);
	color: #171a2f;
	border: 2px solid var(--surface);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* Six tones, by person id: the same person always looks the same (text ≥ 4.5:1 on each). */
.avatar-tone-0 { background: #ffc83d; color: #171a2f; }
.avatar-tone-1 { background: #1f4fe0; color: #ffffff; }
.avatar-tone-2 { background: #0a7a50; color: #ffffff; }
.avatar-tone-3 { background: #d81b5e; color: #ffffff; }
.avatar-tone-4 { background: #ff5b1f; color: #171a2f; }
.avatar-tone-5 { background: #5b3fc4; color: #ffffff; }

/* The overview: what's coming up and the latest activity, beside the tools as a compact list. */
.overview {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 2rem;
	align-items: start;
}

.overview-section + .overview-section {
	margin-top: 2rem;
}

.overview-section > h2 {
	margin: 0 0 0.75rem;
	font-size: 1.1rem;
}

.overview-more {
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
}

.coming-up {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.coming-up li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	padding: 0.6rem 1rem;
}

.coming-up li + li {
	border-top: 1px solid var(--line);
}

.coming-kind {
	min-width: 3.5rem;
	color: var(--ink-faint);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.coming-up a {
	font-weight: 600;
	color: var(--ink);
}

.coming-meta {
	margin-left: auto;
	color: var(--ink-soft);
	font-size: 0.875rem;
}

.overview-side {
	position: sticky;
	top: 1rem;
}

.tool-list {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.tool-list li + li {
	border-top: 1px solid var(--line);
}

.tool-row {
	display: flex;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	color: var(--ink);
	text-decoration: none;
}

.tool-row:hover {
	background: var(--surface-muted);
}

.tool-icon {
	flex: none;
	width: 1.5rem;
	color: var(--accent);
	font-size: 1.1rem;
	text-align: center;
}

.tool-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.tool-name {
	font-weight: 650;
}

/* Narrow screens: one column, what's happening first; the tabs already get you around (round 4). */
@media (max-width: 860px) {
	.overview {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.overview-side {
		position: static;
	}
}

/* Unread counts, filled in live by the user's hub. Empty means nothing unread. */
.badge {
	display: inline-block;
	min-width: 1.5em;
	margin-left: 0.4rem;
	padding: 0.05em 0.45em;
	border-radius: 999px;
	background: var(--berry);
	color: var(--danger-ink);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	vertical-align: 0.15em;
}

.badge:empty {
	display: none;
}

/* "New" on a guest's item page: replies since they last opened it. A label, not an alarm. */
.badge-new {
	background: var(--accent-soft);
	color: var(--accent-text);
	font-weight: 700;
}
.guest-projects .badge-new {
	align-self: center;
	padding-top: 0.15em;
}

.tool-blurb {
	color: var(--ink-soft);
	font-size: 0.925rem;
	max-width: 28ch;
}

/* People */

.add-person {
	display: flex;
	align-items: flex-end;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

.add-person .field {
	flex: 1 1 260px;
}

.people-list {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.person {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
}

.person + .person {
	border-top: 1px solid var(--line);
}

.person-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.person-name {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.person-email {
	color: var(--ink-faint);
	font-size: 0.875rem;
	overflow-wrap: anywhere;
}

.person-role {
	color: var(--ink-soft);
	font-size: 0.875rem;
}

.error-card {
	margin-top: 2rem;
	text-align: center;
}

@media (max-width: 640px) {
	h1,
	.project-header h1 {
		font-size: 1.5rem;
	}

	.page {
		padding-top: 1.25rem;
	}

	.card {
		padding: 1.25rem;
	}

	.coming-meta {
		margin-left: 0;
		flex-basis: 100%;
	}


	.person {
		flex-wrap: wrap;
	}
}

/* === todos-messages === */

.back-link {
	margin-bottom: 1rem;
	font-size: 0.9rem;
}

.back-link a {
	color: var(--ink-soft);
	text-decoration: none;
}

/* Plain-text bodies: escaped, line breaks kept, nothing auto-linked. */
.text-body {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.field select {
	width: 100%;
	/* Same height as text inputs. */
	min-height: 46px;
	padding: 0.65rem 0.9rem;
	border: 1.5px solid var(--input-border);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
	font: inherit;
}

/* Every select (R2): our own chevron, the same border and radius as fields, at any size. */
select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.25rem !important;
	border: 1.5px solid var(--input-border);
	border-radius: var(--radius);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23596079' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	font: inherit;
	cursor: pointer;
}

select:not(.field select) {
	min-height: 38px;
	padding: 0.35rem 0.75rem;
}

.has-error select {
	border-color: var(--danger);
}

.field-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
}

/* To-dos */

.todo-lists {
	display: grid;
	gap: 1rem;
}

.todo-list-card h2 a:hover {
	text-decoration: underline;
}

.todo-list-card h2 a {
	color: var(--ink);
	text-decoration: none;
}

.todo-rows {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

/* A row (R2): the box, the title, then on the right who has it and when it's due. */
.todo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 48px;
	padding: 0.45rem 0;
}

.todo + .todo {
	border-top: 1px solid var(--line);
}

.todo-check input {
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--meadow);
	cursor: pointer;
}

/* Our own box (R3): a 3:1 boundary on either theme (--input-border), Meadow with a white tick when done. */
.todo-check input[type='checkbox'] {
	appearance: none;
	-webkit-appearance: none;
	display: inline-grid;
	place-content: center;
	flex: none;
	border: 2px solid var(--input-border);
	border-radius: 6px;
	background: var(--surface);
}

.todo-check input[type='checkbox']::before {
	content: '';
	width: 11px;
	height: 6px;
	margin-top: -3px;
	border-left: 2.5px solid #ffffff;
	border-bottom: 2.5px solid #ffffff;
	transform: rotate(-45deg) scale(0);
}

.todo-check input[type='checkbox']:checked {
	border-color: var(--meadow);
	background: var(--meadow);
}

.todo-check input[type='checkbox']:checked::before {
	transform: rotate(-45deg) scale(1);
}

.todo-check input[type='checkbox']:hover:not(:disabled) {
	border-color: var(--ink-soft);
}

.todo-check input[type='checkbox']:checked:hover:not(:disabled) {
	border-color: var(--meadow);
}

.todo-check input[type='checkbox']:disabled {
	cursor: default;
}

.todo-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.todo-title {
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.todo-title:hover {
	color: var(--ink);
	text-decoration: underline;
}

.todo-done .todo-title {
	color: var(--ink-faint);
	font-weight: 500;
	text-decoration: line-through;
}

.todo-meta {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.4rem 0.6rem;
	margin-left: auto;
	color: var(--ink-faint);
	font-size: 0.85rem;
}

.todo-people {
	display: inline-flex;
}

.todo-people .avatar + .avatar {
	margin-left: -6px;
}

.todo-nobody {
	color: var(--ink-faint);
	font-size: 0.85rem;
}

.todo-done-by {
	color: var(--meadow-text);
	font-weight: 700;
	font-size: 0.8rem;
}

/* Due dates read as chips: overdue Berry, today Sunrise, otherwise quiet. */
.due {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	border-radius: 6px;
	background: var(--surface-muted);
	color: var(--ink-soft);
	font-size: 0.8rem;
	font-weight: 700;
	white-space: nowrap;
}

.due.due-overdue {
	background: var(--danger-soft);
	color: var(--danger);
}

.due.due-today {
	background: var(--action-soft);
	color: var(--action-text);
}

.todo-new {
	margin: 1.5rem 0;
}

.todo-completed summary {
	cursor: pointer;
	color: var(--ink-soft);
	font-weight: 700;
	padding: 0.85rem 1.25rem;
	background: var(--surface-muted);
	list-style: none;
}

.todo-completed summary::-webkit-details-marker {
	display: none;
}

/* The list page (R2): one centered column; the open to-dos, each section and the done ones are cards. */
.list-page {
	max-width: 880px;
	margin: 0 auto;
}

.list-progress {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin-right: 0.5rem;
}

.list-progress-count {
	font-weight: 700;
	color: var(--ink-soft);
	white-space: nowrap;
}

.list-progress .meter {
	width: 140px;
}

.list-page .todo-quick-add {
	margin: 0 0 1rem;
	padding: 0.75rem;
	border-radius: var(--radius-panel);
}

.list-page .todo-quick-add .field > label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.list-page .todo-quick-add .todo-more summary {
	padding: 0.5rem 0.25rem 0;
}

.list-page .todo-list-items > .todo-rows,
.list-page .todo-group,
.list-page .todo-completed {
	margin: 0 0 1rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-panel);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.list-page .todo-list-items > .todo-rows:empty {
	display: none;
}

.list-page .todo,
.list-page .todo-group-empty {
	padding: 0.5rem 1.25rem;
}

.list-page .todo-completed .todo-rows {
	margin: 0;
	border-top: 1px solid var(--line);
}

.list-page .todo-done {
	background: var(--surface-muted);
}

/* Sections: an uppercase label over their to-dos. */
.todo-group {
	margin: 1.25rem 0 0.5rem;
}
.todo-group-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	border-bottom: 1px solid var(--line);
}
.todo-group-count {
	margin-left: auto;
	color: var(--ink-soft);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.todo-group-header h3 {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-soft);
	overflow-wrap: anywhere;
}
.todo-group .todo-rows {
	margin: 0;
}
.todo-group-add {
	display: flex;
	gap: 0.5rem;
	margin: 0.75rem 0 1.25rem;
}
.todo-group-add input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 40px;
	padding: 0.4rem 0.75rem;
	border: 1.5px solid var(--input-border);
	border-radius: var(--radius);
	font: inherit;
	background: var(--surface);
	color: var(--ink);
}
.todo .todo-text {
	flex: 1 1 auto;
}
/* The ⋯ menus of a to-do and a group sit at the end of their row (not in a corner, like a card's). */
.todo .todo-menu,
.todo-group-header .card-menu {
	position: relative;
	top: auto;
	right: auto;
	flex: none;
	margin: 0 0 0 auto;
}
@media (hover: hover) {
	.todo:not(:hover):not(:focus-within) .todo-menu:not([open]) > summary {
		visibility: hidden;
	}
}
.todo-group-empty {
	color: var(--ink-faint);
	font-size: 0.9rem;
	padding: 0.35rem 0;
}
.todo-group-move select {
	max-width: 10rem;
}
.todo-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.5rem 1rem;
	margin: 0.75rem 0;
}
.complete-with-note[open] {
	flex-basis: 100%;
}
.complete-with-note summary {
	cursor: pointer;
	color: var(--ink-soft);
}
.complete-with-note .stack {
	margin-top: 0.5rem;
}
.assignee-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
}
.person-picker {
	border: 0;
	padding: 0;
	margin: 0 0 1rem;
}
.person-picker legend {
	font-weight: 600;
	margin-bottom: 0.35rem;
	padding: 0;
}

.todo-detail .todo-meta {
	display: block;
	margin-bottom: 1rem;
}

/* Discussions (messages) */

.message-list {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.message-list li + li {
	border-top: 1px solid var(--line);
}

.message-item {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 1rem 1.25rem;
	color: var(--ink);
	text-decoration: none;
}

.message-item:hover {
	background: var(--surface-muted);
}

.message-item-title {
	font-weight: 650;
	overflow-wrap: anywhere;
}

.message-item-meta {
	color: var(--ink-faint);
	font-size: 0.85rem;
}

.message-item-excerpt {
	color: var(--ink-soft);
	font-size: 0.925rem;
	overflow-wrap: anywhere;
}

.message h1 {
	overflow-wrap: anywhere;
}

/* Comments (R2): the author's avatar beside each one, in one card; then the composer. */

.read-column {
	max-width: 880px;
	margin: 0 auto;
}

.comments {
	margin-top: 2rem;
}

.comments > h2 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.count-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.75rem;
	padding: 0.05rem 0.5rem;
	border-radius: 999px;
	background: var(--surface-muted);
	color: var(--ink-soft);
	font-family: var(--font);
	font-size: 0.85rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.comment-list {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0.25rem 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-panel);
	box-shadow: var(--shadow);
}

.comment-list:empty {
	display: none;
}

.comment {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	column-gap: 0.85rem;
	padding: 1rem 1.25rem;
}

.comment > :not(.comment-avatar) {
	grid-column: 2;
}

.comment .comment-avatar {
	grid-row: 1 / span 3;
	width: 36px;
	height: 36px;
}

.comment + .comment {
	border-top: 1px solid var(--line);
}

.comment-meta {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 0.25rem;
	font-size: 0.875rem;
	color: var(--ink-faint);
}

.comment-author {
	font-weight: 700;
	color: var(--ink);
}

.comment-delete {
	margin-left: auto;
}

.comment-empty {
	color: var(--ink-faint);
}

.comment-list:not(:empty) + .comment-empty {
	display: none;
}

.comment-form {
	padding: 1.25rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-panel);
	box-shadow: var(--shadow);
}

.comment-form .form-actions {
	margin-top: 0.75rem;
	align-items: center;
	justify-content: space-between;
}

/* A discussion or document: its title, byline and text in one card, at reading width. */
.message.card,
.document.card {
	padding: 1.75rem;
}

.message h1,
.document h1 {
	font-size: 2.25rem;
	overflow-wrap: anywhere;
}

.message .text-body,
.document .formatted {
	font-size: 1.05rem;
	line-height: 1.6;
}

/* === end todos-messages === */

/* === cards-schedule === */

.icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-small);
	background: var(--surface);
	color: var(--ink-soft);
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

.icon-button:hover:not(:disabled) {
	background: var(--surface-muted);
	color: var(--ink);
}

.icon-button:disabled {
	opacity: 0.35;
	cursor: default;
}

.detail h1 {
	overflow-wrap: anywhere;
}

.detail-meta {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.35rem 1rem;
	margin: 0 0 1.25rem;
}

.detail-meta dt {
	color: var(--ink-faint);
}

.detail-meta dd {
	margin: 0;
}

/* Board (cards): it scrolls sideways inside itself, never the page. */

.board {
	display: flex;
	/* Columns as tall as the tallest one: dropping anywhere in a short column works (U6 #3). */
	align-items: stretch;
	gap: 1rem;
	overflow-x: auto;
	padding-bottom: 0.75rem;
	margin-bottom: 1.5rem;
	overscroll-behavior-x: contain;
}

.board-column {
	flex: 0 0 19rem;
	min-width: 0;
	background: var(--surface-muted);
	border-radius: var(--radius-panel);
	padding: 0.85rem 0.75rem 0.75rem;
	/* U6 (#3): the cards' list fills the column, so an empty column is a big drop target. */
	display: flex;
	flex-direction: column;
}

.board-column > .board-cards {
	flex: 1 0 auto;
	min-height: 6rem;
}

/* Done columns: Meadow's tint. */
.board-column.column-done {
	background: var(--done-col);
}
.column-done .board-card {
	border-color: var(--done-card-border);
}
.column-done .board-count {
	color: var(--meadow-text);
}

.board-column-header {
	margin-bottom: 0.6rem;
}

.board-column-header h2 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
	margin: 0 0 0.4rem;
	padding: 0 0.25rem;
	overflow-wrap: anywhere;
}

/* The column's dot: its color, or the board's default by place. */
.board-column-header h2::before {
	content: '';
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--column-color, #8a93b2);
}
.column-done .board-column-header h2::before {
	background: var(--meadow);
}

.board-count {
	color: var(--ink-faint);
	font-weight: 700;
	font-size: 0.85rem;
}

.board-column-actions,
.board-card-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-size: 0.85rem;
}

.board-cards {
	list-style: none;
	margin: 0;
	padding: 0;
}

.board-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 0.75rem 0.85rem;
	margin-bottom: 0.5rem;
}

.board-card-title {
	display: block;
	color: var(--ink);
	font-weight: 700;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.board-card-title:hover {
	text-decoration: underline;
}

.board-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	margin: 0.3rem 0 0;
	color: var(--ink-faint);
	font-size: 0.8rem;
}

.board-card-actions {
	margin-top: 0.5rem;
}

.board-move {
	display: flex;
	gap: 0.3rem;
	min-width: 0;
}

.board-move select {
	min-width: 0;
	max-width: 8.5rem;
	padding: 0.2rem 0.3rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-small);
	background: var(--surface);
	color: var(--ink);
	font: inherit;
}

/* Column colors: the dot beside the column's name (text stays --ink, so its contrast doesn't change). */
.column-color-gray { --column-color: #8a93b2; }
.column-color-blue { --column-color: #1f4fe0; }
.column-color-teal { --column-color: #0e8a8a; }
.column-color-green { --column-color: #13a36e; }
.column-color-yellow { --column-color: #e0a800; }
.column-color-orange { --column-color: #ff5b1f; }
.column-color-red { --column-color: #d81b5e; }
.column-color-purple { --column-color: #7a3fe0; }

.column-done-mark {
	color: var(--meadow-text);
	font-size: 0.85rem;
	font-weight: 600;
}

/* Cards in a done column read as completed. */
.board-card-done .board-card-title {
	color: var(--ink-soft);
}
.board-card-done .board-card-title::before {
	content: '✓ ';
	color: var(--meadow-text);
	text-decoration: none;
	display: inline-block;
	margin-right: 0.15rem;
}

.board-parked {
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px dashed var(--line-strong);
}
.board-parked-heading {
	font-size: 0.85rem;
	color: var(--ink-soft);
	margin: 0 0 0.4rem;
}
.board-parked .board-card {
	background: var(--surface-muted);
	box-shadow: none;
	border-style: dashed;
}

.board-checklist-done {
	color: var(--accent);
}

.board-card {
	position: relative;
}
.board-card .drag-handle {
	float: right;
	margin: -0.15rem -0.35rem 0 0.25rem;
}

/* Drag and drop (/app/drag.js): the handle, the item being moved and the copy under the pointer. */
.drag-handle {
	flex: none;
	color: var(--ink-faint);
	cursor: grab;
	padding: 0.1rem 0.25rem;
	line-height: 1.2;
	letter-spacing: -0.2em;
	user-select: none;
	-webkit-user-select: none;
	/* A finger on the handle drags; anywhere else it scrolls. */
	touch-action: none;
}
[data-drag-item] {
	-webkit-user-select: none;
	user-select: none;
}
/* Where the card will land: a dashed Sunrise slot (its content hidden), and a Sunrise ring on its column. */
.drag-source {
	outline: 2px dashed var(--action);
	outline-offset: -2px;
	background: var(--action-soft) !important;
	border-color: transparent !important;
	box-shadow: none !important;
}
.drag-source > * {
	visibility: hidden;
}
.is-dragging .board-column:has(.drag-source),
.is-dragging .todo-list:has(.drag-source) {
	box-shadow: inset 0 0 0 2px var(--action);
}
/* body > raises specificity above single-class item rules (.board-card is position: relative),
   which would otherwise put the clone at the end of the page instead of under the pointer. */
body > .drag-ghost {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 50;
	margin: 0;
	pointer-events: none;
	list-style: none;
	background: var(--surface);
	border: 0;
	border-radius: var(--radius);
	/* The card lifts under the pointer: tilted, ringed in ink, with a deep shadow (rotate stays apart
	   from the transform drag.js sets on every move). */
	rotate: -2.5deg;
	box-shadow: 0 0 0 2px var(--ink), var(--shadow-lift);
}
.is-dragging,
.is-dragging * {
	cursor: grabbing !important;
}
[data-drop-zone] {
	min-height: 2rem;
}
.is-dragging [data-drop-zone] {
	border-radius: var(--radius);
}

/* Steps on a card. */
.card-checklist {
	margin: 1.25rem 0;
}
.card-checklist h2 {
	font-size: 1.05rem;
}
.checklist-add {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.5rem;
}
.checklist-add .field {
	margin: 0;
	flex: 1 1 12rem;
	min-width: 0;
}
.checklist-add .field:nth-child(2) {
	flex: 0 1 10rem;
}

.board-add-card {
	display: block;
	padding: 0.4rem 0.25rem 0;
	color: var(--ink-soft);
	font-size: 0.9rem;
	text-decoration: none;
}

.board-add-card:hover {
	color: var(--accent);
}

.add-column {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 0.75rem;
	max-width: 32rem;
}

.add-column .field {
	flex: 1 1 14rem;
}

/* Schedule */

/* An org's views (Projects · People · Activity · Templates · Settings): pills, wrapping on phones. */
.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.tab {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0.4rem 1rem;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}

.tab:hover {
	color: var(--ink);
	border-color: var(--line-strong);
}

.tab-current {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--surface);
}

.tab-current:hover {
	color: var(--surface);
}

.agenda,
.agenda-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.agenda-day + .agenda-day {
	margin-top: 1.25rem;
}

.agenda-date {
	font-size: 0.95rem;
	color: var(--ink-soft);
	margin: 0 0 0.4rem;
}

.agenda-items {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.agenda-item {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	padding: 0.7rem 1rem;
}

.agenda-item + .agenda-item {
	border-top: 1px solid var(--line);
}

.agenda-item a {
	font-weight: 600;
	overflow-wrap: anywhere;
	min-width: 0;
}

.agenda-when {
	color: var(--ink-faint);
	font-size: 0.875rem;
}

.is-done a {
	color: var(--ink-faint);
	text-decoration: line-through;
}

.month-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.month-nav h2 {
	margin: 0;
	font-size: 1.6rem;
}

.month-weekdays,
.month-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* The month (R2): one card, weekday labels small and uppercase, today's date in Sky, events as chips. */
.month-weekdays {
	color: var(--ink-soft);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: left;
	padding: 0 0.5rem 0.4rem;
}

.month-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--line);
	gap: 1px;
	border: 1px solid var(--line);
	border-radius: var(--radius-panel);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.month-day {
	min-width: 0;
	min-height: 7rem;
	padding: 0.45rem;
	background: var(--surface);
}

.month-day.is-other-month {
	background: var(--surface-muted);
}

.month-day.is-other-month .month-day-number {
	color: var(--ink-faint);
}

.month-day-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.9rem;
	height: 1.9rem;
	padding: 0 0.3rem;
	border-radius: 999px;
	color: var(--ink);
	font-size: 0.85rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.month-day-number:hover {
	background: var(--accent-soft);
}

.month-day.is-today .month-day-number {
	background: var(--accent);
	color: var(--accent-ink);
}

.month-items {
	list-style: none;
	margin: 0.2rem 0 0;
	padding: 0;
	font-size: 0.78rem;
}

.month-items li + li {
	margin-top: 0.15rem;
}

.month-items a {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding: 0.15rem 0.45rem;
	border-radius: 6px;
	background: var(--accent-soft);
	color: var(--accent-text);
	font-weight: 600;
	text-decoration: none;
}

.month-items .month-todo a {
	background: none;
	color: var(--ink-soft);
}

.month-time {
	color: var(--ink-soft);
}

.checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
}

.checkbox input {
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--accent);
}

.when {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.when legend {
	padding: 0;
	margin-bottom: 0.5rem;
	font-weight: 650;
}

@media (max-width: 640px) {
	.board-column {
		flex-basis: 15rem;
	}

	.month-day {
		min-height: 4.5rem;
		padding: 0.2rem;
	}

	.month-items {
		font-size: 0.68rem;
	}

	.month-items a {
		padding: 0 0.15rem;
	}

	.month-time {
		display: none;
	}
}

/* === end cards-schedule === */

/* htmx's own indicator styles, moved here because the CSP blocks the <style> tag it would inject. */
.htmx-indicator {
	opacity: 0;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
	opacity: 1;
	transition: opacity 200ms ease-in;
}

/* While a request is in flight: its form's buttons look busy and can't be clicked twice. */
form.htmx-request button,
form.htmx-request .button,
button.htmx-request,
button:disabled.htmx-request {
	opacity: 0.6;
	pointer-events: none;
	cursor: progress;
}

.todo-check.htmx-request input {
	opacity: 0.5;
}

/* Archived projects */

.archived-banner {
	margin: 0 0 1.25rem;
	padding: 0.6rem 1rem;
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius-small);
	background: var(--surface-muted);
	color: var(--ink-soft);
	text-align: center;
	font-size: 0.925rem;
}

/* Invitations */

.invitations {
	margin-bottom: 2rem;
}

.invitation-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.invitation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	padding: 0.6rem 0;
}

.invitation + .invitation {
	border-top: 1px solid var(--line);
}

.invitation-actions,
.person-actions {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.person-invited .person-name {
	font-weight: 500;
	color: var(--ink-soft);
}

.avatar-invited {
	background: var(--surface-muted);
	color: var(--ink-faint);
	border: 1px dashed var(--line-strong);
}

/* Chat */

.chat-lines {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0.5rem 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-panel);
}

/* A line (R2): the author's avatar, then name and time over a bubble; their next lines stack under it. */
.chat-line {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	column-gap: 0.75rem;
	padding: 0.4rem 1.25rem 0.2rem;
}

.chat-line > :not(.chat-avatar) {
	grid-column: 2;
}

.chat-line .chat-avatar {
	grid-row: 1 / span 3;
	width: 36px;
	height: 36px;
	margin-top: 0.1rem;
}

.chat-bubble {
	justify-self: start;
	max-width: min(42rem, 100%);
	margin-top: 0.25rem;
	padding: 0.55rem 0.9rem;
	border-radius: 4px 16px 16px 16px;
	background: var(--bubble);
	overflow-wrap: anywhere;
}

.chat-bubble .text-body > :last-child {
	margin-bottom: 0;
}

/* Your own lines: on the right, in Sunrise's tint, without your avatar. */
.chat-line[data-own],
.chat-line.pending {
	grid-template-columns: minmax(0, 1fr);
}

.chat-line[data-own] > *,
.chat-line.pending > * {
	grid-column: 1;
	justify-self: end;
}

.chat-line[data-own] .chat-avatar {
	display: none;
}

.chat-line[data-own] .chat-meta {
	flex-direction: row-reverse;
}

.chat-line[data-own] .chat-bubble,
.chat-line.pending .text-body {
	border-radius: 16px 4px 16px 16px;
	background: var(--bubble-own);
}

.chat-line.pending .text-body {
	margin-top: 0.25rem;
	padding: 0.55rem 0.9rem;
}

/* A line continuing the same person's: no avatar or name again (both stay for screen readers). */
.chat-line-cont {
	padding-top: 0;
}

.chat-line-cont .chat-avatar {
	visibility: hidden;
	height: 0;
}

.chat-line-cont .chat-meta > .chat-author,
.chat-line-cont .chat-meta > time {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.chat-line-cont .chat-meta:not(:has(.chat-edited)) {
	display: contents;
}

.chat-day {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1.25rem 0.35rem;
	color: var(--ink-soft);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.chat-day::before,
.chat-day::after {
	content: '';
	flex: 1;
	border-top: 1px solid var(--line);
}

.chat-deleted-run {
	padding: 0.35rem 1rem;
	color: var(--ink-faint);
	font-size: 0.875rem;
}

.chat-deleted-run summary {
	cursor: pointer;
	font-style: italic;
}

.chat-deleted-run ol {
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
}

.chat-deleted-run .chat-line {
	padding-left: 0;
	padding-right: 0;
}

.chat-unread-divider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 1.25rem;
	color: var(--danger);
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.chat-unread-divider::before,
.chat-unread-divider::after {
	content: '';
	flex: 1;
	border-top: 1.5px solid var(--danger-border);
}

.chat-lines:empty {
	display: none;
}

.chat-lines:not(:empty) + .chat-empty {
	display: none;
}

.chat-meta {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	font-size: 0.875rem;
}

.chat-author {
	font-weight: 700;
}

.chat-meta time {
	color: var(--ink-faint);
}



.chat-form {
	display: flex;
	align-items: flex-end;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.chat-form .field {
	flex: 1 1 280px;
}

.chat-form .field textarea {
	min-height: 0;
}

#chat-error:empty {
	display: none;
}

/* Organizations */


.org-switcher ul {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 40;
	min-width: 240px;
	margin: 0;
	padding: 0.4rem;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lift);
}

.org-switcher li a {
	display: block;
	padding: 0.45rem 0.6rem;
	border-radius: var(--radius-small);
	color: var(--ink);
	text-decoration: none;
}

.org-switcher li a:hover,
.org-switcher li a[aria-current='true'] {
	background: var(--surface-muted);
}

.org-switcher-new {
	border-top: 1px solid var(--line);
	margin-top: 0.25rem;
	padding-top: 0.25rem;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.org-role-form select {
	font: inherit;
	font-size: 0.875rem;
	padding: 0.15rem 0.3rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-small);
	background: var(--surface);
}

.button.danger {
	border-color: var(--danger);
	color: var(--danger);
}

.danger-zone {
	border-color: var(--danger-border);
}

.card + .card {
	margin-top: 1rem;
}

/* Live: toast, presence */

.toast {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 20;
	display: none;
	max-width: min(360px, calc(100vw - 2rem));
	padding: 0.75rem 1rem;
	background: var(--ink);
	border-radius: var(--radius-small);
	box-shadow: var(--shadow);
}

.toast.show {
	display: block;
}

.toast a {
	color: var(--bg);
	text-decoration: none;
}

.presence {
	display: inline-block;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--line-strong);
	vertical-align: 0.1em;
}

.presence.online {
	background: #2f9e5b;
}

.avatar-small {
	width: 26px;
	height: 26px;
	font-size: 0.65rem;
}

.avatar-with-presence {
	position: relative;
	display: inline-flex;
}

.avatar-with-presence .presence {
	position: absolute;
	right: -1px;
	bottom: -1px;
	border: 2px solid var(--surface);
	width: 0.7rem;
	height: 0.7rem;
}

/* Chat v2: line tools, reactions, typing, presence, mentions */

.chat-line.pending {
	opacity: 0.6;
}

.chat-line-deleted p {
	margin: 0.15rem 0 0;
	font-style: italic;
}

.chat-edited {
	color: var(--ink-faint);
	font-size: 0.8rem;
}

.chat-line-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.3rem;
	font-size: 0.8rem;
}

.chat-line-tools .link-button {
	color: var(--ink-faint);
}

/*
 * Where there's a mouse, Edit, Delete and the reaction picker show on hover or focus, and a line without
 * reactions takes no extra room. On touch screens (no hover) they're always there.
 */
@media (hover: hover) {
	.chat-line:not(:hover):not(:focus-within) .chat-line-tools .link-button,
	.chat-line:not(:hover):not(:focus-within) .reaction-picker {
		display: none;
	}

	.chat-line:not(:hover):not(:focus-within) .chat-line-tools:not(:has(.reaction)) {
		display: none;
	}
}

.chat-reactions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
}

.reaction,
.reaction-choice {
	padding: 0.05rem 0.45rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	font: inherit;
	cursor: pointer;
}

.reaction[aria-pressed='true'] {
	border-color: var(--accent);
	background: var(--accent-soft);
}

.reaction-picker {
	position: relative;
}

.reaction-picker summary {
	list-style: none;
	cursor: pointer;
	padding: 0 0.45rem;
	border: 1px dashed var(--line-strong);
	border-radius: 999px;
	color: var(--ink-faint);
}

.reaction-picker summary::-webkit-details-marker {
	display: none;
}

.reaction-picker[open] > summary + * {
	margin-top: 0.3rem;
}

.reaction-picker[open] {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.mention {
	padding: 0 0.15rem;
	border-radius: 4px;
	background: var(--accent-soft);
	color: var(--accent);
	font-weight: 600;
}

.text-body a {
	overflow-wrap: anywhere;
}

.chat-typing {
	min-height: 1.4em;
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	font-style: italic;
}

/* Who's here (R2): a pill of avatars and "N here now". */
.chat-presence {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0.3rem 0.85rem 0.3rem 0.35rem;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
}

.chat-presence:empty {
	display: none;
}

.chat-presence .avatar {
	width: 30px;
	height: 30px;
}

.chat-presence .avatar + .avatar {
	margin-left: -8px;
}

.chat-here {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-left: 0.6rem;
	color: var(--meadow-text);
	font-size: 0.8667rem;
	font-weight: 700;
	white-space: nowrap;
}

.chat-here::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--meadow);
}

.chat-form {
	position: relative;
}

.mention-suggestions {
	position: absolute;
	bottom: 100%;
	left: 0;
	z-index: 10;
	min-width: 240px;
	margin: 0;
	padding: 0.3rem;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-small);
	box-shadow: var(--shadow);
}

.mention-suggestions[hidden] {
	display: none;
}

.mention-choice {
	display: block;
	width: 100%;
	padding: 0.35rem 0.5rem;
	border: 0;
	border-radius: var(--radius-small);
	background: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.mention-choice:hover,
.mention-choice:focus {
	background: var(--surface-muted);
}

.chat-edit textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-small);
	resize: vertical;
}

.chat-edit-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-top: 0.4rem;
}

.chat-edit-actions .field-hint {
	margin: 0 auto 0 0;
}

/*
 * The latest chat fills the window below the top bar: the lines scroll on their own and the composer
 * stays at the bottom. (Without :has() support it's an ordinary long page.)
 */
body:has(> main.page-fill) {
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}

main.page-fill {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	width: 100%;
	box-sizing: border-box;
	padding-bottom: 1rem;
}

main.page-fill > .page-header {
	margin-bottom: 0.75rem;
}

/* The room is one card (R2): the lines scroll, the composer stays at its foot. */
main.page-fill .chat {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-panel);
	box-shadow: var(--shadow);
	overflow: hidden;
}

main.page-fill .chat-lines {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0;
	border: 0;
	border-radius: 0;
}

main.page-fill .chat > :not(.chat-lines, .chat-new) {
	margin-left: 1rem;
	margin-right: 1rem;
}

main.page-fill .chat-form {
	padding: 0.75rem 0 0.5rem;
	border-top: 1px solid var(--line);
}

/* The composer (R2): one rounded field holding attach, the message and Send. */
.chat-input-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5rem;
	flex: 1 1 100%;
	min-width: 0;
	padding: 0.35rem 0.4rem;
	border: 1.5px solid var(--input-border);
	border-radius: 14px;
	background: var(--surface);
}

.chat-input-row:focus-within {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.chat-form .chat-input-row textarea {
	flex: 1 1 auto;
	min-height: 0;
	height: auto;
	padding: 0.5rem 0.25rem;
	border: 0;
	background: transparent;
	outline: none;
}

.chat-input-row .chat-attach-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--surface-muted);
	color: var(--ink-soft);
	cursor: pointer;
}

.chat-input-row .chat-attach-label:hover,
.chat-input-row .chat-attach-label:focus-within {
	color: var(--ink);
	text-decoration: none;
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

.chat-input-row .chat-attach-label:hover {
	outline: 0;
}

.chat-attach {
	margin: 0;
}

main.page-fill .chat-empty {
	margin: auto;
}

/* No lines yet: the empty scroller still takes the room, so the composer stays at the bottom. */
main.page-fill .chat-lines:empty {
	display: block;
	border-color: transparent;
	background: transparent;
}

.chat-earlier {
	padding: 0.5rem 1rem;
	text-align: center;
	font-size: 0.875rem;
}

.chat-new {
	position: absolute;
	left: 50%;
	bottom: 7.5rem;
	z-index: 5;
	transform: translateX(-50%);
	padding: 0.3rem 0.9rem;
	border: 0;
	border-radius: 999px;
	background: var(--accent);
	color: var(--accent-ink);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	box-shadow: var(--shadow);
	cursor: pointer;
}

.chat-new[hidden] {
	display: none;
}

.chat-form textarea {
	flex: 1 1 140px;
	min-width: 0;
	min-height: 46px;
	height: 46px;
	font: inherit;
	padding: 0.65rem 1rem;
	border: 1.5px solid var(--input-border);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
	resize: none;
}

.chat-form {
	align-items: center;
}

.chat-hint {
	flex-basis: 100%;
	margin: 0.15rem 0 0;
	font-size: 0.75rem;
}

/* Connection state (set by /app/live.js while a live socket is down). */
.connection {
	position: fixed;
	top: 0;
	left: 50%;
	z-index: 30;
	transform: translateX(-50%);
	margin-top: 0.5rem;
	padding: 0.35rem 1rem;
	border-radius: 999px;
	background: var(--ink);
	color: var(--surface);
	font-size: 0.875rem;
	box-shadow: var(--shadow);
}

.connection[hidden] {
	display: none;
}

[data-connection] .chat-presence,
[data-connection] .presence {
	opacity: 0.35;
}

/* Pings */

.ping-list {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.ping-item + .ping-item {
	border-top: 1px solid var(--line);
}

.ping-link {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.75rem 1rem;
	color: var(--ink);
	text-decoration: none;
}

.ping-link:hover {
	background: var(--surface-muted);
}

.ping-people {
	display: inline-flex;
	gap: 0.2rem;
	flex: none;
}

.ping-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

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

.ping-item.unread .ping-title {
	font-weight: 750;
}

.ping-preview {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.875rem;
}

.ping-time {
	flex: none;
	font-size: 0.8rem;
}

.ping-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.people-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--ink-soft);
}

/* A 1:1's status: the dot (updated live by the hub) and its word. */
.presence-status {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--ink-soft);
	font-size: 0.9rem;
}

.presence-status::after {
	content: 'Offline';
}

.presence-status:has(.presence.online)::after {
	content: 'Online';
}

.ping-menu {
	position: relative;
	font-size: 0.9rem;
}

.ping-menu summary {
	list-style: none;
	cursor: pointer;
	padding: 0 0.6rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-small);
	color: var(--ink-soft);
	font-weight: 700;
}

.ping-menu summary::-webkit-details-marker {
	display: none;
}

.ping-menu-body {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 10;
	display: grid;
	gap: 0.9rem;
	width: min(300px, calc(100vw - 2rem));
	padding: 0.9rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-small);
	box-shadow: var(--shadow);
}

.ping-menu-label {
	margin: 0;
	font-weight: 600;
}

.people-filter {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 0.5rem;
	padding: 0.4rem 0.6rem;
	font: inherit;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-small);
}

.person-picker-list {
	max-height: 18rem;
	overflow-y: auto;
}

.person-picker-list .checkbox[hidden] {
	display: none;
}

.person-picker {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

.person-picker legend {
	margin-bottom: 0.5rem;
	font-weight: 600;
}

.checkbox {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.25rem 0;
}



/* Skip link, flash notices, project tabs, top bar on phones */

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 30;
	padding: 0.5rem 0.9rem;
	background: var(--ink);
	color: var(--bg);
	border-radius: var(--radius-small);
	text-decoration: none;
}

.skip-link:focus {
	top: 0.5rem;
}

.flash {
	margin-bottom: 1.25rem;
}

/* A project page's context (R1): the blaze and the project's name above the page title. */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.35rem;
	color: var(--ink-soft);
	font-size: 0.8667rem;
	font-weight: 600;
}

.eyebrow a {
	color: inherit;
	text-decoration: none;
}

.eyebrow a:hover {
	color: var(--ink);
	text-decoration: underline;
}

/* The blaze: a 10×16 rounded mark in the project's color (Sunrise when it has none). */
.blaze {
	flex-shrink: 0;
	width: 10px;
	height: 16px;
	border-radius: 3px;
	background: var(--action);
}

.blaze.project-color-green { background: #13a36e; }
.blaze.project-color-blue { background: #1f4fe0; }
.blaze.project-color-purple { background: #7a3fe0; }
.blaze.project-color-orange { background: #ff5b1f; }
.blaze.project-color-red { background: #d81b5e; }
.blaze.project-color-teal { background: #0e8a8a; }
.blaze.project-color-gray { background: #7d849c; }

/* Tool tabs as pills: the current one ink-filled. The row scrolls sideways when it's tight. */
.project-tabs {
	margin: 0 0 1.5rem;
}

.project-tabs-inner {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.project-tabs ul {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	gap: 0.5rem;
	margin: 0;
	padding: 2px;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.project-tabs a,
.project-more > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 40px;
	padding: 0.45rem 1rem;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.project-tabs a:hover,
.project-more > summary:hover {
	border-color: var(--line-strong);
	color: var(--ink);
}

.project-tabs a[aria-current='page'],
.project-more > summary.more-current {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--surface);
}

/* "More": People and the Trash (and Goals and Updates once the pills get tight). */
.project-more {
	position: relative;
	flex: none;
}
.project-more > summary {
	cursor: pointer;
	list-style: none;
}
.project-more > summary::-webkit-details-marker {
	display: none;
}
.project-more > summary::after {
	content: ' ▾';
	white-space: pre;
}
.project-more > ul {
	position: absolute;
	right: 0;
	top: calc(100% + 0.35rem);
	z-index: 20;
	display: block;
	min-width: 11rem;
	padding: 0.4rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lift);
	overflow: visible;
}
.project-more > ul a {
	display: block;
	min-height: 0;
	padding: 0.45rem 0.6rem;
	border: 0;
	border-radius: var(--radius-small);
	background: none;
	color: var(--ink);
}
.project-more > ul a:hover {
	background: var(--surface-muted);
}
.project-more > ul a[aria-current='page'] {
	background: var(--surface-muted);
	color: var(--ink);
	font-weight: 700;
}
.project-more .more-narrow {
	display: none;
}
@media (max-width: 1000px) {
	.project-tabs .tab-narrow-hidden {
		display: none;
	}
	.project-more .more-narrow {
		display: block;
	}
	.project-more > summary.more-current-narrow {
		background: var(--ink);
		border-color: var(--ink);
		color: var(--surface);
	}
}

/* Sub-views (My work's tabs, Updates' views) and filter chips: small pills. */
.sub-tabs ul,
.filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}
.sub-tabs a,
.filter-chips a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0.3rem 0.95rem;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}
.sub-tabs a:hover,
.filter-chips a:hover {
	border-color: var(--line-strong);
	color: var(--ink);
}
.sub-tabs a[aria-current='page'],
.filter-chips a[aria-current='page'] {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--surface);
}
.due-soon-more {
	margin: 0.5rem 0 0;
}

.due-soon {
	margin-bottom: 1.25rem;
}

.presence {
	background: var(--input-border);
}

/* Phones (R1): a slim header (the mark, the org, the avatar) and the places as a bottom bar. */
@media (max-width: 640px) {
	.topbar-inner {
		gap: 0.5rem;
		padding: 0.5rem 1rem;
		min-height: 56px;
	}

	.brand-name {
		display: none;
	}

	.brand-mark {
		width: 30px;
		height: 30px;
	}

	.org-switcher {
		flex: 1 1 auto;
	}

	.account-menu {
		margin-left: auto;
	}

	.nav-places {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 30;
		justify-content: space-around;
		gap: 0;
		margin: 0;
		padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom));
		background: var(--header-bg);
		border-top: 1px solid var(--line);
	}

	.nav-places > li {
		flex: 1 1 0;
	}

	.nav-places .place-wide,
	.place-key {
		display: none;
	}

	.place {
		position: relative;
		flex-direction: column;
		gap: 0.1rem;
		width: 100%;
		min-height: 52px;
		padding: 0.3rem 0.25rem;
		font-size: 0.75rem;
		font-weight: 700;
	}

	.place .icon {
		display: block;
	}

	/* The board's order on phones: Home, Inbox, My work, Find. */
	.nav-places .place-inbox {
		order: 1;
	}

	.nav-places .place-mywork {
		order: 2;
	}

	.nav-places .place-find {
		order: 3;
	}

	/* Where you are: an ink label, a heavier icon and a Sunrise bar on top; no pill. */
	.place[aria-current='page'] {
		color: var(--ink);
		background: none;
	}

	.place[aria-current='page'] .icon {
		stroke-width: 2.6;
	}

	.place[aria-current='page']::before {
		content: '';
		position: absolute;
		top: -0.35rem;
		left: 30%;
		right: 30%;
		height: 3px;
		border-radius: 0 0 3px 3px;
		background: var(--action);
	}

	.place .badge {
		position: absolute;
		top: 0;
		left: calc(50% + 0.25rem);
		margin: 0;
	}

	/* Room for the bottom bar. */
	body {
		padding-bottom: 72px;
	}

	/* The pills scroll sideways: their right edge fades while there's more. */
	.project-tabs ul {
		mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
	}

	.project-tabs ul.scrolled-end {
		mask-image: none;
	}
}

@media (pointer: coarse) {
	.icon-button {
		width: 2.5rem;
		height: 2.5rem;
	}
}

/* Schedule: overdue first; the month as a list on phones */

.due-overdue {
	color: var(--danger);
	font-weight: 600;
}

.due-today {
	color: var(--action-text);
	font-weight: 600;
}

.agenda-overdue {
	margin-bottom: 1.5rem;
}

.month-agenda {
	display: none;
}

@media (max-width: 640px) {
	.month-agenda {
		display: block;
		margin-top: 1.25rem;
	}

	/* The grid stays for orientation: one dot per item instead of unreadable text. */
	.month-items a {
		display: block;
		width: 0.45rem;
		height: 0.45rem;
		padding: 0;
		overflow: hidden;
		border-radius: 50%;
		background: var(--accent);
		color: transparent;
	}

	.month-items {
		display: flex;
		flex-wrap: wrap;
		gap: 2px;
	}
}


/* People rows on phones: name and email get the row; role and actions wrap below, under the text. */
@media (max-width: 640px) {
	.person-text {
		flex: 1 1 calc(100% - 3.5rem);
	}

	.person-role {
		margin-left: calc(32px + 0.75rem);
	}

	.person-actions {
		margin-left: auto;
	}
}

/* Tools' live summaries on the project page, and Your work on the org home */

.tool-summary {
	color: var(--ink-soft);
	font-size: 0.875rem;
	overflow-wrap: anywhere;
}

.tool-summary strong {
	color: var(--ink);
	font-weight: 600;
}

.your-work {
	margin-bottom: 1.75rem;
}

.your-work h2 {
	font-size: 1.1rem;
	margin: 0 0 0.75rem;
}

.work-group h3 {
	margin: 0.75rem 0 0.35rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.work-group h3.due-overdue {
	color: var(--danger);
}

.work-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.work-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	padding: 0.4rem 0;
	border-top: 1px solid var(--line);
}

.work-meta {
	color: var(--ink-faint);
	font-size: 0.85rem;
}

/* Board: card and column controls behind a ⋯ menu */

.card-menu,
.column-menu {
	position: relative;
	margin-top: 0.35rem;
}

.card-menu > summary,
.column-menu > summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.75rem;
	height: 1.5rem;
	padding: 0 0.4rem;
	border-radius: var(--radius-small);
	color: var(--ink-soft);
	cursor: pointer;
	list-style: none;
	line-height: 1;
}

.card-menu > summary::-webkit-details-marker,
.column-menu > summary::-webkit-details-marker {
	display: none;
}

.card-menu > summary:hover,
.column-menu > summary:hover,
.card-menu[open] > summary,
.column-menu[open] > summary {
	background: var(--surface-muted);
	color: var(--ink);
}

.card-menu .board-card-actions,
.column-menu .board-column-actions {
	margin-top: 0.4rem;
}

/* The menus show on hover or focus on devices that hover; touch screens always see them. */
@media (hover: hover) {
	.board-card:not(:hover):not(:focus-within) .card-menu:not([open]) > summary {
		visibility: hidden;
	}
}

@media (max-width: 640px) {
	.board {
		scroll-snap-type: x mandatory;
	}

	.board-column {
		flex-basis: 85vw;
		scroll-snap-align: start;
	}
}

/* To-dos: quick add */

.todo-quick-add {
	padding: 1rem 1.25rem;
	margin: 1rem 0;
}

.todo-quick-row {
	display: flex;
	align-items: flex-end;
	gap: 0.6rem;
}

.todo-quick-row .field {
	flex: 1;
	margin-bottom: 0;
}

.todo-more {
	margin-top: 0.75rem;
}

.todo-more > summary {
	cursor: pointer;
	color: var(--ink-soft);
	font-size: 0.9rem;
}

.todo-more[open] > summary {
	margin-bottom: 0.75rem;
}

.todo-list-card .todo-quick-add {
	margin: 0.75rem 0 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: none;
}

.todo-list-card .todo-quick-add label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.todo-list-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
}

.todo-list-head h2 {
	margin-bottom: 0.25rem;
}

/* Reading width for long text */
.message .text-body,
.detail .text-body {
	max-width: 70ch;
}

/* The ⋯ menus sit in the top-right corner and open as a small panel, so cards stay compact. */
.board-card,
.board-column-header {
	position: relative;
}

.board-card {
	padding-right: 2.25rem;
}

.board-column-header h2 {
	padding-right: 2rem;
}

.card-menu,
.column-menu {
	position: absolute;
	top: 0.45rem;
	right: 0.4rem;
	margin: 0;
}

.column-menu {
	top: -0.15rem;
	right: -0.25rem;
}

.card-menu[open] .board-card-actions,
.column-menu[open] .board-column-actions {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	z-index: 5;
	width: max-content;
	max-width: 16rem;
	margin: 0;
	padding: 0.5rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-small);
	box-shadow: var(--shadow);
}

/* Delete, remove and cancel: the same quiet danger style everywhere (red text, neutral border). */
.button-danger {
	color: var(--danger);
}

.button-danger:hover {
	border-color: var(--danger);
	background: var(--danger-soft);
}

/* Comment Delete appears on hover or focus (touch screens always see it). */
@media (hover: hover) {
	.comment:not(:hover):not(:focus-within) .comment-meta form {
		visibility: hidden;
	}
}

/* Event form: all-day events hide their times; a little room between Starts and Ends. */
form:has(input[name='all_day']:checked) .field:has(input[type='time']) {
	display: none;
}

.when + .when {
	margin-top: 1rem;
}

/* The Invite button lines up with the input, not the input plus its hint. */
.add-person {
	align-items: flex-start;
}

.add-person > .button {
	margin-top: 1.85rem;
}

.month-nav-end {
	display: inline-flex;
	gap: 0.4rem;
}

/* Agenda: to-dos read as to-dos */
.agenda-todo > a::before {
	content: '☐ ';
	color: var(--ink-faint);
}

.agenda-todo.is-done > a::before {
	content: '☑ ';
}

/* Trash */

.trash-list {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.trash-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding: 0.85rem 1rem;
}

.trash-item + .trash-item {
	border-top: 1px solid var(--line);
}

.trash-text {
	min-width: 0;
	flex: 1 1 18rem;
	overflow-wrap: anywhere;
}

.trash-kind {
	display: inline-block;
	margin-right: 0.5rem;
	padding: 0.05rem 0.45rem;
	border-radius: 999px;
	background: var(--surface-muted);
	border: 1px solid var(--line);
	color: var(--ink-soft);
	font-size: 0.75rem;
	font-weight: 600;
}

.trash-label {
	font-weight: 600;
}

.trash-meta {
	display: block;
	margin-top: 0.2rem;
}

.trash-actions {
	display: inline-flex;
	gap: 0.5rem;
}

.flash {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 1rem;
}

.project-footer {
	margin-top: 1.5rem;
	text-align: center;
	font-size: 0.9rem;
}

.project-footer a {
	color: var(--ink-soft);
}

/* Activity, My work, bookmarks */

.activity {
	margin: 0;
	padding: 0;
	list-style: none;
}

.activity-day + .activity-day {
	margin-top: 1.25rem;
}

.activity-items {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.activity-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	padding: 0.65rem 1rem;
}

.activity-item + .activity-item {
	border-top: 1px solid var(--line);
}

.activity-text {
	min-width: 0;
	flex: 1 1 20rem;
	overflow-wrap: anywhere;
}

.activity-excerpt {
	display: block;
	margin-top: 0.15rem;
	color: var(--ink-soft);
	font-size: 0.9rem;
}

.activity-time {
	flex: none;
	font-size: 0.8rem;
}

.activity-more {
	margin-top: 1rem;
	text-align: center;
}

.person-activity {
	color: var(--ink-soft);
}

.my-work-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: 1rem;
}

.bookmark::before {
	content: '☆ ';
}

.bookmark[aria-pressed='true']::before {
	content: '★ ';
	color: var(--accent);
}

.my-work-columns {
	align-items: start;
}

.my-work-columns .your-work {
	margin-bottom: 0;
}


/* Search (P6) */

.search-form {
	margin-bottom: 1.5rem;
}

.search-row {
	display: flex;
	gap: 0.75rem;
}

.search-row input {
	flex: 1;
	min-width: 0;
	min-height: 46px;
	padding: 0.6rem 0.9rem;
	border: 1.5px solid var(--input-border);
	border-radius: var(--radius);
	font: inherit;
}

.search-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	margin-top: 1rem;
	font-size: 0.875rem;
	color: var(--ink-soft);
}

.search-filters label {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	font-weight: 700;
}

.search-filters select {
	max-width: 14rem;
	font: inherit;
	color: var(--ink);
}

/* Results (R2): one card of rows, each kind as a small chip, the matched words in Sun. */
.search-results {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-panel);
	box-shadow: var(--shadow);
}

.search-result {
	padding: 0.9rem 1.25rem;
}

.search-result + .search-result {
	border-top: 1px solid var(--line);
}

.search-meta {
	margin: 0 0 0.2rem;
	color: var(--ink-soft);
	font-size: 0.8rem;
}

.search-kind {
	display: inline-block;
	margin-right: 0.5rem;
	padding: 0.05rem 0.45rem;
	border-radius: 6px;
	background: var(--surface-muted);
	color: var(--ink-soft);
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.search-title {
	color: var(--ink);
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.search-title:hover {
	color: var(--ink);
	text-decoration: underline;
}

.search-excerpt {
	margin: 0.25rem 0 0;
	color: var(--ink-soft);
	font-size: 0.9rem;
	overflow-wrap: anywhere;
}

mark {
	padding: 0 0.1em;
	border-radius: 3px;
	background: var(--mark-bg);
	color: inherit;
}

.pager {
	display: flex;
	justify-content: space-between;
	margin-top: 1rem;
}

/* The quick switcher */

.jump {
	width: min(560px, calc(100vw - 2rem));
	margin: 12vh auto auto;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
	box-shadow: var(--shadow);
}

.jump::backdrop {
	background: rgb(0 0 0 / 0.25);
}

.jump-form input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.9rem 1rem;
	border: 0;
	border-bottom: 1px solid var(--line);
	font: inherit;
	font-size: 1.05rem;
	background: transparent;
	color: inherit;
}

.jump-form input:focus {
	outline: none;
}

.jump-results {
	max-height: 50vh;
	overflow-y: auto;
	margin: 0;
	padding: 0.35rem;
	list-style: none;
}

.jump-results ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jump-group + .jump-group {
	margin-top: 0.35rem;
}

.jump-group-title {
	display: block;
	padding: 0.35rem 0.65rem 0.15rem;
	color: var(--ink-faint);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.jump-form-action {
	margin: 0;
}

.jump-results .jump-form-action button {
	width: 100%;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.jump-results a,
.jump-results .jump-form-action button {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.5rem 0.65rem;
	border-radius: var(--radius-small);
	color: var(--ink);
	text-decoration: none;
}

.jump-results [aria-selected='true'] a,
.jump-results [aria-selected='true'] button,
.jump-results a:hover,
.jump-results .jump-form-action button:hover {
	background: var(--accent-soft);
}

.jump-kind {
	flex: none;
	width: 4.5rem;
	color: var(--ink-faint);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
}

.jump-label {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.jump-detail {
	margin-left: auto;
	color: var(--ink-soft);
	font-size: 0.8rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.jump-empty {
	padding: 0.6rem 0.65rem;
}

.jump-hint {
	margin: 0;
	padding: 0.5rem 1rem;
	border-top: 1px solid var(--line);
	font-size: 0.75rem;
}

/* Formatted text (P7): the Markdown subset rendered by lib/markdown */

.formatted > :first-child {
	margin-top: 0;
}

.formatted > :last-child {
	margin-bottom: 0;
}

.formatted p,
.formatted ul,
.formatted ol,
.formatted pre,
.formatted blockquote {
	margin: 0 0 0.6em;
}

.formatted ul,
.formatted ol {
	padding-left: 1.4em;
}

.formatted li + li {
	margin-top: 0.15em;
}

.formatted blockquote {
	padding: 0.1em 0 0.1em 0.8em;
	border-left: 3px solid var(--line-strong);
	color: var(--ink-soft);
}

.formatted code {
	padding: 0.05em 0.3em;
	border-radius: 4px;
	background: var(--surface-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

.formatted pre {
	overflow-x: auto;
	padding: 0.6em 0.8em;
	border-radius: var(--radius-small);
	background: var(--surface-muted);
	white-space: pre;
}

.formatted pre code {
	padding: 0;
	background: none;
}

.format-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-bottom: 0.35rem;
}

.format-button {
	padding: 0.15rem 0.55rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-small);
	background: var(--surface);
	color: var(--ink-soft);
	font: inherit;
	font-size: 0.8rem;
	cursor: pointer;
}

.format-button:hover {
	color: var(--ink);
	border-color: var(--line-strong);
}

.format-bold {
	font-weight: 700;
}

.format-italic {
	font-style: italic;
}

.format-preview-toggle {
	margin-left: auto;
}

.format-preview-toggle[aria-pressed='true'] {
	border-color: var(--accent);
	color: var(--accent);
}

.format-preview-area {
	min-height: 6rem;
	padding: 0.6rem 0.75rem;
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius-small);
	background: var(--surface);
}

.format-preview-area[hidden] {
	display: none;
}


/* Files tool (P8) */

.folder-crumbs {
	margin-bottom: 0.5rem;
	color: var(--ink-soft);
	font-size: 0.9rem;
}

.docs-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.upload-form,
.folder-form,
.attach-form,
.avatar-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

.upload-form label,
.folder-form label {
	flex-basis: 100%;
	font-weight: 600;
}

.upload-form .field-hint,
.avatar-form .field-hint {
	flex-basis: 100%;
	margin: 0;
}

.folder-form input[type='text'] {
	flex: 1;
	min-width: 0;
	padding: 0.35rem 0.6rem;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-small);
	font: inherit;
}

.docs-list {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.docs-item {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.65rem 1rem;
}

.docs-item + .docs-item {
	border-top: 1px solid var(--line);
}

.docs-item a {
	font-weight: 600;
	color: var(--ink);
	overflow-wrap: anywhere;
}

.docs-icon {
	width: 1.2rem;
	color: var(--accent);
	text-align: center;
}

.docs-meta {
	margin-left: auto;
	color: var(--ink-soft);
	font-size: 0.85rem;
	white-space: nowrap;
}

.storage {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
	color: var(--ink-soft);
	font-size: 0.85rem;
}

.storage-bar {
	width: 160px;
	height: 6px;
	border-radius: 999px;
	background: var(--surface-muted);
	overflow: hidden;
}

.storage-fill {
	display: block;
	height: 100%;
	background: var(--accent);
}

.storage-0 { width: 1%; }
.storage-10 { width: 10%; }
.storage-20 { width: 20%; }
.storage-30 { width: 30%; }
.storage-40 { width: 40%; }
.storage-50 { width: 50%; }
.storage-60 { width: 60%; }
.storage-70 { width: 70%; }
.storage-80 { width: 80%; background: #b7791f; }
.storage-90 { width: 90%; background: var(--danger); }
.storage-100 { width: 100%; background: var(--danger); }

.file-preview {
	display: block;
	max-width: 100%;
	max-height: 70vh;
	margin-top: 0.5rem;
	border-radius: var(--radius-small);
	border: 1px solid var(--line);
}

.version + .version {
	margin-top: 0.75rem;
}

.version summary {
	cursor: pointer;
}

/* Attachments, on things, comments and chat lines */

.attachments {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.attachment {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.6rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-small);
	background: var(--surface);
	font-size: 0.875rem;
}

.attachment a {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--ink);
}

.attachment-thumb {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 4px;
}

.attachment-name {
	overflow-wrap: anywhere;
}

.subject-files {
	margin-top: 1rem;
}

.attach-form {
	margin-top: 0.75rem;
	font-size: 0.875rem;
}

.comment-file {
	margin-right: auto;
	font-size: 0.85rem;
}

/* Avatars */

.avatar-img {
	object-fit: cover;
	padding: 0;
}

.avatar-settings {
	display: grid;
	gap: 0.6rem;
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
}

.avatar-settings h2 {
	margin: 0;
	font-size: 1rem;
}

.avatar-settings .avatar {
	width: 64px;
	height: 64px;
	font-size: 1.2rem;
}

.chat-attach {
	margin-top: 0.35rem;
	font-size: 0.8rem;
}

.chat-attach-label {
	color: var(--ink-soft);
	cursor: pointer;
}

.chat-attach-label:hover,
.chat-attach-label:focus-within {
	color: var(--ink);
	text-decoration: underline;
}
.docs-actions { align-items: start; }

/* Check-ins (P9) */

.checkin-list {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.checkin-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1rem;
	padding: 0.75rem 1rem;
}

.checkin-item + .checkin-item {
	border-top: 1px solid var(--line);
}

.checkin-item a {
	font-weight: 600;
	color: var(--ink);
}

.checkin-meta {
	margin-left: auto;
	color: var(--ink-soft);
	font-size: 0.85rem;
}

.badge-quiet {
	color: var(--ink-faint);
}

.checkin-schedule,
.person-picker {
	margin: 0;
	padding: 0;
	border: 0;
}

.checkin-schedule legend,
.person-picker legend {
	margin-bottom: 0.4rem;
	font-weight: 600;
}

.radio {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.15rem 0;
}

.weekday-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0.5rem 0;
}

.round {
	margin-top: 1.75rem;
}

.answer-list {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.answer-list:empty {
	display: none;
}

.answer {
	padding: 0.75rem 1rem;
}

.answer + .answer {
	border-top: 1px solid var(--line);
}

.answer-meta {
	margin: 0 0 0.25rem;
	color: var(--ink-soft);
	font-size: 0.85rem;
}

.answer-meta strong {
	color: var(--ink);
}

.answer-form {
	margin-top: 0.75rem;
}

/* P10.5: file fields look like the app's controls (the browser's picker button restyled; the chosen
   file's name, or "No file chosen", follows it). */
.file-input {
	max-width: 100%;
	color: var(--ink-soft);
	font: inherit;
	font-size: 0.9rem;
}
.file-input::file-selector-button {
	margin-right: 0.6rem;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	font-weight: 550;
	cursor: pointer;
}
.file-input::file-selector-button:hover {
	background: var(--surface-muted);
}
.file-input:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	border-radius: var(--radius-small);
}

/* Files: New document · Upload a file · New folder in one row; the forms open under their button. */
.docs-toolbar {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.6rem;
	margin-bottom: 1.25rem;
}
.docs-tool > summary {
	list-style: none;
}
.docs-tool > summary::-webkit-details-marker {
	display: none;
}
.docs-tool[open] > summary {
	background: var(--surface-muted);
}
/* The open form drops down under the row, from its left edge (so it fits on a phone too). */
.docs-tool form {
	position: absolute;
	top: calc(100% + 0.4rem);
	left: 0;
	z-index: 10;
	width: min(30rem, 100%);
	padding: 1rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.upload-form.file-over {
	border: 2px dashed var(--accent);
	background: var(--accent-soft);
}

/* Document headings (# → h2, ## → h3, ### → h4; the page title is the h1). */
.formatted h2 {
	font-size: 1.35rem;
	margin: 1.4rem 0 0.5rem;
}
.formatted h3 {
	font-size: 1.15rem;
	margin: 1.2rem 0 0.4rem;
}
.formatted h4 {
	font-size: 1rem;
	margin: 1rem 0 0.35rem;
}
.formatted > :first-child {
	margin-top: 0;
}

/* Onboarding: an empty org's next steps. */
.next-steps-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 1rem;
}

/* Check-ins: the timing as a sentence. */
.schedule-sentence {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0.4rem 0;
}
.schedule-sentence select {
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-small);
	background: var(--surface);
	color: var(--ink);
	font: inherit;
}

.profile-orgs {
	margin-top: 1.5rem;
}
.profile-orgs h2 {
	font-size: 1.05rem;
}

/* Activity: the filters, and the project as plain text. */
.activity-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 1rem;
}
.activity-filters label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	font-size: 0.9rem;
}
.activity-filters select {
	padding: 0.3rem 0.5rem;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-small);
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	font-weight: 400;
}

/* Goals (D1): progress as a native <progress> bar, the pace in words. */
.goal-list {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
}
.goal-item {
	margin-bottom: 0.75rem;
	padding: 1rem 1.25rem;
}
.goal-title {
	display: inline-block;
	margin-bottom: 0.35rem;
	color: var(--ink);
	font-weight: 650;
	font-size: 1.05rem;
	text-decoration: none;
	overflow-wrap: anywhere;
}
.goal-title:hover {
	text-decoration: underline;
}
.goal-list-compact {
	margin-bottom: 0.25rem;
}
.goal-list-compact li {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--line);
}
.goal-list-compact .goal-progress {
	margin-bottom: 0;
}
.goal-list-compact li:last-child {
	border-bottom: 0;
}
.goal-progress {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.75rem;
	margin-bottom: 0.5rem;
}
.goal-progress progress {
	flex: 1 1 10rem;
	max-width: 22rem;
	height: 0.6rem;
	appearance: none;
	border: 0;
	border-radius: 999px;
	background: var(--line);
	overflow: hidden;
}
.goal-progress progress::-webkit-progress-bar {
	background: var(--line);
	border-radius: 999px;
}
.goal-progress progress::-webkit-progress-value {
	background: var(--accent);
	border-radius: 999px;
}
.goal-progress progress::-moz-progress-bar {
	background: var(--accent);
	border-radius: 999px;
}
.goal-progress-text {
	font-size: 0.9rem;
	font-weight: 600;
}
.goal-pace {
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.1rem 0.55rem;
	border-radius: 999px;
	background: var(--surface-muted);
	color: var(--ink-soft);
}
.goal-pace-on-track,
.goal-pace-reached,
.goal-pace-all-done {
	background: var(--accent-soft);
	color: var(--accent);
}
.goal-pace-behind,
.goal-pace-past-target {
	background: var(--danger-soft);
	color: var(--danger);
}
.goals-reached-heading {
	font-size: 1rem;
	color: var(--ink-soft);
	margin-top: 1.5rem;
}
.goal-links {
	margin-top: 1.25rem;
}
.goal-links h2 {
	font-size: 1.05rem;
}
.goal-link-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
}
.goal-link-form label {
	font-weight: 600;
	font-size: 0.9rem;
}
.goal-link-form select {
	min-width: 0;
	max-width: 100%;
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-small);
	background: var(--surface);
	color: var(--ink);
	font: inherit;
}
.counts-toward {
	margin: 0.75rem 0;
}
.counts-toward-list {
	margin: 0 0 0.25rem;
}

/* Weekly digest (D2): sections in two columns on wide screens. */
/* Columns (not a grid), so short and long sections pack without gaps under the short ones. */
.digest {
	columns: 2 22rem;
	column-gap: 1rem;
}
.digest > .digest-section {
	margin: 0 0 1rem;
	break-inside: avoid;
}
.digest-section h2 {
	font-size: 1.05rem;
}

/* My work (D3): saved views as chips (they scroll sideways on phones), the filter bar, "Save this view". */
.view-chips ul {
	display: flex;
	gap: 0.4rem;
	margin: 0 0 0.75rem;
	padding: 0 0 0.25rem;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}
.view-chips li {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: none;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: var(--surface);
}
.view-chips li > a {
	padding: 0.3rem 0.8rem;
	color: var(--ink-soft);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.view-chips li:has(> a[aria-current='page']) {
	border-color: var(--accent);
	background: var(--accent-soft);
}
.view-chips li > a[aria-current='page'] {
	color: var(--accent);
}
.view-chips .view-menu {
	position: static;
	margin: 0 0.3rem 0 -0.3rem;
}
.view-chips .view-menu[open] .board-card-actions {
	position: fixed;
	top: auto;
	right: auto;
	margin-top: 0.3rem;
}
.view-rename input {
	width: 10rem;
	padding: 0.25rem 0.4rem;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-small);
	font: inherit;
}
.work-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0 0 1rem;
}
.work-filters label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9rem;
	font-weight: 600;
}
.work-filters select {
	max-width: 14rem;
	padding: 0.3rem 0.5rem;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-small);
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	font-weight: 400;
}
.save-view {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	font-size: 0.9rem;
}
.save-view input {
	min-width: 0;
	flex: 0 1 16rem;
	padding: 0.3rem 0.5rem;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-small);
	font: inherit;
}

/* Project Pulse (D5): a calm line, a dot by level (colour plus words; never colour alone). */
.pulse {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0 0 1.25rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}
.pulse p {
	margin: 0;
}
.pulse-dot {
	display: inline-block;
	flex: none;
	width: 0.65rem;
	height: 0.65rem;
	border-radius: 50%;
	background: var(--accent);
}
.pulse-dot.pulse-look {
	background: #b07a00;
}
.pulse-dot.pulse-attention {
	background: var(--danger);
}
.pulse-tag {
	display: inline-flex;
	align-items: center;
	margin-right: 0.4rem;
	vertical-align: middle;
}
.pulse-word {
	margin-left: 0.3rem;
	font-size: 0.8rem;
	color: var(--ink-soft);
}
/* Owners' Workload: collapsed, sentences only. */
.workload {
	margin-top: 1rem;
}
.workload > summary {
	cursor: pointer;
	font-weight: 600;
}
.workload-lines {
	margin: 0.75rem 0 0;
	padding-left: 1.2rem;
}
.workload-lines li + li {
	margin-top: 0.35rem;
}

/* P11 schedule depth: the repeat fields, occurrences that carry on across days, feed addresses. */
.repeat-interval {
	width: 4.5rem;
	padding: 0.3rem 0.4rem;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-small);
	font: inherit;
}
.when.repeat .schedule-sentence label {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	max-width: 100%;
}
.when.repeat select {
	min-width: 0;
	max-width: 100%;
}
.when.repeat input[type='date'] {
	padding: 0.3rem 0.4rem;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-small);
	font: inherit;
}
.month-items a.continues-before {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-left: 3px solid var(--accent);
}
.month-items a.continues-after::after {
	content: ' →';
	color: var(--ink-faint);
}
.repeat-mark {
	color: var(--ink-faint);
}
.event-repeat,
.event-attendees {
	margin: 0 0 0.5rem;
}
.feed-url {
	width: 100%;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-small);
	font: 0.85rem ui-monospace, SFMono-Regular, Menlo, monospace;
	background: var(--surface-muted);
}
.feed-created {
	border-color: var(--accent);
}
.feed-actions {
	display: inline-flex;
	gap: 0.75rem;
	margin-left: auto;
}
.when.repeat [hidden] {
	display: none !important;
}

/* Round 4: on touch screens the drag handle is a 44 × 44 target (negative margins keep the layout). */
@media (pointer: coarse) {
	.drag-handle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		margin: -12px -10px -12px -12px;
	}
}

/* Detail pages (to-dos and cards): one ⋯ menu of secondary actions in the header. */
.detail-actions {
	position: relative;
}
.detail-actions > summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	min-height: 2.25rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-small);
	background: var(--surface);
	cursor: pointer;
	list-style: none;
	font-weight: 700;
}
.detail-actions > summary::-webkit-details-marker {
	display: none;
}
.detail-actions > ul {
	position: absolute;
	right: 0;
	top: calc(100% + 0.25rem);
	z-index: 20;
	min-width: 12rem;
	margin: 0;
	padding: 0.35rem 0;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-small);
	box-shadow: var(--shadow);
}
.detail-actions > ul > li > a,
.detail-actions > ul > li .link-button {
	display: block;
	width: 100%;
	padding: 0.45rem 0.9rem;
	text-align: left;
	text-decoration: none;
	color: var(--ink);
	border-bottom: 0;
}
.detail-actions > ul > li .danger-link {
	color: var(--danger);
}
/* An item that opens a small form in place (attach a file, move a card). */
.detail-actions .menu-form > summary {
	padding: 0.45rem 0.9rem;
	cursor: pointer;
	list-style: none;
}
.detail-actions .menu-form > summary::-webkit-details-marker {
	display: none;
}
.detail-actions .menu-form[open] > summary {
	font-weight: 600;
}
.detail-actions .menu-form > form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	padding: 0.25rem 0.9rem 0.6rem;
	margin: 0;
}
/* The summary already says "Attach a file": its label stays for screen readers only. */
.detail-actions .menu-form .attach-form > label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.detail-actions .menu-form select,
.detail-actions .menu-form input[type='file'] {
	max-width: 100%;
}

/* The project's tool picker (Edit project). */
.tool-picker {
	margin-top: 1rem;
}

/* P12 email settings: plain groups, each choice with its explanation under it. */
.email-settings fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}
.email-settings fieldset + fieldset,
.email-settings fieldset + .switch-row {
	margin-top: 1.1rem;
}
.email-settings legend {
	font-weight: 650;
	margin-bottom: 0.4rem;
}
.email-settings input[name='digest_hour'] {
	max-width: 6rem;
}
.quiet-hours {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
}
.quiet-hours .field {
	flex: 0 1 10rem;
}

/* P13 guests: the "Visible to guests" badge (on shared items and every composer writing into them),
   the share control, and the guest pages. */
.guest-badge {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem;
	margin: 0 0 0.6rem;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	/* Amber, unlike anything else on a page: it has to be noticed before writing. */
	background: var(--guest-bg);
	border: 1px solid var(--guest-border);
	color: var(--ink);
	font-size: 0.85rem;
	font-weight: 650;
}
.guest-badge::before {
	content: '◐';
	font-weight: 400;
}
.guest-badge-note {
	font-weight: 400;
	color: var(--ink-soft);
}
.guest-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin: 0 0 1rem;
}
.guest-share .guest-badge {
	margin: 0;
}
/* Phones: sharing is a secondary action, so it reads as a link, not a big button (review 5, #13). */
@media (max-width: 640px) {
	.guest-share-button {
		background: none;
		border: 0;
		padding: 0;
		min-height: 0;
		color: var(--accent);
		font-weight: 500;
		text-decoration: underline;
	}
}
.guest-crumbs {
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
}
.guest-section {
	margin-bottom: 1rem;
}
.guest-section ul,
.guest-todos {
	margin: 0;
	padding: 0;
	list-style: none;
}
.guest-section li,
.guest-todos li {
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--line);
}
.guest-section li:last-child,
.guest-todos li:last-child {
	border-bottom: 0;
}
.guest-invitation {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.guests {
	margin-top: 1.5rem;
}

.guest-tag {
	margin-left: 0.35rem;
	padding: 0 0.4rem;
	border-radius: 999px;
	background: var(--guest-bg);
	border: 1px solid var(--guest-border);
	font-size: 0.75rem;
	font-weight: 650;
}

/* P14 project look: a color (fixed set) as the card's top edge and the swatch, an icon before the name. */
.project-color-green { --project-color: #2f6b4f; }
.project-color-blue { --project-color: #2f5f9e; }
.project-color-purple { --project-color: #6b4fa0; }
.project-color-orange { --project-color: #b8641e; }
.project-color-red { --project-color: #b3402f; }
.project-color-teal { --project-color: #1f7a7a; }
.project-color-gray { --project-color: #6f695f; }
.project-card[class*='project-color-'] {
	border-top: 4px solid var(--project-color);
}
.project-icon {
	font-size: 1.05em;
}
.look-picker {
	border: 0;
	margin: 0;
	padding: 0;
}
.look-picker legend {
	font-weight: 650;
	margin-bottom: 0.4rem;
}
.look-colors,
.look-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.6rem;
}
.look-picker label.look-swatch,
.look-picker label.look-icon {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	cursor: pointer;
	font-size: 0.9rem;
}
.look-swatch[class*='project-color-']::before {
	content: '';
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 50%;
	background: var(--project-color);
	order: 1;
}
.look-picker label input {
	width: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
}
.look-swatch:has(input:checked),
.look-icon:has(input:checked) {
	border-color: var(--accent);
	background: var(--accent-soft);
}
.settings-section {
	margin-top: 1rem;
}
.template-preview ul {
	margin: 0.3rem 0 0.6rem;
}
.template-outline {
	margin: 0.2rem 0 0;
	font-size: 0.85rem;
	white-space: pre-wrap;
}

/* P15: keyboard shortcuts (the "?" dialog and /shortcuts), and the offline page. */
.shortcuts {
	margin: 0;
}
.shortcut {
	display: flex;
	gap: 1rem;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--line);
}
.shortcut:last-child {
	border-bottom: 0;
}
.shortcut dt {
	flex: 0 0 8.5rem;
}
.shortcut dd {
	margin: 0;
}
kbd {
	display: inline-block;
	min-width: 1.6em;
	padding: 0.05rem 0.4rem;
	border: 1px solid var(--line-strong);
	border-bottom-width: 2px;
	border-radius: var(--radius-small);
	background: var(--surface-muted);
	font: inherit;
	font-size: 0.85rem;
	text-align: center;
}
.shortcuts-dialog {
	width: min(32rem, calc(100% - 2rem));
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
	box-shadow: var(--shadow);
}
.shortcuts-dialog::backdrop {
	background: rgb(0 0 0 / 0.35);
}
.shortcuts-dialog h2 {
	margin-top: 0;
}
.shortcuts-dialog form {
	margin-top: 1rem;
	text-align: right;
}
.offline .brand-mark {
	width: 56px;
	height: 56px;
	background-image: url('/mark.svg');
}

/* R4: empty is a foundation. Every "nothing here yet" box starts with three dashed bricks. */
.empty::before {
	content: '';
	display: block;
	width: 76px;
	height: 40px;
	margin: 0 auto 0.75rem;
	background: var(--slot);
	mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 124 66%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.5%22 stroke-dasharray=%226 5%22%3E%3Crect x=%222%22 y=%2236%22 width=%2258%22 height=%2228%22 rx=%227%22/%3E%3Crect x=%2264%22 y=%2236%22 width=%2258%22 height=%2228%22 rx=%227%22/%3E%3Crect x=%2233%22 y=%222%22 width=%2258%22 height=%2228%22 rx=%227%22/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.empty.next-steps::before {
	margin-left: 0;
}

/* R4: loading is bricks too. The modal and the side panel open at once (panels.js) and show these
   until their page arrives. */
#modal-body:empty,
#drawer-body:empty {
	padding: 1.5rem;
}

#modal-body:empty::before,
#drawer-body:empty::before {
	content: '';
	display: block;
	max-width: 392px;
	aspect-ratio: 392 / 144;
	background: var(--surface-muted);
	mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 392 144%22%3E%3Crect x=%220%22 y=%220%22 width=%2292%22 height=%2228%22 rx=%227%22/%3E%3Crect x=%22100%22 y=%220%22 width=%2292%22 height=%2228%22 rx=%227%22/%3E%3Crect x=%22200%22 y=%220%22 width=%2292%22 height=%2228%22 rx=%227%22/%3E%3Crect x=%22300%22 y=%220%22 width=%2292%22 height=%2228%22 rx=%227%22/%3E%3Crect x=%2250%22 y=%2238%22 width=%2292%22 height=%2228%22 rx=%227%22/%3E%3Crect x=%22150%22 y=%2238%22 width=%2292%22 height=%2228%22 rx=%227%22/%3E%3Crect x=%22250%22 y=%2238%22 width=%2292%22 height=%2228%22 rx=%227%22/%3E%3Crect x=%220%22 y=%2276%22 width=%2292%22 height=%2228%22 rx=%227%22/%3E%3Crect x=%22100%22 y=%2276%22 width=%2292%22 height=%2228%22 rx=%227%22/%3E%3Crect x=%22200%22 y=%2276%22 width=%2292%22 height=%2228%22 rx=%227%22/%3E%3Crect x=%22300%22 y=%2276%22 width=%2292%22 height=%2228%22 rx=%227%22/%3E%3Crect x=%2250%22 y=%22114%22 width=%2292%22 height=%2228%22 rx=%227%22/%3E%3Crect x=%22150%22 y=%22114%22 width=%2292%22 height=%2228%22 rx=%227%22/%3E%3Crect x=%22250%22 y=%22114%22 width=%2292%22 height=%2228%22 rx=%227%22/%3E%3C/svg%3E") left top / 100% auto no-repeat;
	animation: brick-pulse 900ms ease-in-out infinite alternate;
}

@keyframes brick-pulse {
	from {
		opacity: 0.45;
	}
}

/* R4: agents get brick-shaped avatars (the small mark's tile); people stay round. Reserved: nothing
   renders one yet (<Avatar agent>). */
.avatar.avatar-agent {
	border-radius: 28%;
	background: url('/mark-small.svg') center / cover no-repeat;
	color: transparent;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) .avatar.avatar-agent {
		background-image: url('/mark-small-dark.svg');
	}
}
:root[data-theme='dark'] .avatar.avatar-agent {
	background-image: url('/mark-small-dark.svg');
}

/* P15: less motion when asked for. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* P15: printing a document or a to-do list prints just that: no app around it, light, no forms. */
@media print {
	.topbar,
	.project-tabs,
	.project-more,
	.page-actions,
	.skip-link,
	.flash,
	.notice,
	.toast,
	.connection,
	.jump,
	.shortcuts-dialog,
	.card-menu,
	.todo-menu,
	.detail-actions,
	.drag-handle,
	.guest-share,
	.guest-badge,
	.archived-banner,
	.back-link,
	form,
	.todo-check,
	.comment-file,
	.attachments-form {
		display: none !important;
	}
	:root,
	:root[data-theme='dark'] {
		--bg: #ffffff;
		--surface: #ffffff;
		--ink: #000000;
		--ink-soft: #333333;
		--ink-faint: #555555;
		--line: #cccccc;
		--accent: #000000;
		color-scheme: light;
	}
	body {
		background: #ffffff;
		color: #000000;
	}
	.page {
		max-width: none;
		padding: 0;
	}
	.card {
		border: 0;
		box-shadow: none;
		padding: 0;
	}
	a {
		color: inherit;
		text-decoration: none;
	}
	h1,
	h2,
	h3 {
		break-after: avoid;
	}
	li,
	.comment,
	.todo {
		break-inside: avoid;
	}
	/* The checkboxes are forms (hidden): a printed box stands in. */
	.todo::before {
		content: '☐ ';
	}
	.todo-done::before {
		content: '☑ ';
	}
}

/* Settings (Q1.5): one page per section, with a side nav; a row of links on phones. */
/* Settings (R2): a "Settings" title, the nav (current page ink-filled), and the section's card. */
.settings-title {
	max-width: calc(200px + 2rem + 820px);
	margin: 0 auto 1.25rem;
	font-size: 2.75rem;
}

.settings {
	display: grid;
	grid-template-columns: 200px minmax(0, 820px);
	justify-content: center;
	gap: 2rem;
	align-items: start;
}

.settings-main > .card,
.settings-main > form.card {
	padding: 1.5rem 1.5rem 1.75rem;
}

.settings-main .page-header h2,
.settings-main .card > h2 {
	font-size: 1.6rem;
	margin-bottom: 0.25rem;
}

.settings-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	position: sticky;
	top: 1rem;
}

.settings-nav a {
	display: block;
	padding: 0.6rem 0.9rem;
	border-radius: var(--radius);
	color: var(--ink-soft);
	font-weight: 700;
	text-decoration: none;
}

.settings-nav a:hover {
	background: var(--surface-muted);
	color: var(--ink);
}

.settings-nav a[aria-current='page'] {
	background: var(--ink);
	color: var(--surface);
}

@media (max-width: 720px) {
	.settings {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
	}

	.settings-nav ul {
		flex-direction: row;
		flex-wrap: wrap;
		position: static;
	}

	.settings-nav a {
		padding: 0.35rem 0.7rem;
		border: 1px solid var(--line);
		border-radius: 999px;
		font-size: 0.9rem;
	}
}

/* ---------------------------------------------------------------------------------------------
   R1 "Daylight trail": the project overview (hero, trail, cards), the Inbox, and the empty state.
   --------------------------------------------------------------------------------------------- */

.project-hero {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
}

.project-hero-text {
	min-width: 0;
	flex: 1 1 28rem;
}

.project-title {
	margin: 0;
	font-size: 3.5rem;
	line-height: 1;
	letter-spacing: -0.035em;
	overflow-wrap: anywhere;
}

.project-desc {
	margin: 0.6rem 0 0;
	color: var(--ink-soft);
	max-width: 48rem;
}

.project-hero-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.avatar-stack {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.avatar-stack .avatar {
	width: 38px;
	height: 38px;
	border-width: 3px;
	font-size: 0.75rem;
}

.avatar-stack .avatar + .avatar {
	margin-left: -9px;
}

.avatar-more {
	background: var(--surface-muted);
	color: var(--ink-soft);
}

/* The wall (R4): one card, the bricks drawn by attributes (views/wall.tsx), colors from here. Laid
   bricks are Sunrise, the latest one Sun (lifted and tilted), what's left a dashed slot; .b.agent is
   reserved for work agents did. */
.wall-card {
	position: relative;
	padding: 1.25rem 1.5rem 1rem;
	margin-bottom: 1.5rem;
}

.wall {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem 2rem;
}

.wall-words {
	flex: 0 0 auto;
	max-width: 22rem;
}

.wall-words p {
	margin: 0;
}

.wall-label {
	color: var(--ink-soft);
	font-weight: 700;
}

.wall-count {
	display: block;
	font-family: var(--font-display);
	font-size: 2.1rem;
	font-weight: 800;
	line-height: 1.05;
	color: var(--ink);
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.wall-words .wall-per,
.wall-words .wall-latest-line,
.wall-words .wall-end {
	margin-top: 0.35rem;
	color: var(--ink-faint);
	font-size: 0.875rem;
}

.wall-latest-line b {
	color: var(--ink);
}

.wall-words .wall-end {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.wall-art {
	display: block;
	flex: 1 1 26rem;
	min-width: 0;
	height: auto;
	max-height: 230px;
	overflow: visible;
}

/* One wall drawn twice: 12 columns, or (phones) 6. */
.wall .wall-narrow {
	display: none;
}

.wall-art .b {
	fill: var(--action);
}

.wall-art .b.agent {
	fill: var(--agent);
}

.wall-art .b.latest {
	fill: var(--sun);
}

.wall-art .slot {
	fill: none;
	stroke: var(--slot);
	stroke-width: 2;
	stroke-dasharray: 5 5;
}

/* The latest brick drops in and settles once, on load (its tilt is an attribute of the rect inside, so it stays). */
.wall-latest {
	animation: brick-settle 700ms cubic-bezier(0.3, 1.5, 0.6, 1) both;
}

@keyframes brick-settle {
	from {
		transform: translateY(-22px);
		opacity: 0;
	}
}

.wall-settled .wall-latest {
	animation: none;
}

.wall-start .wall-art {
	max-height: 70px;
}

/* Overview cards: an auto-fitting grid, wider and simpler (R1). */
.ov-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 1.25rem;
	margin: 1.25rem 0;
}

.ov-card {
	min-width: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-panel);
	box-shadow: var(--shadow);
	padding: 1.25rem 1.25rem 1.35rem;
}

.ov-wide {
	margin-top: 1.25rem;
}

.ov-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.9rem;
}

.ov-head h2 {
	margin: 0;
	font-size: 1.4rem;
}

.ov-head > :last-child:not(h2) {
	margin-left: auto;
}

.ov-head-extra {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
}

.ov-head-extra + .quiet-link {
	margin-left: 0;
}

/* The goals and activity sections inside a card keep their own headings but lose their outer spacing. */
.ov-card .overview-section,
.ov-card .goals-summary {
	margin: 0;
}

.ov-lists,
.ov-due,
.ov-chat,
.ov-events,
.ov-rows,
.ov-bars {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ov-lists li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.3rem 0.75rem;
	align-items: baseline;
	margin-bottom: 0.85rem;
}

.ov-lists a {
	color: var(--ink);
	font-weight: 700;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ov-lists a:hover {
	text-decoration: underline;
}

.ov-count {
	color: var(--ink-faint);
	font-size: 0.8667rem;
}

.meter {
	grid-column: 1 / -1;
	display: block;
	width: 100%;
	height: 8px;
}

.meter-track {
	fill: var(--surface-muted);
}

.meter-fill {
	fill: var(--action);
}

.meter-done .meter-fill {
	fill: var(--meadow);
}

.ov-due {
	margin-top: 0.4rem;
	padding-top: 0.6rem;
	border-top: 1.5px dashed var(--line);
}

.ov-due li {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.35rem 0;
}

.ov-due a {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--ink);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ov-due a:hover {
	text-decoration: underline;
}

.ov-box {
	flex: none;
	width: 20px;
	height: 20px;
	border: 2px solid var(--input-border);
	border-radius: 5px;
}

.chip-due {
	flex: none;
	padding: 0.1rem 0.5rem;
	border-radius: 6px;
	background: var(--surface-muted);
	color: var(--ink-soft);
	font-size: 0.8rem;
	font-weight: 700;
}

.chip-due-today {
	background: var(--action-soft);
	color: var(--action-text);
}

.chip-due-past {
	background: var(--danger-soft);
	color: var(--danger);
}

.here-now {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--meadow-text);
	font-size: 0.8667rem;
	font-weight: 700;
}

.here-now::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--meadow);
}

.ov-chat li {
	display: flex;
	gap: 0.75rem;
	margin-bottom: 0.85rem;
}

.ov-chat-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ov-chat-who strong {
	font-weight: 700;
}

.ov-chat-body {
	overflow-wrap: anywhere;
}

.ov-composer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-height: 46px;
	margin-top: 0.4rem;
	padding: 0.35rem 0.35rem 0.35rem 1rem;
	border: 1.5px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink-faint);
	text-decoration: none;
}

.ov-composer:hover {
	border-color: var(--line-strong);
	color: var(--ink-faint);
}

.ov-composer-go {
	padding: 0.4rem 0.85rem;
	border-radius: 9px;
	background: var(--ink);
	color: var(--surface);
	font-weight: 700;
}

.ov-events li {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-bottom: 0.85rem;
}

.date-block {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--radius);
	background: var(--surface-muted);
	color: var(--ink);
	line-height: 1;
}

.date-block-next {
	background: var(--ink);
	color: var(--surface);
}

.date-block-next .date-month {
	color: var(--sun);
}

.date-month {
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ink-soft);
}

.date-day {
	font-family: var(--font-display);
	font-size: 1.45rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.ov-event-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ov-event-text a,
.ov-rows a {
	color: var(--ink);
	font-weight: 700;
	text-decoration: none;
}

.ov-event-text a:hover,
.ov-rows a:hover {
	text-decoration: underline;
}

.ov-bars {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 0.6rem;
	align-items: end;
}

.ov-bar {
	display: block;
	width: 100%;
	height: 96px;
}

.ov-bar-label {
	display: block;
	margin-top: 0.4rem;
	color: var(--ink-soft);
	font-size: 0.8rem;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bar-fill { fill: var(--line); }
.bar-gray { fill: #dde2ec; }
.bar-sunrise,
.bar-orange { fill: var(--action); }
.bar-sky,
.bar-blue { fill: #1f4fe0; }
.bar-berry,
.bar-red { fill: var(--berry); }
.bar-done,
.bar-green { fill: var(--meadow); }
.bar-teal { fill: #0e8a8a; }
.bar-yellow { fill: var(--sun); }
.bar-purple { fill: #7a3fe0; }

.ov-rows li {
	display: flex;
	flex-direction: column;
	padding: 0.65rem 0;
}

.ov-rows li + li {
	border-top: 1px solid var(--line);
}

.ov-question {
	font-weight: 700;
	margin-bottom: 0.85rem;
}

/* A new project's overview (the Empty artboard): three ways to start. */
.setup {
	max-width: 44rem;
	margin: 1.5rem 0;
}

.setup h2 {
	margin-bottom: 0.25rem;
}

.setup-actions {
	list-style: none;
	margin: 1rem 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.setup-actions a {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-panel);
	background: var(--surface);
	color: var(--ink);
	text-decoration: none;
}

.setup-actions a:hover {
	border-color: var(--line-strong);
	box-shadow: var(--shadow);
}

.setup-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius);
}

.setup-sunrise { background: var(--action); color: #171a2f; }
.setup-sun { background: var(--sun); color: #171a2f; }
.setup-sky { background: #1f4fe0; color: #ffffff; }

.setup-text {
	display: flex;
	flex-direction: column;
}

.setup-text span {
	color: var(--ink-faint);
	font-size: 0.9rem;
}

.setup-more a {
	font-weight: 700;
	text-decoration: none;
}

/* The Inbox: one place for pings, mentions, assignments and comments. */
.group-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.group-label {
	margin: 1.25rem 0 0.6rem;
	font-family: var(--font);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.inbox-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
	max-width: 52rem;
}

.inbox-item {
	border-radius: var(--radius);
}

.inbox-item.unread {
	background: var(--surface);
	box-shadow: inset 4px 0 0 var(--ink-faint), var(--shadow);
}

.inbox-ping.unread { box-shadow: inset 4px 0 0 var(--berry), var(--shadow); }
.inbox-mention.unread { box-shadow: inset 4px 0 0 var(--accent), var(--shadow); }
.inbox-assigned.unread { box-shadow: inset 4px 0 0 var(--action), var(--shadow); }

.inbox-item > a:not(.inbox-open),
.inbox-item .notice-open,
.inbox-item .notice-open button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.inbox-item .inbox-open {
	color: inherit;
	text-decoration: none;
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 0.85rem 1rem 0.85rem 1.1rem;
}

.inbox-text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.inbox-title {
	font-weight: 700;
	color: var(--ink);
}

.inbox-item:not(.unread) .inbox-title {
	font-weight: 600;
	color: var(--ink-soft);
}

.inbox-label {
	color: var(--danger);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.inbox-meta {
	color: var(--ink-faint);
	font-size: 0.8667rem;
}

.inbox-body {
	color: var(--ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.inbox-time {
	flex: none;
	color: var(--ink-faint);
	font-size: 0.8667rem;
}

.inbox-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--radius);
}

.inbox-icon-mention { background: var(--accent-soft); color: var(--accent-text); }
.inbox-icon-assigned { background: var(--action-soft); color: var(--action-text); }
.inbox-icon-other { background: var(--meadow-soft); color: var(--meadow-text); }

.inbox-item .avatar {
	width: 38px;
	height: 38px;
}

.inbox-none {
	padding: 0.5rem 0;
}

/* Forms: fields at 12 px radius with a Sky focus ring. */
.field input,
.field textarea,
.field select {
	border-radius: var(--radius);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
	border-color: var(--accent);
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

@media (max-width: 640px) {
	.project-title {
		font-size: 2.4rem;
	}

	h1 {
		font-size: 2rem;
	}

	.ov-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.wall-card {
		padding: 1rem 1rem 0.75rem;
	}

	.wall .wall-wide {
		display: none;
	}

	.wall .wall-narrow {
		display: block;
		flex-basis: 100%;
		max-height: none;
	}

	.wall-count {
		font-size: 1.7rem;
	}
}

/* The mark on the night trail: a light tile. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) .brand-mark {
		background-image: url('/mark-small-dark.svg');
	}

	:root:not([data-theme='light']) .offline .brand-mark {
		background-image: url('/mark-dark.svg');
	}
}
:root[data-theme='dark'] .brand-mark {
	background-image: url('/mark-small-dark.svg');
}
:root[data-theme='dark'] .offline .brand-mark {
	background-image: url('/mark-dark.svg');
}

/* Appearance: three theme cards, each a small picture of the theme over its radio (R2). */
.theme-choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 0.75rem;
}

.theme-choice {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 0.6rem 0.6rem 0.75rem;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-panel);
	background: var(--surface);
	cursor: pointer;
}

.theme-choice:has(input:checked) {
	border: 2px solid var(--accent);
	padding: calc(0.6rem - 0.5px) calc(0.6rem - 0.5px) calc(0.75rem - 0.5px);
}

.theme-choice:has(input:focus-visible) {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

.theme-choice-name {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
}

.theme-preview {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 84px;
	padding: 12px;
	border-radius: var(--radius);
	background: #f4f7fb;
}

.theme-choice-dark .theme-preview,
.theme-choice-system .theme-preview {
	background: #10132a;
}

.theme-choice-system .theme-preview {
	background: linear-gradient(90deg, #f4f7fb 50%, #10132a 50%);
}

.tp-line {
	width: 55%;
	height: 6px;
	border-radius: 3px;
	background: #171a2f;
}

.theme-choice-dark .tp-line {
	background: #f1f2fa;
}

.tp-button {
	width: 70%;
	height: 20px;
	border-radius: 6px;
	background: #ff5b1f;
}

.tp-rule {
	width: 80%;
	height: 6px;
	border-radius: 3px;
	background: #dde2ec;
}

.theme-choice-dark .tp-rule {
	background: #2e3458;
}

/* Create and edit pages (FormPage): a calm card; the actions under a rule. */
.form-card {
	padding: 1.75rem;
}

.form-card > h1 {
	font-size: 2rem;
	margin-bottom: 1.25rem;
}

.form-card .form-actions,
.settings-main .form-actions {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
}

.form-card fieldset > legend,
.field > legend {
	font-weight: 700;
	margin-bottom: 0.4rem;
}

@media (max-width: 640px) {
	.settings-title {
		font-size: 2rem;
	}

	.form-card {
		padding: 1.25rem;
	}
}

/* The composer's Send keeps its size; the field gives way (phones too, R3). */
.chat-input-row .button {
	flex: none;
	min-width: 4.5rem;
}

.chat-form .chat-input-row textarea {
	min-width: 0;
}

/* A section's header: its name, then its count and its menu at the right (R3). */
.todo-group-header .todo-group-count + .card-menu {
	margin-left: 0.5rem;
}

.todo-group-header:has(.todo-group-count) {
	justify-content: flex-start;
}

/* A row's right side stays on one line; the title gives way. */
.todo-meta {
	flex-wrap: nowrap;
	flex: none;
}

/* Previews in the page (F1, /app/preview.js): a dialog with the file's name, size, Download and Close;
   images fit and zoom, PDFs draw page by page, video and audio play. Full-bleed on phones. */
.preview {
	width: min(1100px, calc(100vw - 2rem));
	height: min(860px, calc(100dvh - 2rem));
	max-width: none;
	max-height: none;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-panel);
	background: var(--surface);
	color: var(--ink);
	box-shadow: var(--shadow-lift);
	overflow: hidden;
}

.preview[open] {
	display: flex;
	flex-direction: column;
}

.preview:focus-visible {
	outline: none;
}

.preview::backdrop {
	background: rgb(16 19 42 / 72%);
}

.preview-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--line);
}

.preview-title {
	flex: 1 1 12rem;
	min-width: 0;
	margin: 0;
	font-family: var(--font);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.preview-count,
.preview-size,
.preview-pages {
	color: var(--ink-faint);
	font-size: 0.8667rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.preview-count:empty {
	display: none;
}

.preview-tools {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.preview-tools:empty {
	display: none;
}

.preview-tools .button {
	min-width: 36px;
	padding: 0.2rem 0.6rem;
}

.preview-stage {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
	background: var(--bg);
}

.preview-stage.preview-image-stage {
	padding: 1rem;
}

/* Fitted: the picture fills the stage's box and object-fit keeps it whole and centered. */
.preview-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	cursor: zoom-in;
}

/* Zoomed: the picture at its own size, and the stage scrolls (or is dragged) around it. */
.preview-stage.zoomed {
	display: block;
	cursor: grab;
}

.preview-stage.zoomed .preview-image {
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	cursor: zoom-out;
}

.preview-media {
	display: block;
	max-width: calc(100% - 2rem);
	max-height: calc(100% - 2rem);
	border-radius: var(--radius);
	background: #000000;
}

audio.preview-media {
	width: min(560px, calc(100% - 2rem));
	background: transparent;
}

/* PDF pages, one under another, each a canvas with its text layer over it. */
.preview-stage.preview-pdf {
	display: block;
	padding: 1rem;
}

.preview-page {
	position: relative;
	margin: 0 auto 1rem;
	background: #ffffff;
	box-shadow: var(--shadow);
}

.preview-canvas {
	display: block;
}

.preview-page .textLayer {
	position: absolute;
	inset: 0;
	overflow: clip;
	line-height: 1;
	text-align: initial;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	forced-color-adjust: none;
	transform-origin: 0 0;
	z-index: 0;
}

.preview-page .textLayer :is(span, br) {
	position: absolute;
	color: transparent;
	white-space: pre;
	cursor: text;
	transform-origin: 0% 0%;
}

.preview-page .textLayer ::selection {
	background: rgb(31 79 224 / 30%);
}

.preview-page .textLayer span.markedContent {
	top: 0;
	height: 0;
}

.preview-note {
	margin: auto;
	padding: 2rem;
	color: var(--ink-soft);
	text-align: center;
}

.preview-step {
	position: absolute;
	top: 50%;
	width: 44px;
	height: 44px;
	margin-top: 22px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink);
	font-size: 1.6rem;
	line-height: 1;
	box-shadow: var(--shadow);
	cursor: pointer;
}

.preview-step[hidden] {
	display: none;
}

.preview-prev {
	left: 0.75rem;
}

.preview-next {
	right: 0.75rem;
}

@media (max-width: 640px) {
	.preview {
		width: 100vw;
		height: 100dvh;
		border: 0;
		border-radius: 0;
	}

	.preview-step {
		top: auto;
		bottom: 0.75rem;
		margin-top: 0;
	}
}

/* Chat (F1.1): a picture is the picture, at most 320×240 (its own shape), radius 12, no card around it,
   with "name · size" under it. A line that is only files drops its bubble. */
.attachment-figure {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
	padding: 0;
	border: 0;
	background: none;
}

.attachment-figure > a {
	display: block;
	border-radius: var(--radius);
}

.attachment-image {
	display: block;
	max-width: min(320px, 100%);
	max-height: 240px;
	border-radius: var(--radius);
	cursor: zoom-in;
}

.attachment-caption {
	color: var(--ink-faint);
	font-size: 0.8rem;
	overflow-wrap: anywhere;
}

.chat-bubble:has(> .attachments:only-child) {
	padding: 0;
	background: none;
}

.chat-bubble > .attachments:only-child {
	margin: 0;
}

.chat-line[data-own] .attachment-figure {
	align-items: flex-end;
}

/* The Files tool shows what it can (F2). The index: a picture's thumbnail, else an icon by kind, then
   the name (its page), the type and size, and Preview (the dialog). */
.docs-item:has(.docs-thumb, .docs-icon) {
	align-items: center;
}

.docs-thumb {
	flex: none;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 8px;
	background: var(--surface-muted);
}

.docs-icon.docs-icon-image,
.docs-icon.docs-icon-video,
.docs-icon.docs-icon-audio,
.docs-icon.docs-icon-pdf,
.docs-icon.docs-icon-file {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.docs-icon-video { background: var(--accent-soft); color: var(--accent-text); }
.docs-icon-audio { background: var(--meadow-soft); color: var(--meadow-text); }
.docs-icon-pdf { background: var(--danger-soft); color: var(--danger); }
.docs-icon-file { background: var(--surface-muted); color: var(--ink-soft); }

.docs-item a.docs-preview {
	flex: none;
	padding: 0.3rem 0.75rem;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	color: var(--ink);
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
}

.docs-item a.docs-preview:hover {
	border-color: var(--line-strong);
}

/* The file page: images large (zoom in the dialog), video 16:9 at full width, audio full width, and a
   PDF in a scrolling panel drawn by /app/preview.js. */
.file-image-link {
	display: block;
	margin-top: 0.5rem;
}

.file-image {
	display: block;
	max-width: 100%;
	max-height: 80vh;
	margin: 0 auto;
	border-radius: var(--radius);
	cursor: zoom-in;
}

.file-video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-top: 0.5rem;
	border-radius: var(--radius);
	background: #000000;
}

.file-audio {
	display: block;
	width: 100%;
	margin-top: 0.75rem;
}

.pdf-viewer {
	margin-top: 0.5rem;
}

.pdf-inline {
	height: min(80vh, 900px);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	overflow: auto;
}

.pdf-inline:not([data-mounted]) {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	min-height: 8rem;
}

.pdf-inline[data-mounted] .pdf-fallback {
	display: none;
}

.pdf-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.5rem 0.75rem;
	margin: 0 0 0.75rem;
}

.pdf-tools {
	margin-right: auto;
}

@media (max-width: 640px) {
	.docs-item {
		flex-wrap: wrap;
	}

	.docs-meta {
		margin-left: 0;
		white-space: normal;
	}
}

/* Q2a: the snooze chip in the top bar, "Muted" on a project, notification settings, and the org's week. */
.snooze-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-height: 32px;
	padding: 0.2rem 0.75rem 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent-text);
	font-size: 0.8667rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.snooze-chip::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 999px;
	margin-right: 0.1rem;
	background: var(--accent);
}
.snooze-chip:hover {
	color: var(--accent-text);
	text-decoration: underline;
}
.project-muted {
	padding: 0.05rem 0.55rem;
	border-radius: 999px;
	background: var(--surface-muted);
	color: var(--ink-soft);
	font-size: 0.8rem;
	font-weight: 700;
}
.snooze-panel h3 {
	margin: 0.5rem 0 0.25rem;
	font-size: 1rem;
}
.snooze-panel p {
	margin: 0 0 0.75rem;
}
.snooze-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.settings-cross {
	margin: -0.25rem 0 1rem;
}
.muted-projects li {
	align-items: center;
}

/* The org's week: a strip of goal pace, then one card per project with its parts side by side. */
.org-digest-goals {
	margin-bottom: 1rem;
}
.org-digest-goals h2,
.org-digest-head h2 {
	margin: 0;
	font-size: 1.15rem;
}
.pace-strip {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}
.pace-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}
.pace-item > a {
	flex: 1 1 100%;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
}
.pace-item > a:hover {
	text-decoration: underline;
}
.pace-item .goal-pace {
	margin-left: auto;
}
.org-digest {
	display: grid;
	gap: 1rem;
}
.org-digest-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--line);
}
.org-digest-head h2 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.org-digest-head h2 a {
	color: var(--ink);
	text-decoration: none;
}
.org-digest-head h2 a:hover {
	text-decoration: underline;
}
.org-digest-parts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0.5rem 1.5rem;
	margin-top: 0.6rem;
}
.org-digest-part h3 {
	margin: 0.25rem 0 0.25rem;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
}
.org-digest-part .work-list {
	margin: 0;
}
.org-digest-quiet {
	margin: 1rem 0 0;
}

@media (max-width: 640px) {
	/* Phones: just "Snoozed" (the time stays for screen readers). */
	.snooze-when {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.snooze-chip {
		min-height: 32px;
		padding: 0.2rem 0.6rem;
	}
}

/* Q2b: on/off settings as switches (a real checkbox underneath). The row is the 44 px target; the
   track's border is --input-border (3:1, like every field); on is Sky with a white knob. */
/* Element-qualified so they beat .field's label and input rules (same specificity, later). */
label.switch-row {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	min-height: 44px;
	margin: 0;
	padding: 0.5rem 0;
	font-weight: 400;
	cursor: pointer;
}
label.switch-row + label.switch-row {
	border-top: 1px solid var(--line);
}
input[type='checkbox'].switch {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex: none;
	width: 44px;
	height: 26px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 2px solid var(--input-border);
	border-radius: 999px;
	background: var(--surface);
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s;
}
input[type='checkbox'].switch::before {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: var(--ink-faint);
	transition: transform 0.15s;
}
/* On is a status, so Meadow (U6 #15: Sky is for links and focus only). */
input[type='checkbox'].switch:checked {
	border-color: var(--meadow);
	background: var(--meadow);
}
input[type='checkbox'].switch:checked::before {
	background: var(--surface);
	transform: translateX(18px);
}
input[type='checkbox'].switch:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}
.switch-text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding-top: 0.1rem;
}
.switch-text .field-hint {
	margin: 0;
	font-weight: 400;
}

/* Snoozed: the Inbox badge keeps its count in a quiet tone (no Berry). */
.topbar-snoozed #inbox-unread {
	background: var(--surface-muted);
	color: var(--ink-soft);
	box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* V1: "Colabriq was updated" with Reload, above the phone bottom bar. */
.app-update {
	position: fixed;
	left: 50%;
	bottom: 1rem;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	max-width: calc(100vw - 2rem);
	padding: 0.5rem 0.5rem 0.5rem 1rem;
	border-radius: var(--radius);
	background: var(--ink);
	color: var(--bg);
	font-weight: 600;
	box-shadow: var(--shadow-lift);
	transform: translateX(-50%);
}
.app-update[hidden] {
	display: none;
}
@media (max-width: 640px) {
	.app-update {
		bottom: calc(5rem + env(safe-area-inset-bottom));
	}
}

/* Pictures that may be transparent sit on a checkerboard (CSS only), so a dark logo on a transparent
   background still shows on the dark theme. */
.attachment-image,
.file-image,
.preview-image,
.docs-thumb {
	background-color: var(--checker-a);
	background-image: conic-gradient(var(--checker-b) 25%, transparent 0 50%, var(--checker-b) 0 75%, transparent 0);
	background-size: 16px 16px;
}

/* F3: every project file in Files. Which files, and of which kind (chips); in those lists a file's
   name sits over its details and where it came from. */
.files-views {
	margin-bottom: 0.5rem;
}
.files-kinds a {
	min-height: 32px;
	padding: 0.2rem 0.8rem;
	font-size: 0.875rem;
}
.docs-main {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}
.docs-item-origin .docs-meta {
	margin-left: 0;
	white-space: normal;
}
.docs-item a.file-origin {
	color: var(--accent-text);
	font-size: 0.85rem;
	font-weight: 600;
}
.docs-item a.docs-download {
	flex: none;
	color: var(--accent-text);
	font-size: 0.85rem;
	font-weight: 700;
}
.older {
	margin: 1rem 0 0;
}

/* F3: an upload's progress row (after its form, or a pending chat line): name, bar, how far, Cancel;
   a failure says why in place, with Retry. */
.upload-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.35rem 0.75rem;
	margin: 0.75rem 0;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}
.upload-name {
	overflow: hidden;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.upload-actions {
	display: flex;
	gap: 0.4rem;
	grid-row: span 2;
	align-self: center;
}
.upload-bar {
	grid-column: 1;
	width: 100%;
	height: 8px;
	border: 0;
	border-radius: 999px;
	background: var(--surface-muted);
	accent-color: var(--action);
	appearance: none;
	-webkit-appearance: none;
	overflow: hidden;
}
.upload-bar::-webkit-progress-bar {
	background: var(--surface-muted);
	border-radius: 999px;
}
.upload-bar::-webkit-progress-value {
	background: var(--action);
	border-radius: 999px;
	transition: width 0.2s;
}
.upload-bar::-moz-progress-bar {
	background: var(--action);
	border-radius: 999px;
}
.upload-meta {
	grid-column: 1;
	color: var(--ink-soft);
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}
.upload-failed .upload-meta {
	color: var(--danger);
	font-weight: 600;
}
.upload-failed {
	border-color: var(--danger-border);
}
/* In chat the row is the pending line's bubble. */
.chat-line.uploading .upload-row {
	min-width: min(22rem, 100%);
	margin: 0;
}

/* F3: "Copy to folder" on an attachment row: a small drop-down with the folder picker. */
.file-copy {
	position: relative;
	flex: none;
}
.file-copy > summary {
	padding: 0.3rem 0.75rem;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	color: var(--ink);
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
}
.file-copy > summary::-webkit-details-marker {
	display: none;
}
.file-copy > summary:hover {
	border-color: var(--line-strong);
}
.file-copy-form {
	position: absolute;
	right: 0;
	top: calc(100% + 0.4rem);
	z-index: 15;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: min(18rem, calc(100vw - 2rem));
	padding: 0.85rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow-lift);
}
.file-copy-form label {
	font-weight: 700;
	font-size: 0.9rem;
	overflow-wrap: anywhere;
}
.file-copy-form select {
	min-height: 40px;
	padding: 0.35rem 0.6rem;
	border: 1.5px solid var(--input-border);
	border-radius: var(--radius-small);
}

/* RT2: search inside a chat room (a field in the header; results in a panel under it), the line a
   result opens (:target), and the desktop-notifications switch. */
.chat-search input {
	width: min(16rem, 100%);
	min-height: 40px;
	padding: 0.4rem 0.85rem;
	border: 1.5px solid var(--input-border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink);
	font: inherit;
}
.chat-search-results {
	margin: 0 0 1rem;
	padding: 0.5rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-panel);
	background: var(--surface);
	box-shadow: var(--shadow);
	max-height: min(50vh, 28rem);
	overflow-y: auto;
}
.chat-search-results > p {
	margin: 0.5rem 0.75rem;
}
.chat-search-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.chat-search-list a {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.6rem 0.75rem;
	border-radius: var(--radius);
	color: var(--ink);
	text-decoration: none;
}
.chat-search-list a:hover,
.chat-search-list a:focus-visible {
	background: var(--surface-muted);
}
.chat-search-meta {
	color: var(--ink-soft);
	font-size: 0.85rem;
}
.chat-search-text mark {
	background: var(--mark-bg);
	color: var(--ink);
}
.chat-line:target {
	border-radius: var(--radius);
	box-shadow: 0 0 0 3px var(--sun);
	scroll-margin: 6rem;
}
.desktop-notify-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
}
@media (max-width: 640px) {
	.chat-search {
		order: 3;
		flex: 1 1 100%;
	}
	.chat-search input {
		width: 100%;
	}
}

/* I3: an invitation by link. */
.invite-card {
	max-width: 36rem;
	margin: 0 auto;
}
.invite-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/* M1: the modal (short forms), the side panel (a thing's detail) and the confirm dialog. */
.modal,
.drawer,
.confirm {
	padding: 0;
	border: 0;
	background: var(--surface);
	color: var(--ink);
	box-shadow: var(--shadow-lift);
}

.modal::backdrop,
.drawer::backdrop,
.confirm::backdrop {
	background: rgb(23 26 47 / 0.38);
}

.modal {
	width: min(560px, calc(100vw - 2rem));
	max-height: calc(100vh - 4rem);
	margin: 8vh auto auto;
	border-radius: 20px;
	overflow: auto;
}

.drawer {
	width: min(480px, 100vw);
	height: 100vh;
	max-height: 100vh;
	margin: 0 0 0 auto;
	border-radius: var(--radius-panel) 0 0 var(--radius-panel);
	overflow: auto;
}

.confirm {
	width: min(480px, calc(100vw - 2rem));
	margin: 20vh auto auto;
	border-radius: var(--radius-panel);
}

.confirm form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem 1.4rem;
}

.confirm-question {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 800;
}

.confirm-detail {
	margin: 0;
}

.confirm .form-actions {
	flex-direction: row-reverse;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-top: 0.5rem;
}

/* Berry outline for the destructive choice (our confirm, and nowhere quieter). */
.confirm .button-danger {
	border: 1.5px solid var(--danger);
	color: var(--danger);
}

.panel-frame {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.4rem 1.5rem 1.5rem;
}

.panel-head {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.panel-heading {
	flex: 1;
	min-width: 0;
}

.panel-project {
	margin: 0;
	color: var(--ink-faint);
	font-size: 0.85rem;
	font-weight: 600;
}

.panel-head h2 {
	margin: 0.1rem 0 0;
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.panel-close {
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 10px;
	background: var(--surface-muted);
	color: var(--ink-soft);
	font-size: 1.15rem;
}

.panel-body {
	min-width: 0;
}

.modal-form .form-actions {
	justify-content: flex-end;
	padding-top: 0.75rem;
	border-top: 1px solid var(--surface-muted);
}

.modal-form .form-actions .button-primary {
	order: 2;
}

/* The side panel shows a thing's page: its own header and cards without the page's margins. */
.panel-drawer .panel-body > .card,
.panel-drawer .panel-body article {
	box-shadow: none;
}

.panel-gone {
	align-items: flex-start;
}

@media (max-width: 640px) {
	/* Phones: the modal is a full-height sheet; the side panel comes up from the bottom. */
	.modal {
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		margin: 0;
		border-radius: 0;
	}

	.drawer {
		width: 100vw;
		max-width: 100vw;
		height: 88dvh;
		margin: auto 0 0;
		border-radius: var(--radius-panel) var(--radius-panel) 0 0;
	}

	.panel-frame {
		padding: 1rem 16px 1.25rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.drawer[open] {
		animation: drawer-in 160ms ease-out;
	}

	@keyframes drawer-in {
		from {
			transform: translateX(24px);
			opacity: 0.6;
		}
	}
}

/* A page made for the full window shown in the modal: the dialog's title replaces its own heading, and its card loses its frame. */
.panel-modal .panel-body > .card > h1,
.panel-modal .panel-body .page-header h1 {
	display: none;
}

.panel-modal .panel-body > .card {
	padding: 0;
	border: 0;
	box-shadow: none;
	background: none;
}

/* M1 Schedule: day groups (sticky headings), rows with a time column and the project's color bar, a mini month beside. */
.schedule-layout {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
	margin-top: 1rem;
}

.schedule-list {
	flex: 999 1 560px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.schedule-side {
	flex: 1 1 260px;
	max-width: 320px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: sticky;
	top: 1rem;
}

.sched-day-heading {
	position: sticky;
	top: 0;
	z-index: 1;
	margin: 0;
	padding: 0.35rem 0;
	background: var(--bg);
	color: var(--ink);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sched-day-heading.due-overdue {
	color: var(--danger);
}

.sched-rows {
	margin: 0.4rem 0 0;
	padding: 0;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 16px;
	overflow: hidden;
}

.sched-row {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	padding: 12px 16px;
	border-bottom: 1px solid var(--surface-muted);
}

.sched-row:last-child {
	border-bottom: 0;
}

.sched-event {
	box-shadow: inset 4px 0 0 var(--project-color, var(--action));
}

.sched-due {
	background: color-mix(in srgb, var(--surface-muted) 35%, var(--surface));
}

.sched-due.is-done .sched-main a {
	color: var(--ink-faint);
	text-decoration: line-through;
}

.sched-time {
	color: var(--ink-soft);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sched-time .chip {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 99px;
	background: var(--surface-muted);
	color: var(--ink-soft);
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
}

.sched-time .chip-due {
	background: var(--action-soft);
	color: var(--action-text);
}

.sched-time .chip-overdue {
	background: var(--danger-soft);
	color: var(--danger);
}

.sched-main a {
	color: var(--ink);
	font-weight: 700;
	text-decoration: none;
}

.sched-main a:hover {
	text-decoration: underline;
}

.sched-todo {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sched-todo .todo-check input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--meadow);
}

.sched-meta,
.sched-kind {
	color: var(--ink-faint);
	font-size: 0.85rem;
}

.sched-people {
	display: flex;
}

.sched-people .avatar + .avatar {
	margin-left: -6px;
}

.sched-people .avatar {
	box-shadow: 0 0 0 2px var(--surface);
}

.sched-more {
	margin-left: 4px;
	color: var(--ink-faint);
	font-size: 0.8rem;
	font-weight: 700;
}

/* Now, between today's past and future events. */
.sched-now {
	position: relative;
	height: 0;
	border-top: 2px solid var(--action);
}

.sched-now span {
	position: absolute;
	left: 12px;
	top: -7px;
	width: 12px;
	height: 12px;
	border-radius: 99px;
	background: var(--action);
}

.mini-month {
	padding: 16px;
}

.mini-month-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.mini-month-head b {
	font-family: var(--font-display);
	font-size: 1.1rem;
}

.mini-month-nav {
	display: flex;
	gap: 4px;
}

.mini-month-grid {
	margin-top: 10px;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
	text-align: center;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

.mini-weekday {
	color: var(--ink-faint);
	font-size: 0.7rem;
	font-weight: 700;
}

.mini-day {
	position: relative;
	padding: 6px 0;
	border-radius: 99px;
	color: var(--ink);
	text-decoration: none;
}

a.mini-day:hover {
	background: var(--surface-muted);
}

.mini-day-other {
	color: var(--ink-faint);
}

.mini-day-busy {
	font-weight: 700;
}

.mini-day-busy::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 1px;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 99px;
	background: var(--action);
}

.mini-day-today {
	box-shadow: inset 0 0 0 2px var(--action);
	font-weight: 800;
}

.feed-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}

/* Nothing yet: an icon tile, one line, the next step (the empty-board pattern). */
.empty-tile {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 20px;
}

.empty-tile-icon {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--action);
	color: var(--action-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.empty-tile-text h2 {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.3rem;
}

.empty-tile-text p {
	margin: 0.25rem 0 0.75rem;
}

.empty-tile-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

@media (max-width: 1023px) {
	/* The calendar comes first as a strip of this week. */
	.schedule-side {
		order: -1;
		position: static;
		flex-basis: 100%;
		max-width: none;
	}

	.mini-day-offweek,
	.mini-month-grid .mini-day-offweek {
		display: none;
	}

	.feed-link {
		display: none;
	}
}

@media (max-width: 640px) {
	.sched-row {
		grid-template-columns: 64px minmax(0, 1fr) auto;
		gap: 10px;
		padding: 10px 12px;
	}

	.sched-kind {
		display: none;
	}
}

/* M1: the event form (in the modal or on its page): date and times on one row, people as chips. */
.when-row {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 10px;
}

.when-row .field {
	min-width: 0;
}

.repeat-choice select {
	min-height: 40px;
}

.repeat-custom,
.more-options {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.repeat-custom > summary,
.more-options > summary {
	width: fit-content;
	color: var(--accent-text);
	font-weight: 700;
	cursor: pointer;
}

.more-options[open] > summary,
.repeat-custom[open] > summary {
	margin-bottom: 0.5rem;
}

.chip-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.person-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 3px 12px 3px 4px;
	border: 1.5px solid var(--line);
	border-radius: 99px;
	background: var(--surface);
	color: var(--ink-soft);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

/* The checkbox stays real (forms post it, keyboards and screen readers use it) but sits under the chip. */
.person-chip input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.person-chip:has(input:checked) {
	border-color: var(--accent);
	background: var(--accent-soft);
	color: var(--accent-text);
}

.person-chip:has(input:checked)::after {
	content: '✓';
	font-weight: 800;
}

.person-chip:has(input:focus-visible) {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

@media (max-width: 640px) {
	.when-row {
		grid-template-columns: 1fr 1fr;
	}

	.when-row .field:first-child {
		grid-column: 1 / -1;
	}
}

/* M1 month: the whole empty part of a day adds an event there (its number is the link); a dragged event shows where it lands. */
.month-day {
	position: relative;
}

a.month-day-number::after {
	content: '';
	position: absolute;
	inset: 0;
}

.month-items {
	position: relative;
	z-index: 1;
}

.month-day.is-today {
	box-shadow: inset 0 0 0 2px var(--action);
}

.month-day.is-drop-target {
	background: var(--accent-soft);
	box-shadow: inset 0 0 0 2px var(--accent);
}

.month-items [draggable='true'] {
	cursor: grab;
}

.month-items .month-more a {
	background: none;
	color: var(--accent-text);
	font-weight: 700;
}

/* "Design review fri 2pm": the day and time it names, offered (M1). */
.when-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 10px;
	background: var(--accent-soft);
	color: var(--accent-text);
	font-size: 0.9rem;
	font-weight: 600;
}

.when-chip button {
	margin-left: auto;
}

/* U6: a small popover menu of buttons or links (the Inbox's Snooze, the project's ⋯ menu). */
.menu-panel {
	position: absolute;
	right: 0;
	top: calc(100% + 0.25rem);
	z-index: 20;
	min-width: 13rem;
	margin: 0;
	padding: 0.35rem 0;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-small);
	box-shadow: var(--shadow-lift);
}

.menu-panel > li {
	margin: 0;
}

.menu-item,
.menu-panel > li > a,
.menu-panel > li > form > button {
	display: block;
	width: 100%;
	padding: 0.55rem 0.9rem;
	border: 0;
	background: none;
	color: var(--ink);
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.menu-item:hover,
.menu-panel > li > a:hover,
.menu-panel > li > form > button:hover {
	background: var(--surface-muted);
}

.snooze-menu,
.project-menu {
	position: relative;
}

.snooze-menu > summary,
.project-menu > summary {
	list-style: none;
	cursor: pointer;
}

.snooze-menu > summary::-webkit-details-marker,
.project-menu > summary::-webkit-details-marker {
	display: none;
}

/* U6 (#2): an Inbox row never makes the page wider than the phone (the grid and the button shrink). */
.inbox-list {
	grid-template-columns: minmax(0, 1fr);
}

.inbox-list > li,
.inbox-item .notice-open,
.inbox-item .notice-open button {
	min-width: 0;
	max-width: 100%;
}

.inbox-title {
	overflow-wrap: anywhere;
}

@media (max-width: 400px) {
	.inbox-item .inbox-open {
		flex-wrap: wrap;
	}

	/* The time goes under the text, lined up with it. */
	.inbox-item .inbox-time {
		order: 3;
		flex-basis: 100%;
		padding-left: calc(38px + 0.85rem);
	}
}

/* U6 (#15): earlier rows are two lines (title; project and time), as on the board. */
.inbox-earlier .inbox-item .inbox-body {
	display: none;
}

.inbox-earlier .inbox-item .inbox-open {
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
}

/* U6 (#6): a run of like notices folds into one row that opens to show each. */
.inbox-grouped > details > summary {
	list-style: none;
	cursor: pointer;
}

.inbox-grouped > details > summary::-webkit-details-marker {
	display: none;
}

.inbox-grouped .inbox-sublist {
	padding: 0 0.75rem 0.75rem calc(38px + 1.95rem);
	gap: 0.25rem;
}

.inbox-sublist .inbox-item .inbox-open {
	padding: 0.45rem 0.6rem;
}

.inbox-sublist .avatar,
.inbox-sublist .inbox-icon {
	display: none;
}

.inbox-none {
	padding: 0.75rem 0;
	color: var(--ink-soft);
	font-weight: 600;
}

/* U6 (#14): the overview's pulse as chips; Sun for "Worth a look", Berry only on the "Needs attention" dot. */
.pulse-chips {
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

.pulse-level {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 700;
}

.pulse-reasons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pulse-chip {
	display: inline-block;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	background: var(--surface-muted);
	color: var(--ink);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.pulse-look .pulse-chip {
	background: var(--mark-bg);
}

.pulse-chip:hover {
	text-decoration: underline;
}

.pulse-details {
	margin-left: auto;
	font-size: 0.875rem;
}

.pulse-dot.pulse-look {
	background: var(--sun);
	box-shadow: 0 0 0 1.5px var(--ink-faint);
}

/* U6 (#9): org home cards: the pulse under the name, a one-line wall, the next due to-do. */
.project-card .pulse-tag {
	margin: 0.15rem 0 0;
}

.project-card-progress {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.5rem;
	color: var(--ink-soft);
	font-size: 0.875rem;
	font-weight: 600;
}

.project-card-progress .mini-wall {
	flex: 0 0 auto;
	width: 7.5rem;
	height: auto;
}

.project-card-setup {
	color: var(--accent-text);
}

.project-card-next {
	display: block;
	margin-top: 0.25rem;
	color: var(--ink-faint);
	font-size: 0.8125rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* U6 (#10): the welcome card starts with the wall's foundation; Sign out sits apart, quietly. */
.welcome-card .mini-wall {
	display: block;
	width: 100%;
	max-width: 22rem;
	height: auto;
}

.welcome-kicker {
	margin: 0.5rem 0 0;
	color: var(--action-text);
	font-weight: 700;
	font-size: 0.875rem;
}

.welcome-signout {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
}

/* U6 (#4): Discussions as the artboard: author avatar, title (no underline), a Berry dot and "N new",
   an excerpt, who replied, and the date on the right. */
.discussion-row {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	padding: 1rem 1.1rem;
}

.discussion-main {
	flex: 1 1 auto;
	min-width: 0;
}

.discussion-title {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--ink);
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
}

.discussion-title:hover {
	color: var(--accent-text);
}

.discussion-excerpt {
	margin: 0.2rem 0 0;
	color: var(--ink-soft);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.discussion-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.3rem;
	margin: 0.45rem 0 0;
	color: var(--ink-faint);
	font-size: 0.875rem;
}

.discussion-repliers {
	margin-right: 0.35rem;
}

.discussion-new {
	color: var(--danger);
}

.discussion-date {
	flex: none;
	color: var(--ink-faint);
	font-size: 0.875rem;
}

.unread-dot {
	display: inline-block;
	flex: none;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--berry);
}

.guest-chip {
	padding: 0.05rem 0.5rem;
	border-radius: 999px;
	background: var(--guest-bg);
	color: var(--ink);
	font-size: 0.8125rem;
	font-weight: 600;
}

@media (max-width: 640px) {
	.discussion-date {
		display: none;
	}
}

/* U6 (#4, the My work artboard): sections as cards, rows with a real checkbox, the project with its
   color, a due chip; pills for the tabs; schedule chips; one line for what's done. */
.pill-tabs ul {
	gap: 0.4rem;
	border-bottom: 0;
}

.pill-tabs a {
	padding: 0.45rem 0.95rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}

.pill-tabs a[aria-current='page'] {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
}

.work-section {
	margin-top: 1rem;
	padding: 0;
	overflow: hidden;
}

.work-group-label {
	margin: 0;
	padding: 0.75rem 1.25rem;
	font-family: var(--font);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.work-group-label.due-overdue {
	color: var(--danger);
}

.work-rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.work-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.7rem 1.25rem;
	border-top: 1px solid var(--line);
}

.work-row .todo-check {
	display: inline-flex;
	margin: 0;
}

.work-row input[type='checkbox'] {
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--meadow);
}

.work-card-mark,
.work-done-mark {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	border: 2px dashed var(--slot);
}

.work-done-mark {
	border: 0;
	background: var(--meadow-soft);
}

.work-title {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}

.work-title:hover {
	color: var(--accent-text);
}

.is-done .work-title {
	color: var(--ink-faint);
	text-decoration: line-through;
}

.work-where {
	color: var(--ink-faint);
	font-weight: 400;
	font-size: 0.8125rem;
}

.work-project {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex: none;
	max-width: 12rem;
	color: var(--ink-soft);
	font-size: 0.875rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.work-project .blaze {
	width: 8px;
	height: 14px;
}

.work-schedule {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1rem;
}

.work-schedule .work-group-label {
	padding: 0 0.5rem 0 0;
}

.schedule-chip {
	padding: 0.4rem 0.8rem;
	border-radius: 12px;
	background: var(--accent-soft);
	color: var(--ink);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.work-done {
	margin-top: 1.25rem;
}

.work-done-line {
	margin-top: 1.25rem;
	color: var(--ink-faint);
	font-size: 0.875rem;
	cursor: pointer;
}

.work-done-line b {
	color: var(--meadow-text);
}

@media (max-width: 640px) {
	.work-row {
		flex-wrap: wrap;
		padding: 0.7rem 1rem;
	}

	.work-project {
		order: 3;
		margin-left: calc(22px + 0.75rem);
	}
}

/* U6 (#11): file hits have a picture (or their kind), where they live, and Preview. */
.search-file {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	column-gap: 0.85rem;
}

.search-file > :not(.search-thumb) {
	grid-column: 2;
}

.search-thumb {
	grid-row: 1 / span 4;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-small);
	object-fit: cover;
}

.search-thumb-file {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--surface-muted);
	color: var(--ink-soft);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.search-file-where {
	margin: 0.2rem 0 0;
	color: var(--ink-faint);
	font-size: 0.875rem;
}

/* U6 (#12): Files' project-wide lists: folders and documents pinned on top, files by day, one ⋯ per row. */
.docs-pinned:empty {
	display: none;
}

.docs-day {
	margin-top: 1.25rem;
}

.docs-day-heading {
	margin: 0 0 0.5rem;
	font-family: var(--font);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.docs-thumb-link {
	display: inline-flex;
	flex: none;
	border-radius: var(--radius-small);
}

.docs-item-origin .detail-actions {
	margin-left: auto;
}

.files-filter-menu {
	display: none;
	position: relative;
	margin: 0 0 1rem;
}

.files-filter-menu > summary {
	list-style: none;
	cursor: pointer;
}

.files-filter-menu > summary::-webkit-details-marker {
	display: none;
}

.files-filter-panel {
	left: 0;
	right: auto;
	padding: 0.75rem;
	min-width: 16rem;
}

.files-filter-panel .files-filters {
	display: block;
}

@media (max-width: 640px) {
	.files-filter-menu {
		display: block;
	}

	.files-filter-menu ~ .files-filters {
		display: none;
	}
}