/* mcp-rooms
 *
 * The look is taken from the shared design system: Source Sans 3, the
 * design-system colours and 2 px corners. The font is served from this host, so pages load
 * nothing from third parties.
 */

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/static/public/fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('/static/public/fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
}

:root {
	/* design tokens */
	--brand: #00357a;
	--brand-hover: #1a4987;
	--highlight: #2a6ebb;
	--highlight-dark: #235a9a;
	--accent: #e86717;
	--ink: #212121;
	--ink-soft: #5f686d;
	--line: #c8cdd0;
	--line-light: #ecedee;
	--pale: #eaf2fa;
	--pale-soft: #f7fafd;
	--grey-soft: #f7f7f8;
	--white: #ffffff;
	--alert: #be2626;
	--success: #12752b;

	--radius: 2px;
	--sans: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
	--mono: ui-monospace, 'SF Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
	--measure: 48rem;   /* a readable line of prose */
	--page: 75rem;      /* the page: 1200 px (#22971) */
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font: 400 18px/1.6 var(--sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	/* Footer sits at the bottom even on a short page. */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

h1, h2, h3 {
	font-weight: 600;
	line-height: 1.25;
	margin: 0;
}

a { color: var(--highlight); text-underline-offset: 2px; }
a:hover { color: var(--highlight-dark); }
a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

/* ---- header ---- */

.site-header {
	background: var(--white);
	border-bottom: 1px solid var(--line);
	padding-inline: 1.5rem;
}

.bar {
	max-width: var(--page);
	margin-inline: auto;
	padding-block: 0.9rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
}

/* Main menu. The current page is underlined. */
.site-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 1.4rem;
}

.site-nav a,
.link-button {
	font: 600 1rem var(--sans);
	color: var(--highlight);
	text-decoration: none;
	padding: 0.2rem 0;
	border: 0;
	border-bottom: 3px solid transparent;
	background: none;
	cursor: pointer;
}
.site-nav a:hover,
.link-button:hover { color: var(--highlight-dark); border-bottom-color: var(--line); }
.site-nav a.is-current { color: var(--ink); border-bottom-color: var(--highlight); }

.signout { margin: 0; }
/* Every item of the menu the same box, links and buttons alike, centred: browsers (Safari
   above all) otherwise give a <button> its own line box and baseline (#8167). */
.site-nav > * { display: flex; align-items: center; }
.site-nav a, .site-nav .link-button {
	display: inline-flex; align-items: center; gap: 0.35rem;
	line-height: 1.5; margin: 0; -webkit-appearance: none; appearance: none; white-space: nowrap;
}

/* Usage (admins) and Notifications in the menu: a button, and the panel it opens. */
.usage-menu, .notif-menu, .rooms-menu { position: relative; }
.site-nav .rooms-toggle.is-current { color: var(--ink); border-bottom-color: var(--highlight); }
.notif-toggle { display: inline-flex; align-items: center; gap: 0.35rem; }
.notif-count { font-size: 0.75rem; padding: 0 0.4rem; line-height: 1.4; }
/* Every dropdown of the menu: as wide as its content needs, from 22rem up to 35rem. */
.menu-pop {
	position: absolute; right: 0; top: calc(100% + 0.6rem); z-index: 20;
	width: max-content; min-width: 22rem; max-width: min(35rem, calc(100vw - 2rem));
	max-height: calc(100vh - 6rem); overflow-y: auto;
	background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: 0 8px 24px rgb(0 53 122 / 0.18);
	padding: 0.9rem 1rem 0.8rem; font-size: 0.9375rem; text-align: left;
}
.menu-pop[hidden] { display: none; }
.menu-pop:focus { outline: none; }
/* Rooms is first in the menu: its panel opens to the right. */
.rooms-pop { right: auto; left: 0; }
.rooms-menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.rooms-menu-list a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.5rem; padding: 0.4rem 0.6rem;
	border-left: 3px solid var(--line-light); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.rooms-menu-list a:hover { background: var(--grey-soft); border-left-color: var(--highlight); }
.rooms-menu-list .is-here a { background: var(--pale); border-left-color: var(--brand); }
.rooms-menu-name { font-weight: 600; color: var(--highlight); }
.rooms-menu-slug { flex-basis: 100%; font-size: 0.8125rem; color: var(--ink-soft); font-family: var(--mono); }
.menu-pop-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.5rem; }
.menu-pop-title { font-weight: 600; }
.menu-pop-foot { margin: 0.6rem 0 0; font-size: 0.875rem; text-align: right; }
.notif-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.notif-list a { display: grid; gap: 0.1rem; padding: 0.4rem 0.6rem; border-left: 3px solid var(--line-light);
	border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.notif-list a:hover { background: var(--grey-soft); }
.notif-list .is-unread a { background: var(--pale); border-left-color: var(--highlight); }
.notif-list .is-unread .notif-excerpt { color: var(--ink); font-weight: 600; }
.notif-meta { font-size: 0.8125rem; color: var(--ink-soft); }
.notif-excerpt { font-size: 0.875rem; color: var(--ink-soft); overflow-wrap: anywhere; }
/* On the room list: the heading, with Mark all read beside it. */
.mentions-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.6rem; }
.mentions-head h2 { margin: 0; }
.primary.small { font-size: 0.9375rem; padding: 0.3rem 0.9rem; }
.site-nav .usage-toggle.is-current { color: var(--ink); border-bottom-color: var(--highlight); }
.usage-pop { width: 26rem; }
.usage-pop-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.5rem; }
.usage-pop-plan { font-weight: 600; }
.usage-pop .limits-compact { margin: 0; gap: 0.2rem; }
.limits-compact .limit-percent { font-size: 1.05rem; }
.limits-compact .meter-track { height: 0.5rem; }
.limits-compact .limit { padding: 0.45rem 0.75rem; }
.limits-compact .limit-name { font-size: 0.9375rem; }
.limits-compact .limit-reset { font-size: 0.8125rem; margin: 0.15rem 0 0; }
.usage-pop-signin { font-size: 0.8125rem; color: var(--ink-soft); margin: 0.5rem 0 0; }
.usage-pop-signin.is-soon { color: var(--alert); font-weight: 600; }
.usage-pop-foot { display: flex; justify-content: space-between; gap: 1rem; margin: 0.6rem 0 0; font-size: 0.8125rem; color: var(--ink-soft); }

.wordmark {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--ink);
	text-decoration: none;
}
.wordmark .mark { display: block; flex: none; }
.wordmark .name { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.005em; }
.wordmark .tld { color: var(--ink-soft); font-weight: 400; }
.wordmark:hover .name { color: var(--brand); }

/* ---- hero bar ---- */

.hero {
	background: var(--highlight);
	background: linear-gradient(to right, var(--brand) 0%, var(--highlight) 100%);
	color: var(--white);
	padding-inline: 1.5rem;
}

.hero-inner {
	max-width: var(--page);
	margin-inline: auto;
	padding-block: 2.75rem 5.5rem;
}

.hero-title {
	font-size: 2.25rem;
	letter-spacing: -0.01em;
	margin: 0 0 0.6rem;
	max-width: 22ch;
}

.hero-lead {
	margin: 0;
	max-width: 46ch;
	font-size: 1.125rem;
	color: #e4eefa;
}

/* ---- main ---- */

main {
	flex: 1;
	background: var(--pale-soft);
	border-bottom: 1px solid var(--line-light);
	padding-inline: 1.5rem;
	padding-block: 0 3.5rem;
}

main > * {
	max-width: var(--page);
	margin-inline: auto;
}

/* The white panel that overlaps the hero bar, as the generator does on salasanasi.fi. */
.card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.75rem;
	margin-top: -3rem;
	box-shadow: 0 2px 6px rgb(0 53 122 / 0.08);
}
.card-narrow { max-width: 28rem; margin-inline: auto; }

/* ---- sign-in with Authentik ---- */

.sso { display: block; text-align: center; text-decoration: none; }
.sso:hover { color: var(--white); }
.or { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; color: var(--ink-soft); font-size: 0.9375rem; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* ---- forms ---- */

.field { margin-bottom: 1.1rem; }

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

.field input {
	width: 100%;
	font: 400 1.0625rem var(--sans);
	color: var(--ink);
	padding: 0.6rem 0.7rem;
	background: var(--white);
	border: 1px solid var(--ink-soft);
	border-radius: var(--radius);
}

.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem 1.25rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line-light);
}

.primary {
	appearance: none;
	background: var(--brand);
	border: 1px solid var(--brand);
	color: var(--white);
	font: 600 1.0625rem var(--sans);
	padding: 0.6rem 1.5rem;
	border-radius: var(--radius);
	cursor: pointer;
}
.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }

.status { margin: 0.85rem 0 0; font-size: 1rem; color: var(--ink-soft); }
.status.is-error { color: var(--alert); font-weight: 600; }

/* ---- room list ---- */

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

.rooms li {
	background: var(--white);
	border: 1px solid var(--line);
	border-left: 4px solid var(--highlight);
	border-radius: var(--radius);
	padding: 0.9rem 1.1rem;
}
.rooms h2 { font-size: 1.25rem; margin: 0 0 0.15rem; }
.rooms h2 a { text-decoration: none; }
.rooms h2 a:hover { text-decoration: underline; }
.room-slug { margin: 0; font: 0.9375rem var(--mono); color: var(--ink-soft); }
.room-description { margin: 0.35rem 0 0; font-size: 1rem; line-height: 1.55; max-width: 44rem; }

/* ---- connection indicator (rooms) ---- */

.connection {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--ink-soft);
}
.connection .dot {
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: var(--line);
	flex: none;
}
.connection[data-state="live"] { color: var(--success); }
.connection[data-state="live"] .dot { background: var(--success); }
.connection[data-state="connecting"] .dot { background: var(--accent); }
.connection[data-state="down"] { color: var(--alert); }
.connection[data-state="down"] .dot { background: var(--alert); }

.notice {
	margin: 0;
	padding: 0.9rem 1.1rem;
	background: var(--pale);
	border-left: 4px solid var(--highlight);
	border-radius: var(--radius);
	font-size: 1rem;
	line-height: 1.55;
}

/* ---- unread mentions (room list page) ---- */

.unread-mentions { margin-bottom: 1.75rem; }
.unread-mentions h2, .rooms-title { font-size: 1.25rem; margin: 0 0 0.6rem; display: flex; align-items: center; gap: 0.5rem; }
.mention-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.mention-list a {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.55rem 0.85rem;
	border: 1px solid var(--line);
	border-left: 4px solid var(--accent);
	box-shadow: 0 0 0 1px var(--accent) inset;
	border-radius: var(--radius);
	background: #fff8f2;
	color: var(--ink);
	text-decoration: none;
}
.mention-list a:hover .mention-meta b { text-decoration: underline; color: var(--highlight-dark); }
.mention-meta { font-size: 0.9375rem; color: var(--ink-soft); }
.mention-meta b { color: var(--ink); }
.mention-excerpt { font-size: 1rem; overflow-wrap: anywhere; }
.unread-mentions .status { margin: 0; }

/* ---- room list: unread badge, new-room form ---- */

.room-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; }
.badge {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--white);
	background: var(--highlight);
	border-radius: 999px;
	padding: 0.05rem 0.6rem;
	white-space: nowrap;
}
.badge[hidden] { display: none; }
/* Orange is for what is addressed to you. */
.badge.is-mentions { background: var(--accent); }

.new-room { margin-top: 1.5rem; border-top: 1px solid var(--line-light); padding-top: 1rem; }
.new-room summary { cursor: pointer; color: var(--highlight); font-weight: 600; }
.new-room summary:hover { color: var(--highlight-dark); }
.new-room form { margin-top: 1rem; }
.hint { margin: 0 0 0.4rem; font-size: 0.9375rem; color: var(--ink-soft); }

code {
	font: 0.9em var(--mono);
	background: var(--grey-soft);
	border: 1px solid var(--line-light);
	padding: 0.08em 0.32em;
	border-radius: var(--radius);
}

.visually-hidden {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}

/* ---- chat layout: the page never scrolls, the message pane does ---- */

.layout-chat { height: 100vh; height: 100dvh; min-height: 0; }
.layout-chat .hero-inner { padding-block: 1.1rem 3.2rem; }
.layout-chat .hero-title { font-size: 1.6rem; margin-bottom: 0.1rem; max-width: none; }
.layout-chat .hero-lead { font-size: 1rem; max-width: none; }
.layout-chat main { display: flex; flex-direction: column; min-height: 0; padding-bottom: 1rem; }
.layout-chat main > .chat { flex: 1; min-height: 0; width: 100%; }

.chat {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	position: relative;
	padding: 1rem 1.25rem 1.1rem;
	margin-top: -2.5rem;
}
/* A file dragged over the page (#14597): the whole window says where it goes. */
.chat.is-dropping::after {
	content: "Drop files to attach them to your message";
	position: fixed; inset: 0.75rem; z-index: 50; pointer-events: none;
	display: flex; align-items: center; justify-content: center;
	background: rgb(234 242 250 / 0.88); border: 3px dashed var(--highlight); border-radius: 8px;
	font: 600 1.375rem var(--sans); color: var(--brand);
}

.chat-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; }
.chat-bar .connection { margin: 0; }
.chat-bar { position: relative; }
/* The dot stays; "Live" itself is for screen readers only, and the TODO list takes its place. */
.bar-start { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.connection[data-state="live"] #connection-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.todo > summary {
	cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.35rem;
	font-weight: 600; font-size: 0.9375rem; color: var(--highlight); padding: 0.1rem 0.5rem;
	border: 1px solid var(--line); border-radius: 999px; background: var(--white);
}
.todo > summary::-webkit-details-marker { display: none; }
.todo > summary::after { content: "▾"; font-size: 0.75rem; }
.todo[open] > summary::after { content: "▴"; }
.todo-count { background: var(--brand); color: var(--white); border-radius: 999px; font-size: 0.75rem; padding: 0 0.45rem; line-height: 1.5; }
.todo-count[hidden] { display: none; }
/* The list opens over the conversation, under the bar, rather than pushing it down. */
.todo-pop {
	position: absolute; left: 0; top: calc(100% + 0.35rem); z-index: 5;
	width: min(35rem, 100%); max-height: 60vh; overflow-y: auto;
	background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: 0 8px 24px rgb(0 53 122 / 0.18); padding: 0.6rem 0.8rem;
}
.todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.todo-item { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.3rem 0.2rem; border-bottom: 1px solid var(--line-light); }
.todo-item:last-child { border-bottom: 0; }
.todo-item > input { accent-color: var(--success); flex: none; }
.todo-item > details { flex: 1; min-width: 0; }
.todo-item summary { cursor: pointer; overflow-wrap: anywhere; }
.todo-title { font-weight: 600; }
.todo-number { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 0.875rem; }
.todo-item.is-target { animation: target 2.4s ease-out; }
/* !3: a link to item 3 of this room's TODO list. */
.markdown a.todoref { font-weight: 600; text-decoration: none; border-bottom: 1px dotted currentColor; color: var(--success); }
.markdown a.todoref:hover { border-bottom-style: solid; }
.todo-meta { font-size: 0.8125rem; color: var(--ink-soft); }
.todo-item.is-done .todo-title { text-decoration: line-through; color: var(--ink-soft); font-weight: 400; }
.todo-description { margin: 0.35rem 0 0.2rem; font-size: 0.9375rem; }
.todo-from { font-size: 0.8125rem; margin-right: 0.75rem; }
.todo-remove { font-size: 0.8125rem; }
.todo-pop .hint { margin: 0; }

/* min-width: 0 all the way down: a chip with a long status shrinks to the screen, its status
   cut with an ellipsis, instead of pushing the page sideways on a phone. */
.members { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; min-width: 0; max-width: 100%; }
.member {
	max-width: 100%;
	min-width: 0;
	display: inline-flex;
	align-items: baseline;
	gap: 0.35rem;
	font-size: 0.875rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 0.05rem 0.65rem;
	background: var(--white);
}
/* When a chip must shrink, the status gives way first (its much larger flex-shrink); the
   name shrinks only if it alone is wider than the screen. */
.member-name { font-weight: 600; flex: 0 1 auto; min-width: 2.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-state { color: var(--ink-soft); flex: 0 1000 auto; min-width: 0; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member.is-listening { border-color: var(--success); }
.member.is-working { border-color: var(--accent); }
.member.is-working .member-state { color: var(--accent); }
/* Not here now: last seen, quietly (#9029). */
.member.is-away { border-style: dashed; background: var(--grey-soft); }
.member.is-away .member-name { font-weight: 400; color: var(--ink-soft); }
.member.is-away .member-state { font-size: 0.8125rem; }

.messages {
	flex: 1;
	min-height: 12rem;
	overflow-y: auto;
	border: 1px solid var(--line-light);
	border-radius: var(--radius);
	background: var(--pale-soft);
	padding: 0.5rem 0.75rem;
	/* preserve() in chat.js does the anchoring, the same in every browser. */
	overflow-anchor: none;
	overscroll-behavior: contain;
}
.messages:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.load-earlier { text-align: center; margin: 0.25rem 0 0.5rem; }
.load-earlier button {
	border: 1px solid var(--line) !important; border-radius: 999px; background: var(--white);
	padding: 0.25rem 0.9rem !important; font-size: 0.9375rem;
}
.load-earlier button:disabled { color: var(--ink-soft); cursor: default; }
.load-earlier[hidden] { display: none; }

.message-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }

.day-divider { display: flex; align-items: center; gap: 0.75rem; color: var(--ink-soft); font-size: 0.875rem; margin: 0.5rem 0; }
.day-divider::before, .day-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

.message {
	background: var(--white);
	border: 1px solid var(--line);
	border-left: 4px solid var(--line);
	border-radius: var(--radius);
	padding: 0.5rem 0.85rem 0.6rem;
	max-width: 100%;
	scroll-margin: 0.75rem;
	transition: border-color 1.2s ease, background-color 1.2s ease;
	position: relative;
	/* Vertical panning and zoom stay the browser's; a sideways swipe is ours (reply). */
	touch-action: pan-y pinch-zoom;
}
/* Swiping right to reply: an arrow shows behind the message, and it snaps back on release. */
.message::before {
	content: "↩";
	position: absolute; left: -2.1rem; top: 50%;
	transform: translateY(-50%) scale(0.6); opacity: 0;
	color: var(--highlight); font-size: 1.4rem; font-weight: 600;
	transition: opacity 0.1s, transform 0.1s;
	pointer-events: none;
}
.message.is-swiped::before { opacity: 1; transform: translateY(-50%) scale(1); }
.message.is-settling { transition: transform 0.2s ease-out; }
/* Mine lean right, everyone else's left, so the two sides of a conversation separate. */
.message { margin-right: 2rem; }
.message.is-mine { margin-right: 0; margin-left: 2rem; }
.message.is-mine { border-left-color: var(--highlight); background: var(--pale); }
.message.is-agent { border-left-color: var(--brand); }
.message.is-notification { border-left-color: var(--brand); background: var(--pale); }
/* Unread is blue; orange is reserved for what is addressed to you (.mentions-me, below). */
.message.is-unread { border-left-color: var(--highlight); box-shadow: 0 0 0 1px var(--highlight) inset; }
.message.is-target { animation: target 2.4s ease-out; }
@keyframes target { from { background-color: #ffe7d4; } }

.message-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.5rem; margin: 0 0 0.15rem; font-size: 0.9375rem; }
.author { font-weight: 600; }
.tag {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--brand);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0 0.35rem;
}
.tag-notification { color: var(--white); background: var(--brand); border-color: var(--brand); }
/* The operations on a message look like Send, only smaller (0.18.0). */
.copy-md, .reply-md, .task-md, .edit-md, .escalate-md, .delete-md, .save-md, .claim .claim-action {
	margin-left: auto;
	appearance: none;
	border: 1px solid var(--brand);
	border-radius: var(--radius);
	background: var(--brand);
	color: var(--white);
	padding: 0.1rem 0.55rem;
	font: 600 0.8125rem/1.5 var(--sans);
	cursor: pointer;
}
.copy-md:hover, .copy-md:focus-visible, .reply-md:hover, .reply-md:focus-visible,
.task-md:hover, .task-md:focus-visible, .edit-md:hover, .edit-md:focus-visible,
.escalate-md:hover, .escalate-md:focus-visible, .claim .claim-action:hover {
	background: var(--brand-hover); border-color: var(--brand-hover); color: var(--white); text-decoration: none;
}
.escalate-md:disabled { opacity: 0.6; cursor: default; }
.message-foot .escalate-md { margin-left: 0; }
.escalation { font-size: 0.8125rem; color: var(--ink-soft); font-style: italic; }
.escalation.is-done { color: var(--brand); font-style: normal; font-weight: 600; }
/* The header's buttons stay together on one row, pushed right, with the time after them. */
.msg-ops { order: 1; margin-left: auto; display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 0.3rem; }
/* Who, when and what: the author, the time, the tags (#10253). First on a wide screen. */
.msg-who { order: 0; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.5rem; min-width: 0; }
.msg-who .permalink { margin-left: 0; }
.msg-ops > * { margin-left: 0; }

/* The #id before the time: copies "#123". Black on white, apart from the blue buttons. */
.msgid-md {
	appearance: none; display: inline-flex; align-items: center; gap: 0.25rem;
	background: var(--white); color: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius);
	padding: 0.1rem 0.45rem; font: 600 0.8125rem/1.5 var(--sans); font-variant-numeric: tabular-nums; cursor: pointer;
}
.msgid-md:hover { background: var(--grey-soft); }
.msgid-icon { width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 1.4; }
.msgid-icon rect:last-child { fill: var(--white); }
.msgid-md.is-copied { border-color: var(--success); color: var(--success); }
.msgid-md.is-copied .msgid-icon { display: none; }
.msgid-md.is-copied::before { content: "✓"; }

.copy-md.is-done { background: var(--success); border-color: var(--success); }
/* #123: a link to that message. */
.markdown a.msgref { font-weight: 600; text-decoration: none; border-bottom: 1px dotted currentColor; font-variant-numeric: tabular-nums; }
.markdown a.msgref:hover { border-bottom-style: solid; }
.edited-mark { font-size: 0.8125rem; color: var(--ink-soft); font-style: italic; text-decoration: none; }
.edited-mark:hover { text-decoration: underline; }
.permalink { margin-left: auto; color: var(--ink-soft); text-decoration: none; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.permalink:hover { color: var(--highlight); text-decoration: underline; }
.mention { color: var(--brand); font-weight: 600; background: var(--pale); border-radius: var(--radius); padding: 0 0.15em; }
.mention.is-me { color: var(--white); background: var(--accent); }
/* Addressed to you (@you or @everyone): orange, and it stays after reading. Declared after
   the unread, mine, agent and notification styles so it wins over all of them. */
.message.mentions-me {
	border-left-color: var(--accent);
	box-shadow: 0 0 0 2px var(--accent) inset;
	background: #fff8f2;
}
.claim { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem; margin: 0 0 0.25rem; font-size: 0.875rem; color: var(--ink-soft); }
.claim.is-claimed .claim-state { color: var(--brand); font-weight: 600; }
/* Consensus (#10554): the final synthesis stands out in green; an agreed thread folds up. */
.tag-consensus { border-color: var(--success); color: var(--success); }
.tag-consensus.is-synthesis { border-color: var(--brand); color: var(--brand); }
/* Only the consensus's current final is green: a reopened one's earlier final is not. */
.message.is-consensus-final.is-current-final { border: 2px solid var(--success); border-left-width: 6px; background: #f1faf3; }
.consensus-more { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; }
.option-md.is-secondary { background: var(--white); color: var(--brand); }
.option-md.is-secondary:hover:not(:disabled) { background: var(--pale); color: var(--brand); }
.message.is-folded { display: none; }
.consensus-state { margin: 0 0 0.3rem; font-size: 0.875rem; color: var(--ink-soft); }
.message.is-consensus-start .consensus-state { color: var(--success); font-weight: 600; }
.consensus-toggle { font-size: 0.875rem; }
.consensus-foot { margin: 0.5rem 0 0; }
/* The discussion inside the green final (#11313): compact, in order, each part tagged. */
.consensus-thread { list-style: none; margin: 0.6rem 0 0.2rem; padding: 0.5rem 0 0.5rem 0.9rem;
	border-left: 3px solid var(--success); display: grid; gap: 0.55rem; }
.ct-item { background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius); padding: 0.45rem 0.7rem; }
.ct-item.is-synthesis { border-color: var(--brand); }
.ct-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; margin: 0 0 0.2rem; font-size: 0.875rem; }
.ct-time { color: var(--ink-soft); }
.ct-id { margin-left: auto; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ct-body { font-size: 0.9375rem; }
.ct-files { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--ink-soft); }
/* Edited and resent: the old one stays, faded, pointing at the new one. */
.message.is-replaced > :not(.message-head):not(.claim) { opacity: 0.55; }
.claim.is-replaced { font-style: italic; }
.claim.is-claimed .claim-state::before { content: "◔ "; }
.claim.is-done .claim-state { color: var(--success); font-weight: 600; }
.claim.is-done .claim-state::before { content: "✓ "; }
.reply-quote {
	display: flex; flex-direction: column; gap: 0.05rem;
	margin: 0.1rem 0 0.4rem; padding: 0.3rem 0.6rem;
	border-left: 3px solid var(--line); background: var(--grey-soft); border-radius: var(--radius);
	text-decoration: none; color: var(--ink-soft); font-size: 0.875rem;
}
.reply-quote:hover { border-left-color: var(--highlight); }
.reply-author { font-weight: 600; color: var(--ink); }
.reply-excerpt { overflow-wrap: anywhere; }
.replying {
	display: flex; align-items: center; gap: 0.5rem;
	padding: 0.35rem 0.6rem; border-left: 3px solid var(--highlight);
	background: var(--pale); border-radius: var(--radius); font-size: 0.9375rem;
}
.replying[hidden] { display: none; }
.replying.editing { border-left-color: var(--accent); background: #fdf1e8; }
.replying-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.replying-cancel { appearance: none; border: 0; background: none; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--ink-soft); }
/* The foot: Reply on the left, "Seen by" on the right. */
/* Reply options: an agent's suggested answers, as buttons under the message (0.20.0). */
.options { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.75rem 0 0.6rem; }
.option-md {
	appearance: none; border: 1px solid var(--brand); border-radius: var(--radius);
	background: var(--brand); color: var(--white);
	font: 600 0.9375rem/1.4 var(--sans); padding: 0.35rem 1rem; cursor: pointer;
}
.option-md:hover:not(:disabled) { background: var(--brand-hover); border-color: var(--brand-hover); }
.option-md:disabled { opacity: 0.45; cursor: default; }
.option-md.is-chosen { opacity: 1; background: var(--success); border-color: var(--success); }
.option-md.is-chosen::before { content: "✓ "; }
.option-md.is-failed { background: var(--alert); border-color: var(--alert); }
.options-chosen { font-size: 0.8125rem; color: var(--ink-soft); }
/* Multiple choice: one checkbox per option, a column of them, and Send answer. */
.options.is-multi { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.option-check { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.8rem;
	border: 1px solid var(--brand); border-radius: var(--radius); background: var(--white); cursor: pointer; font-weight: 600; }
.option-check input { accent-color: var(--brand); width: 1.05rem; height: 1.05rem; }
.option-check:has(input:checked) { background: var(--pale); }
.option-check.is-chosen { border-color: var(--success); background: #e8f5ec; }
.option-check:has(input:disabled) { cursor: default; }
.option-check:not(.is-chosen):has(input:disabled) { opacity: 0.5; }
.option-send { margin-top: 0.3rem; }
.message-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem; margin: 0.3rem 0 0; }
.message-foot:empty { display: none; }
.message-foot .reply-md { margin-left: 0; }
.receipt { margin-left: auto; font-size: 0.8125rem; color: var(--ink-soft); text-align: right; }

/* Markdown from the server */
.markdown { font-size: 1rem; line-height: 1.55; overflow-wrap: anywhere; }
.markdown > :first-child { margin-top: 0; }
.markdown > :last-child { margin-bottom: 0; }
.markdown p, .markdown ul, .markdown ol, .markdown pre, .markdown blockquote, .markdown table { margin: 0 0 0.6rem; }
.markdown ul, .markdown ol { padding-left: 1.4rem; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4 { font-size: 1.0625rem; margin: 0.8rem 0 0.35rem; }
.markdown h1 { font-size: 1.25rem; }
.markdown h2 { font-size: 1.125rem; }
.markdown blockquote { border-left: 3px solid var(--line); margin-left: 0; padding-left: 0.8rem; color: var(--ink-soft); }
.markdown pre {
	background: var(--grey-soft);
	border: 1px solid var(--line-light);
	border-left: 3px solid var(--highlight);
	border-radius: var(--radius);
	padding: 0.6rem 0.8rem;
	overflow-x: auto;
	overflow-wrap: normal;
}
.markdown pre code { background: none; border: 0; padding: 0; font-size: 0.875rem; line-height: 1.6; }
.markdown table { border-collapse: collapse; font-size: 0.9375rem; display: block; overflow-x: auto; }
.markdown th, .markdown td { border: 1px solid var(--line); padding: 0.25rem 0.55rem; text-align: left; }
.markdown th { background: var(--pale); }
.markdown hr { border: 0; border-top: 1px solid var(--line); margin: 0.8rem 0; }

/* A long document in Markdown: the privacy policy. Headings as on a page, not in a message. */
.prose { font-size: 1.0625rem; }
.prose h1 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.prose h2 { font-size: 1.25rem; margin-top: 1.6rem; }
.prose p, .prose ul { max-width: var(--measure); }
.prose td { vertical-align: top; }
/* Words whole in the tables: they scroll sideways on a phone rather than break mid-word. */
.prose table { overflow-wrap: normal; }

/* The attachment viewer (#10561). */
.viewer { width: min(62rem, 95vw); max-height: 90vh; padding: 0; border: 1px solid var(--line);
	border-radius: var(--radius); box-shadow: 0 12px 40px rgb(0 0 0 / 0.3); }
.viewer::backdrop { background: rgb(0 20 50 / 0.55); }
.viewer-head { position: sticky; top: 0; display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.9rem;
	background: var(--white); border-bottom: 1px solid var(--line); }
.viewer-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-tools { display: inline-flex; gap: 0.9rem; }
.viewer-tools .link-button, .viewer-head > .link-button { font-size: 0.9375rem; }
.viewer-close { appearance: none; border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink-soft); }
.viewer-body { max-height: calc(90vh - 3rem); overflow: auto; }
.viewer-body img, .viewer-body video { display: block; max-width: 100%; max-height: calc(90vh - 3.2rem); margin: 0 auto; }
.viewer-code { margin: 0; padding: 0.9rem 1rem; font: 400 0.875rem/1.55 var(--mono); white-space: pre; tab-size: 4; background: #f6f8fa; }
.viewer-code code { font: inherit; background: none; padding: 0; }
.viewer-note { padding: 0.9rem 1rem; margin: 0; }
.attachments .is-video .file-name::before { content: "▶ "; }
.attachments { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* No width: auto here: that overrides the width attribute, and an image not loaded yet then
   takes no room and pushes everything below it down when it arrives. The attributes give the
   width, height: auto derives the height from their ratio, and object-fit keeps a capped one
   undistorted. */
.attachments img {
	display: block;
	max-width: min(100%, 28rem);
	max-height: 22rem;
	height: auto;
	object-fit: contain;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--grey-soft);
}
.attachments .is-image { max-width: 100%; }
.attachments .is-file a,
.pending li {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
	padding: 0.3rem 0.6rem;
	font-size: 0.9375rem;
	text-decoration: none;
}
.file-name { font-weight: 600; overflow-wrap: anywhere; }
.file-size { color: var(--ink-soft); font-size: 0.875rem; white-space: nowrap; }

/* Sticky inside the pane: stays at the bottom of what is visible, whatever the layout. */
.new-pill {
	position: sticky;
	bottom: 0.5rem;
	display: block;
	margin: 0.5rem auto 0;
	appearance: none;
	background: var(--brand);
	color: var(--white);
	border: 0;
	border-radius: 999px;
	font: 600 0.9375rem var(--sans);
	padding: 0.4rem 1rem;
	box-shadow: 0 2px 8px rgb(0 53 122 / 0.3);
	cursor: pointer;
	z-index: 2;
}
.new-pill[hidden] { display: none; }

/* The round "to the end" button: bottom right of the conversation, above the composer. */
.to-end-holder {
	position: sticky;
	bottom: 0.75rem;
	height: 0;
	display: flex;
	justify-content: flex-end;
	overflow: visible;
	z-index: 2;
	pointer-events: none;
}
.to-end {
	pointer-events: auto;
	transform: translateY(-100%);
	width: 2.5rem;
	height: 2.5rem;
	margin-right: 0.25rem;
	border-radius: 50%;
	border: 1px solid var(--white);
	background: var(--brand);
	color: var(--white);
	font: 600 1.25rem/1 var(--sans);
	box-shadow: 0 2px 8px rgb(0 53 122 / 0.35);
	cursor: pointer;
	appearance: none;
}
.to-end:hover { background: var(--brand-hover); }
/* "… is typing": bottom left of the conversation, at the height of the ↓ (#8702). */
.typing-holder {
	position: sticky; bottom: 0.75rem; height: 0; display: flex; justify-content: flex-start;
	overflow: visible; z-index: 2; pointer-events: none;
}
.typing {
	transform: translateY(-100%); margin: 0 0 0 0.25rem; max-width: 70%;
	padding: 0.2rem 0.7rem; border-radius: 999px; background: var(--white);
	border: 1px solid var(--line); box-shadow: 0 2px 8px rgb(0 53 122 / 0.15);
	font-size: 0.875rem; font-style: italic; color: var(--ink-soft);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.typing[hidden] { display: none; }
.to-end[hidden] { display: none; }

.composer { display: flex; flex-direction: column; gap: 0.5rem; position: relative; }
/* @mention suggestions, above the message box. */
.mention-suggest {
	position: absolute; left: 0; bottom: calc(100% - 0.25rem); z-index: 6;
	list-style: none; margin: 0; padding: 0.3rem; min-width: 16rem; max-width: min(28rem, 100%);
	max-height: 16rem; overflow-y: auto;
	background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: 0 6px 18px rgb(0 53 122 / 0.18);
}
.mention-suggest[hidden] { display: none; }
.mention-option { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.3rem 0.55rem; border-radius: var(--radius); cursor: pointer; }
.mention-option.is-active { background: var(--brand); color: var(--white); }
.mention-option-name { font-weight: 600; }
.mention-option-note { font-size: 0.8125rem; color: var(--ink-soft); }
.mention-option-online { margin-left: auto; font-size: 0.75rem; color: var(--success); font-weight: 600; }
.mention-option.is-active .mention-option-note, .mention-option.is-active .mention-option-online { color: var(--white); }
.composer textarea {
	width: 100%;
	resize: none;
	font: 400 1.0625rem/1.45 var(--sans);
	color: var(--ink);
	padding: 0.55rem 0.7rem;
	background: var(--white);
	border: 1px solid var(--ink-soft);
	border-radius: var(--radius);
	min-height: 3.2rem;
}
.composer-actions { display: flex; align-items: center; gap: 0.75rem; }
.composer-actions .status { margin: 0; flex: 1; }
.composer-actions .primary { padding: 0.45rem 1.4rem; }

.attach { position: relative; cursor: pointer; color: var(--highlight); font-weight: 600; font-size: 1rem; }
.attach:hover { color: var(--highlight-dark); text-decoration: underline; }
.attach input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.attach:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }

.pending { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pending[hidden] { display: none; }
.pending li { align-items: center; }
.pending img { width: 2.5rem; height: 2.5rem; object-fit: cover; border-radius: var(--radius); }
.pending .marker { font: 600 0.8125rem var(--mono); color: var(--brand); background: var(--pale); border-radius: var(--radius); padding: 0 0.3rem; }
.pending li.is-dropped { opacity: 0.55; }
.pending li.is-dropped img { filter: grayscale(1); }
.dropped-note { font-size: 0.8125rem; color: var(--alert); }
.attachments .is-image { display: flex; flex-direction: column; gap: 0.2rem; }
.image-caption { font: 600 0.8125rem var(--mono); color: var(--ink-soft); }
.pending .remove {
	appearance: none; border: 0; background: none; color: var(--ink-soft);
	font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 0.15rem;
}
.pending .remove:hover { color: var(--alert); }

.send-failed {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0.8rem;
	background: #fdf0f0;
	border: 1px solid var(--alert);
	border-left: 4px solid var(--alert);
	border-radius: var(--radius);
	color: var(--alert);
	font-size: 0.9375rem;
	font-weight: 600;
}
.send-failed[hidden] { display: none; }
.send-failed span { flex: 1; }
.retry {
	flex: none;
	appearance: none;
	background: var(--alert);
	border: 1px solid var(--alert);
	color: var(--white);
	font: 600 0.9375rem var(--sans);
	padding: 0.35rem 1rem;
	border-radius: var(--radius);
	cursor: pointer;
}
.retry:hover { background: #9e1f1f; }

/* ---- notifications page ---- */

.notify-card { max-width: 36rem; }
.choice { border: 0; margin: 0 0 1.25rem; padding: 0; }
.choice legend { font-weight: 600; margin-bottom: 0.4rem; padding: 0; }
.choice > label { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.35rem 0; }
.choice input[type="radio"], .choice input[type="checkbox"] { accent-color: var(--highlight); }
.choice .field { margin: 0.2rem 0 0.8rem 1.6rem; }
.actions .link-button { font-size: 1rem; }
/* Signal: a phone number and its code, each with its button beside it. */
.inline-field { display: flex; gap: 0.5rem; align-items: stretch; margin-bottom: 0.4rem; }
.inline-field input { flex: 1; min-width: 0; }
.inline-field[hidden], .signal-field [hidden] { display: none; }
.secondary {
	appearance: none; flex: none;
	background: var(--white); color: var(--brand);
	border: 1px solid var(--brand); border-radius: var(--radius);
	font: 600 0.9375rem var(--sans); padding: 0.4rem 0.9rem; cursor: pointer;
}
.secondary:hover { background: var(--pale); }
.signal-number { margin: 0 0 0.4rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; }

/* ---- recap ---- */

/* Access and Recap share a row while closed; an open one takes the whole row (0.18.2). */
.room-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; position: relative; }
.room-tools > details { flex: 1 1 6rem; min-width: 0; }
.room-edit { border: 1px solid var(--line-light); border-radius: var(--radius); padding: 0.4rem 0.75rem; }
.room-edit summary { cursor: pointer; color: var(--highlight); font-weight: 600; font-size: 0.9375rem; }
.room-edit[open] { padding-bottom: 0.4rem; }
.room-edit-form { margin-top: 0.6rem; font-size: 0.9375rem; }
.room-edit-form .field { margin-bottom: 0.7rem; }
.room-edit-form textarea { width: 100%; font: 400 1rem/1.45 var(--sans); padding: 0.45rem 0.6rem;
	border: 1px solid var(--ink-soft); border-radius: var(--radius); resize: vertical; }
.room-edit-form .check { display: flex; gap: 0.5rem; align-items: baseline; margin-bottom: 0.7rem; }
.room-edit-form .actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; }
/* Opened, the summary stays in its place in the row, and what it holds opens over the
   conversation under the row, the width of the row (#9029). */
.room-tools > details[open] > summary { color: var(--ink); }
.tool-pop {
	position: absolute; left: 0; right: 0; top: calc(100% + 0.35rem); z-index: 6;
	max-height: 70vh; overflow-y: auto;
	background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: 0 8px 24px rgb(0 53 122 / 0.18); padding: 0.6rem 0.9rem 0.8rem;
}
.room-recap { border: 1px solid var(--line-light); border-radius: var(--radius); padding: 0.4rem 0.75rem; }
.room-recap summary { cursor: pointer; color: var(--highlight); font-weight: 600; font-size: 0.9375rem; }
.room-recap[open] { padding-bottom: 0.4rem; }
.recap-periods { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0; }
.recap-periods [aria-pressed="true"] { background: var(--brand); color: var(--white); }
.recap { font-size: 0.9375rem; }
.recap-summary { margin: 0 0 0.5rem; }
.recap-section h3 { font-size: 0.9375rem; margin: 0.6rem 0 0.2rem; }
.recap-section ul { margin: 0; padding-left: 1.1rem; }
.recap-section li { margin: 0.15rem 0; overflow-wrap: anywhere; }
.recap-link { font-variant-numeric: tabular-nums; }
.recap-meta { color: var(--ink-soft); }
.recap-ask { margin: 0.6rem 0 0; }

/* ---- access lists ---- */

.room-tags { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.room-access { border: 1px solid var(--line-light); border-radius: var(--radius); padding: 0.4rem 0.75rem; }
.room-access summary { cursor: pointer; color: var(--highlight); font-weight: 600; font-size: 0.9375rem; }
.room-access[open] { padding-bottom: 0.4rem; }
.grants { width: 100%; border-collapse: collapse; font-size: 0.9375rem; margin: 0.5rem 0; }
.grants th, .grants td { text-align: left; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--line-light); }
.grants th { font-weight: 600; color: var(--ink-soft); }
.grants-empty { color: var(--ink-soft); }
.grant-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.grant-form select, .grant-form input {
	font: 400 1rem var(--sans);
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--ink-soft);
	border-radius: var(--radius);
	background: var(--white);
}
.grant-form input { flex: 1 1 10rem; min-width: 0; }
.grant-form .primary { padding: 0.35rem 1rem; }
.read-only { margin: 0; }

/* ---- usage room ---- */

.usage-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.usage-plan { margin: 0; font-weight: 600; }
.limits { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1rem; }
.limit {
	border: 1px solid var(--line);
	border-left: 4px solid var(--highlight);
	border-radius: var(--radius);
	padding: 0.8rem 1rem;
	background: var(--white);
}
.limit-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.45rem; }
.limit-name { font-weight: 600; }
.limit-percent { font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.meter-track { display: block; height: 0.75rem; background: var(--line-light); border-radius: var(--radius); overflow: hidden; }
.meter-fill { display: block; height: 100%; background: var(--highlight); }
.limit.is-warning { border-left-color: var(--accent); }
.limit.is-warning .meter-fill { background: var(--accent); }
.limit.is-critical, .limit.is-exceeded, .limit.is-blocked { border-left-color: var(--alert); }
.limit.is-critical .meter-fill, .limit.is-exceeded .meter-fill, .limit.is-blocked .meter-fill { background: var(--alert); }
.limit-reset { margin: 0.45rem 0 0; font-size: 0.9375rem; color: var(--ink-soft); }
.limit-until { font-weight: 600; color: var(--ink); }
.usage-subhead { font-size: 1.0625rem; margin: 0 0 0.5rem; }
.breakdown { list-style: none; margin: 0 0 1.25rem; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.breakdown li { display: flex; justify-content: space-between; padding: 0.4rem 0.8rem; border-bottom: 1px solid var(--line-light); font-size: 1rem; }
.breakdown li:last-child { border-bottom: 0; }
.breakdown-percent { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.usage-meta { margin: 0 0 1rem; font-size: 0.9375rem; color: var(--ink-soft); }
.usage-section { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line-light); }
.signin { margin: 0 0 1rem; font-size: 1rem; }
.signin.is-soon { color: var(--accent); font-weight: 600; }
.primary:disabled { background: var(--ink-soft); border-color: var(--ink-soft); cursor: default; }

/* ---- pop-up notices ---- */

.toasts {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	z-index: 10;
	max-width: min(24rem, calc(100vw - 2rem));
}
.toast {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding-right: 2.2rem !important;   /* room for the close button, on every toast (#8297) */
	background: var(--white);
	border: 1px solid var(--line);
	border-left: 4px solid var(--highlight);
	border-radius: var(--radius);
	box-shadow: 0 4px 14px rgb(0 53 122 / 0.18);
	padding: 0.6rem 0.9rem;
	color: var(--ink);
	text-decoration: none;
	animation: toast-in 0.25s ease-out;
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.toast.is-notification { border-left-color: var(--accent); }
.toast.is-leaving { opacity: 0; transform: translateY(0.5rem); }
.toast-link { display: flex; flex-direction: column; gap: 0.1rem; color: inherit; text-decoration: none; }
.toast:hover .toast-head { color: var(--highlight-dark); text-decoration: underline; }
.toast-head { font-weight: 600; font-size: 0.9375rem; color: var(--highlight); }
.toast-body { font-size: 0.9375rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.toast.is-sticky { position: relative; border-left-color: var(--brand); padding-right: 2.2rem; }
.toast-actions { display: flex; gap: 0.5rem; margin-top: 0.35rem; }
.toast-actions:empty { display: none; }
.toast-reload {
	appearance: none; border: 0; border-radius: var(--radius);
	background: var(--brand); color: var(--white);
	font: 600 0.9375rem var(--sans); padding: 0.3rem 0.9rem; cursor: pointer;
}
.toast-reload:hover { background: var(--brand-hover); }
.toast-close {
	position: absolute; top: 0.3rem; right: 0.4rem;
	appearance: none; border: 0; background: none; cursor: pointer;
	font-size: 1.25rem; line-height: 1; color: var(--ink-soft); padding: 0.1rem 0.3rem;
}
.toast-close:hover { color: var(--ink); }
@keyframes toast-in { from { opacity: 0; transform: translateY(0.5rem); } }

/* ---- footer ---- */

.site-footer {
	background: var(--grey-soft);
	color: var(--ink-soft);
	font-size: 1rem;
	padding-inline: 1.5rem;
}

.footer-inner {
	max-width: var(--page);
	margin-inline: auto;
	padding-block: 2rem 2.5rem;
}
.footer-inner p { margin: 0; }
.footer-inner .fine { margin-top: 0.4rem; font-size: 0.9375rem; }

/* ---- narrow screens ---- */

@media (max-width: 40rem) {
	body { font-size: 17px; }
	.hero-title { font-size: 1.75rem; }
	.site-header, .hero, main, .site-footer { padding-inline: 1.25rem; }
	.hero-inner { padding-block: 2rem 4.5rem; }
	.bar { padding-block: 0.8rem; gap: 0.35rem 1rem; }
	/* The menu stays at the top: the whole header is sticky, pulled up by the logo row
	   (--header-stick, measured by common.js), so only the menu remains on screen. */
	.site-header:has(.site-nav) { position: sticky; top: var(--header-stick, 0px); z-index: 10; }
	/* The menu on one line, a notification count included (#7890): less padding at the sides
	   and between items, and the items spread over the whole width. */
	.site-header { padding-inline: 0.6rem; }
	.site-nav { width: 100%; justify-content: space-between; gap: 0 0.3rem; }
	/* Too narrow for all of it (#8297): one line that scrolls sideways, no scrollbar shown.
	   The panels are position: fixed on a phone, so the scrolling doesn't clip them. */
	.site-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.site-nav::-webkit-scrollbar { display: none; }
	.site-nav > * { flex: none; }
	/* The composer's buttons (Attach, Priority…, Later…, Send) wrap instead of overflowing
	   (#19281); the status line gets a line of its own. */
	.composer-actions { flex-wrap: wrap; gap: 0.5rem; }
	.composer-actions .status { order: 10; flex-basis: 100%; }
	.composer-actions .attach { margin-right: auto; }
	.composer-actions .prio-toggle, .composer-actions .later-toggle { padding: 0.35rem 0.55rem; font-size: 0.875rem; }
	.composer-actions #send { margin-left: auto; padding: 0.45rem 1rem; }
	/* Since the ⋯ menu (#17061) the #id and ⋯ fit beside the author: on the same row, at the
	   right (#17804), so the menu opens inwards. */
	.msg-who { flex: 1 1 auto; }
	/* The logo on the menu's line (#9308): the way to the main page on a phone. Just the mark;
	   the menu takes the rest of the line and scrolls sideways where it doesn't fit. */
	.bar { flex-wrap: nowrap; gap: 0 0.6rem; }
	.wordmark { flex: none; }
	.wordmark .name { display: none; }
	.site-nav { width: auto; flex: 1; min-width: 0; gap: 0 0.75rem; }
	.site-nav a, .site-nav .link-button { font-size: 0.9375rem; }
	/* The Usage panel spans the screen under the menu (usage-pop.js sets its top). */
	.menu-pop { position: fixed; left: 0.75rem; right: 0.75rem; width: auto; min-width: 0; max-width: none; max-height: 70vh; }
	.card { padding: 1.25rem; }
	.layout-chat main { padding-inline: 0.5rem; padding-bottom: 0; }
	.layout-chat .hero-inner { padding-block: 0.8rem 3rem; }

	/* On a phone the page scrolls, not the pane: the header scrolls away and the
	   conversation gets the whole screen, with the composer pinned to the bottom. */
	.layout-chat { height: auto; }
	.layout-chat main > .chat { flex: none; }
	.chat { padding: 0.75rem 0.75rem 0; gap: 0.5rem; }
	.messages {
		flex: none;
		overflow: visible;
		min-height: 0;
		padding: 0;
		border: 0;
		background: none;
	}
	.composer {
		position: sticky;
		bottom: 0;
		z-index: 3;
		margin-inline: -0.75rem;
		padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom));
		background: var(--white);
		border-top: 1px solid var(--line);
		box-shadow: 0 -2px 6px rgb(0 53 122 / 0.06);
	}
	/* One flowing line on a phone (#8565): the dot, TODO and every participant are inline and
	   wrap only where they must, instead of the member list starting a block of its own. */
	.chat-bar { display: block; }
	.chat-bar .bar-start { display: inline-flex; vertical-align: middle; margin: 0.15rem 0.45rem 0.15rem 0; }
	.chat-bar .members { display: inline; }
	.chat-bar .member { display: inline-flex; vertical-align: middle; margin: 0.15rem 0.3rem 0.15rem 0; }
	/* A working agent's status, shortened: the list opens it in full on a wider screen. */
	.member-state { max-width: 8rem; }
	.member-name { max-width: 9rem; }
	/* The status and member list stay stuck to the top, as the composer does to the bottom. */
	.chat-bar {
		position: sticky;
		top: var(--nav-height, 0px);
		z-index: 3;
		margin-inline: -0.75rem;
		padding: 0.45rem 0.75rem;
		background: var(--white);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 2px 6px rgb(0 53 122 / 0.06);
	}
	/* A #id jump lands below the stuck bar, not under it. */
	.message { scroll-margin-top: calc(var(--bar-height, 3rem) + 0.5rem); }
	/* Clear of the pinned composer (its height is kept in --composer-height by chat.js). */
	.new-pill { bottom: calc(var(--composer-height, 7rem) + 0.5rem); }
	.to-end-holder { bottom: calc(var(--composer-height, 7rem) + 0.75rem); }
	.typing-holder { bottom: calc(var(--composer-height, 7rem) + 0.75rem); }
	.footer-inner { padding-block: 1.75rem 2rem; }
}

/* The narrowest phones (360 px): the menu still on one line. */
@media (max-width: 23rem) {
	.site-header { padding-inline: 0.45rem; }
	.site-nav { gap: 0 0.2rem; }
	.site-nav a, .site-nav .link-button { font-size: 0.8125rem; }
	.notif-toggle { gap: 0.2rem; }
	.notif-count { padding: 0 0.3rem; font-size: 0.6875rem; }
}

/* A long paste as a file (#11466): an editable suffix, and a warning if it looks secret. */
/* Green and as wide as the box, sitting on it (#11851). */
.pending li.is-paste {
	flex-basis: 100%; flex-wrap: wrap; row-gap: 0.25rem;
	background: #e8f4eb; border-color: var(--success); border-bottom: none;
	border-radius: var(--radius) var(--radius) 0 0;
}
.pending li.is-paste + li.is-paste { margin-top: -0.4rem; border-top: 1px dashed var(--success); border-radius: 0; }
.composer .pending:has(li.is-paste) { margin-bottom: -0.5rem; }
.composer .pending:has(li.is-paste) ~ textarea { border-top-left-radius: 0; border-top-right-radius: 0; }
.pending li.is-paste .file-name { margin-right: -0.5rem; }
.paste-suffix { font: 600 0.9375rem var(--mono); width: 5ch; padding: 0 0.2rem; border: 1px solid var(--line); border-radius: var(--radius); }
.paste-as-text { font-size: 0.8125rem; padding: 0.05rem 0.4rem; }
.pending li.is-secret { border-color: var(--alert); background: #fbeaea; }
.secret-note { flex-basis: 100%; color: var(--alert); font-size: 0.875rem; font-weight: 600; }
/* The × at the row's right end, on its first line, above any warning (#11995). */
.pending li.is-paste .remove { margin-left: auto; }
.pending li.is-paste .secret-note { order: 1; }
/* The message box looks like it holds a secret (#12293). */
.secret-warning { padding: 0.45rem 0.7rem; background: #fbeaea; border: 1px solid var(--alert); border-left: 4px solid var(--alert); border-radius: var(--radius); color: var(--alert); font-weight: 600; font-size: 0.9375rem; }
.secret-warning[hidden] { display: none; }

/* Usage per agent (#12860). */
.usage-host { margin: -0.5rem 0 1rem; color: var(--ink-soft); }
.usage-host.is-stale, .agent-usage-when.is-stale { color: var(--accent); font-weight: 600; }
.usage-history-wrap { overflow-x: auto; margin-bottom: 1.25rem; }
.usage-history { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
.usage-history th, .usage-history td { text-align: left; padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--line-light); white-space: nowrap; }
.usage-history th { font-weight: 600; color: var(--ink-soft); }
.usage-history .num { text-align: right; font-variant-numeric: tabular-nums; }
.usage-history-empty { color: var(--ink-soft); }
.agent-usage-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.75rem; }
.agent-usage { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 0.9rem; }
.agent-usage.is-silent { background: var(--grey-soft); }
.agent-usage-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; }
.agent-usage-name { font-weight: 700; font-size: 1.0625rem; }
.agent-usage-host { color: var(--ink-soft); font-size: 0.9375rem; }
.agent-usage-line { margin: 0.1rem 0; font-size: 0.9375rem; }
.agent-usage-line .is-over { color: var(--alert); }
.agent-usage-line.is-soon { color: var(--accent); font-weight: 600; }
/* A destructive action (#13949): the Send-style button, in red. */
.primary.danger { background: var(--alert); border-color: var(--alert); }
.primary.danger:hover { background: #9e1f1f; border-color: #9e1f1f; }
.usage-remove[hidden] { display: none; }
.usage-stale { color: var(--accent); font-weight: 600; margin: 0 0 1rem; }
.usage-stale[hidden] { display: none; }
/* "[report.pdf]" in a message: a link that opens the attachment in the viewer (#14595). */
.markdown a.file-ref { font-family: var(--mono); font-size: 0.9em; background: var(--pale); border-radius: var(--radius); padding: 0 0.25rem; text-decoration: none; }
.markdown a.file-ref:hover { text-decoration: underline; }

/* The Roadmap page (#14789). */
.roadmap { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.75rem; counter-reset: roadmap; }
.roadmap-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 0.9rem; display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; }
.roadmap-text { flex: 1; min-width: 0; }
.roadmap-text > :first-child { margin-top: 0; }
.roadmap-text > :last-child { margin-bottom: 0; }
.roadmap-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; flex-shrink: 0; }
.roadmap-status { margin: 0; font-size: 0.875rem; }
@media (max-width: 40rem) { .roadmap-item { flex-direction: column; } .roadmap-actions { align-items: flex-start; } }
/* Cancel a just-sent message (#14795): red, next to Send, counting down. */
.composer-actions .cancel-send { padding: 0.45rem 1rem; font-variant-numeric: tabular-nums; }
.composer-actions .cancel-send[hidden] { display: none; }
/* Deleting your own message (#15260): the same button, red on hover. */
.delete-md:hover, .delete-md:focus-visible { color: var(--alert); border-color: var(--alert); }
/* Timed tasks (#15892): Later… next to Send, and your scheduled messages above the box. */
.later { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--pale-soft); }
.later[hidden] { display: none; }
.later .hint { font-size: 0.875rem; color: var(--ink-soft); }
.later input { font: inherit; padding: 0.25rem 0.4rem; border: 1px solid var(--ink-soft); border-radius: var(--radius); }
.scheduled-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.scheduled-list[hidden] { display: none; }
.scheduled-list li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.3rem 0.6rem; border: 1px dashed var(--highlight); border-radius: var(--radius); background: var(--pale); font-size: 0.9375rem; }
.scheduled-label { font-weight: 700; color: var(--brand); }
.scheduled-when { font-weight: 600; white-space: nowrap; }
.scheduled-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.scheduled-list .remove { appearance: none; border: 0; background: none; color: var(--ink-soft); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 0.15rem; margin-left: auto; }
.scheduled-list .remove:hover { color: var(--alert); }
/* While Cancel counts down, Later… makes room for it (#16044). */
.composer-actions .cancel-send:not([hidden]) ~ .later-toggle,
.composer-actions:has(.cancel-send:not([hidden])) .later-toggle { display: none; }
/* Routing (#16192): whom a message to @role went to; each agent's profile and roles. */
.tag-routed { background: var(--pale); color: var(--brand); }
.agent-profile { display: grid; gap: 0.5rem; max-width: 40rem; margin-bottom: 1rem; }
.agent-profile label { display: grid; gap: 0.2rem; font-weight: 600; font-size: 0.9375rem; }
.agent-profile input { font: inherit; font-weight: 400; padding: 0.35rem 0.5rem; border: 1px solid var(--ink-soft); border-radius: var(--radius); }
.tag-delegated { background: #eef6ea; color: var(--success); text-decoration: none; }
/* Saved messages (#16633). */
.save-md.is-saved { color: var(--brand); border-color: var(--brand); font-weight: 600; }
.saved-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.saved-filters select, .saved-filters input { font: inherit; padding: 0.4rem 0.55rem; border: 1px solid var(--ink-soft); border-radius: var(--radius); background: var(--white); }
.saved-filters input { flex: 1; min-width: 12rem; }
.saved-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.saved-list li { display: flex; align-items: flex-start; gap: 0.5rem; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.75rem; }
.saved-list a { flex: 1; min-width: 0; display: grid; gap: 0.2rem; text-decoration: none; color: inherit; }
.saved-meta { font-size: 0.875rem; color: var(--ink-soft); }
.saved-excerpt { overflow-wrap: anywhere; }
.saved-list .remove { appearance: none; border: 0; background: none; color: var(--ink-soft); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.saved-list .remove:hover { color: var(--alert); }

/* The message's actions in a ⋯ menu at the row's end (#17061). */
.msg-menu { position: relative; display: inline-flex; }
.msg-menu-toggle {
	appearance: none; cursor: pointer; font: 700 0.8125rem/1.5 var(--sans); letter-spacing: 0.08em;
	padding: 0.1rem 0.5rem; border: 1px solid var(--ink); border-radius: var(--radius);
	background: var(--white); color: var(--ink);
}
.msg-menu-toggle:hover, .msg-menu-toggle:focus-visible, .msg-menu-toggle[aria-expanded="true"] { border-color: var(--brand); color: var(--brand); }
.msg-menu-list {
	position: absolute; right: 0; top: calc(100% + 0.25rem); z-index: 20; min-width: 11rem;
	display: flex; flex-direction: column; padding: 0.3rem;
	background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: 0 6px 18px rgb(0 53 122 / 0.18);
}
.msg-menu-list[hidden] { display: none; }
.msg-menu-list button {
	display: block; width: 100%; text-align: left; margin: 0;
	background: none; color: var(--ink); border: 0; border-radius: var(--radius);
	padding: 0.45rem 0.6rem; font: 400 0.9375rem var(--sans); white-space: nowrap;
}
.msg-menu-list button:hover, .msg-menu-list button:focus-visible { background: var(--pale); color: var(--brand); }
.msg-menu-list .delete-md:hover, .msg-menu-list .delete-md:focus-visible { background: #fbeaea; color: var(--alert); }
.msg-menu-list .save-md.is-saved { font-weight: 600; color: var(--brand); }
.message.has-menu-open { z-index: 5; position: relative; }
.msg-menu-list.opens-up { top: auto; bottom: calc(100% + 0.25rem); }
/* While Cancel counts down and the box is empty, it stands in for Send (#16781). */
.composer.cancel-replaces-send #send { display: none; }
/* Needs you (#18100): what waits on a person, in the menu, on its page and on the message. */
.badge.is-needs { background: var(--accent); color: var(--white); }
.tag-needs { background: var(--accent); color: var(--white); font-weight: 700; }
.tag-needs.is-resolved { background: var(--pale); color: var(--success); font-weight: 600; }
.message.needs-open { box-shadow: inset 4px 0 0 var(--accent); }
.needs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.needs-item { display: flex; align-items: flex-start; gap: 0.75rem; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 0.55rem 0.8rem; }
.needs-item a { flex: 1; min-width: 0; display: grid; gap: 0.25rem; color: inherit; text-decoration: none; }
.needs-meta { font-size: 0.875rem; color: var(--ink-soft); }
.needs-waited { font-weight: 700; color: var(--accent); }
.needs-excerpt { overflow-wrap: anywhere; }
/* Approvals and the audit log (#18101). */
.approval-actions { display: flex; gap: 0.5rem; margin: 0.4rem 0; }
.tag-needs.is-denied { background: #fbeaea; color: var(--alert); }
.room-audit { border: 1px solid var(--line-light); border-radius: var(--radius); padding: 0.4rem 0.75rem; }
.room-audit summary { cursor: pointer; color: var(--highlight); font-weight: 600; font-size: 0.9375rem; }
.audit-log { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.9375rem; }
.audit-entry { border-bottom: 1px solid var(--line-light); padding-bottom: 0.25rem; overflow-wrap: anywhere; }
.audit-at { color: var(--ink-soft); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.audit-action { font-weight: 600; color: var(--brand); }
.audit-details { color: var(--ink-soft); }
/* The task board (#18102). */
.task-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.task-col h2 { font-size: 1rem; margin: 0 0 0.5rem; }
.task-n { color: var(--ink-soft); font-weight: 400; }
.task-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.task-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.65rem; display: grid; gap: 0.35rem; background: var(--white); }
.task-card.is-stale { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.task-card a { display: grid; gap: 0.2rem; color: inherit; text-decoration: none; }
.task-meta, .task-foot { font-size: 0.8125rem; color: var(--ink-soft); }
.task-text { font-size: 0.9375rem; overflow-wrap: anywhere; }
.task-stale { font-size: 0.8125rem; font-weight: 600; color: var(--accent); }
.badge.is-stale { background: var(--accent); color: var(--white); }
/* Done with evidence, then Accept or Reopen (#18103). */
.claim-evidence { display: inline-flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; }
.claim-evidence a { font-family: var(--mono); font-size: 0.8125rem; }
.claim-tests { color: var(--ink); }
.claim-noevidence { font-style: italic; color: var(--accent); }
.claim-reopened { color: var(--accent); font-weight: 600; }
.claim-accepted { color: var(--success); font-weight: 700; }
/* The room brief and handoff notes (#18105). */
.room-brief { border: 1px solid var(--line-light); border-radius: var(--radius); padding: 0.4rem 0.75rem; }
.room-brief summary { cursor: pointer; color: var(--highlight); font-weight: 600; font-size: 0.9375rem; }
.brief-text { margin: 0.5rem 0; }
.brief-form textarea { width: 100%; font: 400 0.9375rem/1.45 var(--mono); padding: 0.5rem; border: 1px solid var(--ink-soft); border-radius: var(--radius); }
.brief-form .actions { margin-top: 0.4rem; }
.claim-handoff { color: var(--ink); font-style: italic; }
/* Search (#19280). */
.search-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.search-form input, .search-form select { font: inherit; padding: 0.4rem 0.55rem; border: 1px solid var(--ink-soft); border-radius: var(--radius); background: var(--white); }
.search-form input[type=search] { flex: 2 1 14rem; }
.search-form input[type=text] { flex: 1 1 8rem; }
.search-results { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
.search-results a { display: grid; gap: 0.2rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); color: inherit; text-decoration: none; }
.search-results a:hover { border-color: var(--brand); }
.search-meta { font-size: 0.875rem; color: var(--ink-soft); }
.search-excerpt { overflow-wrap: anywhere; }
.search-results mark { background: #fff1a8; color: inherit; padding: 0 0.05em; }
/* Priorities and deadlines (#19281). */
.tag-priority.is-urgent { background: var(--alert); color: var(--white); font-weight: 700; }
.tag-priority.is-later { background: var(--grey-soft); color: var(--ink-soft); }
.tag-due { background: var(--pale); color: var(--brand); }
.tag-due.is-overdue { background: #fbeaea; color: var(--alert); font-weight: 700; }
.task-due.is-overdue { color: var(--alert); font-weight: 700; }
.prio-toggle.is-set { border-color: var(--alert); color: var(--alert); font-weight: 700; }
.composer-actions:has(.cancel-send:not([hidden])) .prio-toggle { display: none; }
/* Off the task list (#20099). */
.task-card { position: relative; }
.task-remove { position: absolute; top: 0.2rem; right: 0.3rem; appearance: none; border: 0; background: none; color: var(--ink-soft); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.task-remove:hover { color: var(--alert); }
.task-card a { padding-right: 1.2rem; }
/* Colours (#21106): scheduling is green, priority orange (button, its panel, what it made). */
.later-toggle { border-color: var(--success); color: var(--success); }
.later-toggle:hover, .later-toggle[aria-expanded="true"] { background: #e8f4eb; }
.later:not(.prio) { background: #eef7f0; border-color: var(--success); }
.scheduled-list li { border-color: var(--success); background: #eef7f0; }
.scheduled-label { color: var(--success); }
.prio-toggle { border-color: var(--accent); color: var(--accent); }
.prio-toggle:hover, .prio-toggle[aria-expanded="true"] { background: #fdf1e8; }
.prio-toggle.is-set { border-color: var(--accent); color: var(--white); background: var(--accent); }
.later.prio { background: #fdf6ef; border-color: var(--accent); }
/* Priority… and Later… float above their buttons (#20174): opening them moves nothing. */
.pop-anchor { position: relative; display: inline-flex; }
.pop-anchor > .later {
	position: absolute; bottom: calc(100% + 0.5rem); right: 0; z-index: 30;
	width: max-content; max-width: min(24rem, calc(100vw - 2rem));
	flex-direction: column; align-items: stretch; gap: 0.4rem;
	box-shadow: 0 6px 18px rgb(0 53 122 / 0.18);
}
.pop-anchor > .later[hidden] { display: none; }
.pop-anchor > .later .hint { max-width: 20rem; }
.composer-actions:has(.cancel-send:not([hidden])) .pop-anchor { display: none; }
/* …anchored to the button row's right edge, not the button's: on a phone a panel as wide as
   the screen would otherwise run off its left side. */
.composer-actions { position: relative; }
.pop-anchor { position: static; }
/* The floating panels on white (#21567): the colour stays on the buttons and borders. */
.pop-anchor > .later, .pop-anchor > .later.prio { background: var(--white); }

/* Tasks: all four columns side by side where the page is wide enough (#22971). */
@media (min-width: 60rem) {
	.task-board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Small screens: the main card runs edge to edge, no margin around it (#23887); its own
   padding stays. */
@media (max-width: 40rem) {
	main, .layout-chat main { padding-inline: 0; }
	main > .card, main > * > .card { border-inline: 0; border-radius: 0; }
}
/* Links in the blue hero bar are white, underlined (#24217): blue on blue failed contrast. */
.hero a, .hero a:visited { color: var(--white); text-decoration: underline; text-underline-offset: 0.15em; }
.hero a:hover, .hero a:focus-visible { color: var(--white); text-decoration-thickness: 2px; }
/* With extra context (#24692): a green pen beside an answer; "Your own answer…" on multiple choice. */
.option-pair { display: inline-flex; align-items: stretch; gap: 0; }
.option-pair .option-md { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.option-pen {
	appearance: none; cursor: pointer; font: 600 0.9375rem var(--sans);
	padding: 0.3rem 0.55rem; border: 1px solid var(--success); border-radius: var(--radius);
	background: var(--success); color: var(--white);
}
.option-pair .option-pen { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 1px; }
.option-pen:hover, .option-pen:focus-visible { background: #0e5f22; border-color: #0e5f22; }
.option-pen:disabled { opacity: 0.5; cursor: default; }

/* ---- the style guide (#25479): the frame around the samples; the samples use the rules above ---- */

.sg section { margin-top: 2.25rem; }
.sg section:first-of-type { margin-top: 0; }
.sg h2 { font-size: 1.375rem; margin-bottom: 0.75rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--line-light); }
.sg h3 { font-size: 1.0625rem; margin: 1.25rem 0 0.5rem; }
.sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.sg-note { font-size: 0.9375rem; color: var(--ink-soft); margin: 0.5rem 0 0; }
.sg-swatches { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
.sg-swatches li { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 0.875rem; }
.sg-swatches span { display: block; height: 3rem; border-bottom: 1px solid var(--line-light); }
.sg-swatches b, .sg-swatches code { display: block; margin: 0.35rem 0.6rem; }
.sg-swatches code { background: none; border: 0; padding: 0; color: var(--ink-soft); }
.sg-type p { margin: 0.25rem 0; }
.sg-hero { margin: 0; }
.sg-hero .hero-inner { padding-block: 1.5rem; }
.sg-demo-card { margin-top: 0; }
.sg-messages { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.sg textarea { width: 100%; min-height: 5rem; font: 400 1.0625rem/1.5 var(--sans); color: var(--ink); padding: 0.6rem 0.7rem;
	border: 1px solid var(--ink-soft); border-radius: var(--radius); }
.sg select { font: 400 1.0625rem var(--sans); color: var(--ink); padding: 0.55rem 0.7rem; border: 1px solid var(--ink-soft);
	border-radius: var(--radius); background: var(--white); }
.sg-c-brand { background: var(--brand); }
.sg-c-brand-hover { background: var(--brand-hover); }
.sg-c-highlight { background: var(--highlight); }
.sg-c-highlight-dark { background: var(--highlight-dark); }
.sg-c-accent { background: var(--accent); }
.sg-c-success { background: var(--success); }
.sg-c-alert { background: var(--alert); }
.sg-c-ink { background: var(--ink); }
.sg-c-ink-soft { background: var(--ink-soft); }
.sg-c-line { background: var(--line); }
.sg-c-line-light { background: var(--line-light); }
.sg-c-pale { background: var(--pale); }
.sg-c-grey-soft { background: var(--grey-soft); }
.sg-t1 { font-size: 2rem; font-weight: 600; line-height: 1.25; }
.sg-t2 { font-size: 1.375rem; font-weight: 600; }
.sg-t3 { font-size: 1.0625rem; font-weight: 600; }
.sg-form { margin-inline: 0; }
.sg-w38 { width: 38%; } .sg-w82 { width: 82%; } .sg-w100 { width: 100%; }