/* ============================================================
   STARS Mail — the application
   styles/app.css

   styles.css puts Elastic's whole palette onto tokens; icons.css replaces
   its glyph font. This file is the product: the shell, the navigation, the
   message list, the reading view, the composer, settings and contacts.

   The rules it follows:
     one accent, two greys, nothing decorative
     surfaces are flat; borders are hairlines; a shadow appears only where
       something genuinely floats (a menu, a dialog, a hovered row)
     type does the work: weight and colour separate sender, subject and
       preview, not boxes

   Order:
     1  tokens          7  reading view       11  menus, dialogs, forms
     2  shell           8  composer           12  states
     3  top bar         9  settings           13  responsive
     4  sidebar        10  contacts
     5  toolbar
     6  message list
   ============================================================ */

/* ---------------------------------------------------------------
   1  tokens
   --------------------------------------------------------------- */
:root {
	--bar-h: 64px;
	--nav-w: 256px;
	--head-h: 48px;
	--row-h: 40px;
	--rail-w: 0px;

	--r-sm: 4px;
	--r-md: 8px;
	--r-lg: 12px;

	--shadow-1: 0 1px 2px rgba(24, 28, 33, .10), 0 1px 3px rgba(24, 28, 33, .06);
	--shadow-2: 0 2px 6px rgba(24, 28, 33, .12), 0 1px 2px rgba(24, 28, 33, .08);
	--shadow-3: 0 8px 24px rgba(24, 28, 33, .16), 0 2px 6px rgba(24, 28, 33, .08);

	--ease: cubic-bezier(.2, 0, 0, 1);
	--fast: .12s;
	--slow: .2s;
}
html.dark-mode {
	--shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
	--shadow-2: 0 2px 6px rgba(0, 0, 0, .55);
	--shadow-3: 0 8px 24px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4);
}

/* ---------------------------------------------------------------
   2  shell
   layout.html opens #layout before the template body, so the product bar
   from menu.html is a grid item inside it and spans every column. No track
   may be intrinsic: a spanning item's size is handed to auto / min-content
   tracks and never to fr ones, which would starve the pane beside the rail.
   --------------------------------------------------------------- */
html:not(.iframe) body:not(.task-login):not(.task-error-login) {
	min-width: 320px;
	background: var(--rc-surface);
}

html:not(.iframe) body:not(.task-login) #layout {
	display: grid;
	grid-template-columns: var(--rail-w) minmax(0, 1fr);
	grid-template-rows: auto minmax(0, 1fr);
	background: var(--rc-surface);
}
html:not(.iframe) body:not(.task-login) #stars-topbar { grid-column: 1 / -1; grid-row: 1; }
html:not(.iframe) body:not(.task-login) #layout-menu { grid-column: 1; grid-row: 2; }
html:not(.iframe) body:not(.task-login) #layout-sidebar,
html:not(.iframe) body:not(.task-login) #layout-list,
html:not(.iframe) body:not(.task-login) #layout-content { grid-column: 2; grid-row: 2; min-width: 0; }

@media screen and (min-width: 481px) and (max-width: 768px) {
	:root { --rail-w: 42px; }
}

@media screen and (min-width: 769px) {
	html:not(.iframe) body:not(.task-login) #layout {
		grid-template-columns: var(--nav-w) minmax(0, 1fr);
		grid-template-rows: auto auto minmax(0, 1fr);
	}
	html:not(.iframe) body:not(.task-login) #layout-menu { grid-column: 1; grid-row: 2; }
	html:not(.iframe) body:not(.task-login) #layout-sidebar { grid-column: 1; grid-row: 3; }

	/* The list and the reading view take the same place: opening a message
	   replaces the list, so the message has the screen to itself. */
	html:not(.iframe) body:not(.task-login) #layout-list,
	html:not(.iframe) body:not(.task-login) #layout-content { grid-column: 2; grid-row: 2 / -1; }
	html:not(.iframe):not(.stars-reading) body:not(.task-login) #layout-content { display: none; }
	html.stars-reading:not(.iframe) body:not(.task-login) #layout-list { display: none; }

	/* settings and contacts keep a middle column of their own */
	html.stars-three:not(.iframe) body:not(.task-login) #layout {
		grid-template-columns: var(--nav-w) var(--mid-w, 288px) minmax(0, 1fr);
	}
	html.stars-three:not(.iframe) body:not(.task-login) #layout-list { grid-column: 2; grid-row: 2 / -1; display: flex; }
	html.stars-three:not(.iframe) body:not(.task-login) #layout-content { grid-column: 3; grid-row: 2 / -1; display: flex; }

	/* templates with no list of their own */
	html.stars-nolist:not(.iframe) body:not(.task-login) #layout-content { grid-column: 2; grid-row: 2 / -1; display: flex; }

	/* the full-page composer, when the docked panel is not available */
	html.stars-compose:not(.iframe) body:not(.task-login) #layout {
		grid-template-columns: var(--nav-w) minmax(0, 1fr) minmax(240px, 300px);
	}
	html.stars-compose:not(.iframe) body:not(.task-login) #layout-content { grid-column: 2; grid-row: 2 / -1; display: flex; }
	html.stars-compose:not(.iframe) body:not(.task-login) #layout-sidebar { grid-column: 3; grid-row: 2 / -1; }

	#layout-sidebar,
	#layout-list,
	#layout-content {
		flex: none !important;
		max-width: none;
		min-width: 0;
		width: auto !important;
	}
	#layout > div > .column-resizer { display: none; }
}

html:not(.iframe) body:not(.task-login) #layout-menu,
html:not(.iframe) body:not(.task-login) #layout-sidebar { border: 0; background: transparent; }

/* The drawer header carries the brand and the close control, and only the
   drawer has room for them: between 481px and 768px #layout-menu is a 42px
   rail, where the wordmark would wrap into the icons. */
html:not(.layout-phone) #layout-menu .popover-header { display: none !important; }
html:not(.iframe) body:not(.task-login) #layout-list,
html:not(.iframe) body:not(.task-login) #layout-content { border: 0; background: var(--rc-surface); }
html:not(.iframe) body:not(.task-login) #layout-content .iframe-wrapper { background: var(--rc-surface); }

/* panel headers carry no fill of their own */
#layout > div > .header,
#layout > div > .footer {
	height: var(--head-h);
	min-height: var(--head-h);
	line-height: normal;
	padding: 0 8px;
	border: 0;
	font-weight: 400;
	align-items: center;
	justify-content: flex-start;
	gap: 2px;
}
#layout > div > .header > .header-title {
	flex: 0 1 auto;
	max-width: 55%;
	margin: 0 0 0 8px;
	text-align: left;
	font-size: 14px;
	font-weight: 500;
	color: var(--rc-text);
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------------------------------------------------------------
   3  top bar
   --------------------------------------------------------------- */
#stars-topbar {
	display: flex;
	align-items: center;
	gap: 8px;
	height: var(--bar-h);
	padding: 0 16px 0 8px;
	background: var(--rc-surface);
	position: relative;
	z-index: 30;
}

#stars-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	margin-right: 8px;
	border-radius: var(--r-md);
	text-decoration: none;
	color: var(--rc-text);
	flex: none;
	white-space: nowrap;
}
#stars-brand:hover { background: var(--rc-hover); }
#stars-brand svg { width: 24px; height: 24px; display: block; color: var(--rc-accent); flex: none; }
.stars-brand-name { font-size: 17px; font-weight: 500; letter-spacing: -.005em; }
.stars-brand-name .tm { font-size: .55em; vertical-align: .6em; opacity: .65; margin-left: 1px; }

/* search: the widest thing in the bar, because it is used most */
#stars-search { flex: 1 1 auto; min-width: 0; display: flex; }
#stars-search .searchbar {
	width: 100%;
	max-width: 720px;
	height: 46px;
	min-height: 46px;
	line-height: normal;
	display: flex;
	align-items: center;
	background: var(--rc-surface-2);
	border: 1px solid transparent;
	border-radius: var(--r-md);
	padding: 0 4px 0 0;
	overflow: visible;
	transition: background var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
		border-color var(--fast) var(--ease);
}
#stars-search .searchbar:hover { background: var(--rc-hover); }
#stars-search .searchbar:focus-within {
	background: var(--rc-surface);
	border-color: var(--rc-line);
	box-shadow: var(--shadow-2);
}
#stars-search .searchbar form { flex: 1; display: flex; align-items: center; min-width: 0; }
#stars-search .searchbar form:before {
	--icon: 20px;
	color: var(--rc-text-2);
	margin: 0 8px 0 14px;
	flex: none;
}
#stars-search .searchbar input {
	flex: 1;
	min-width: 0;
	height: 44px;
	border: 0;
	background: none;
	outline: 0;
	font-size: 15px;
	color: var(--rc-text);
	padding: 0 8px 0 0;
}
#stars-search .searchbar input::placeholder { color: var(--rc-text-2); opacity: 1; }
#stars-search .searchbar a {
	--icon: 20px;
	flex: none;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--rc-text-2);
}
#stars-search .searchbar a:before { margin: 0; }
#stars-search .searchbar a .inner { display: none; }
#stars-search .searchbar a:hover { background: var(--rc-hover); color: var(--rc-text); }
#stars-search .searchbar a.selected { color: var(--rc-accent); }
#stars-search .searchbar a.reset,
#stars-search .searchbar a.search { display: none; }
#stars-search .searchbar.active a.reset { display: inline-flex; }
#stars-search .searchbar.active { background: var(--rc-surface); border-color: var(--rc-line); }

#stars-topbar-actions { flex: none; display: flex; align-items: center; gap: 2px; }

.stars-topbtn {
	--icon: 20px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: none;
	border-radius: 50%;
	color: var(--rc-text-2);
	cursor: pointer;
	text-decoration: none;
	transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.stars-topbtn:before { margin: 0 !important; float: none !important; }
.stars-topbtn .inner { display: none; }
.stars-topbtn:hover { background: var(--rc-hover); color: var(--rc-text); }

#stars-account-button {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	text-decoration: none;
	margin-left: 4px;
}
#stars-account-button:hover { background: var(--rc-hover); }
.stars-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--rc-accent);
	color: var(--rc-on-accent);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	user-select: none;
	flex: none;
}
.stars-avatar-lg { width: 44px; height: 44px; font-size: 17px; }
/* the sender's mark in the reading view, where there is no contact photo */
html:root .stars-sendermark {
	width: 40px;
	height: 40px;
	font-size: 15px;
	background: var(--rc-surface-2);
	color: var(--rc-text-2);
	font-weight: 500;
	flex: none;
}

#stars-account-menu { min-width: 280px; }
.stars-account-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border-bottom: 1px solid var(--rc-line);
}
.stars-account-card-text { min-width: 0; }
.stars-account-card-name {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--rc-text);
	overflow: hidden;
	text-overflow: ellipsis;
}
.stars-account-card-host { display: block; font-size: 12px; color: var(--rc-text-2); margin-top: 2px; }

/* ---------------------------------------------------------------
   the account menu
   Two panels in one popup: the account and its neighbours, and the
   appearance choice behind them. One row shape throughout, so the
   accounts, the destinations and the theme options all read as one list.
   --------------------------------------------------------------- */
html:root #stars-account-menu.stars-menu {
	width: 320px;
	/* On a small screen ui.js moves the menu inside a .popover it has already
	   sized and placed. 320px is the intent, never the floor — and Elastic's
	   .popupmenu carries min-width: 280px, which would beat max-width. */
	min-width: 0;
	max-width: 100%;
	padding: 0;
	overflow: hidden;
}
.stars-menu-panel { padding: 0 0 6px; }
.stars-menu-group { padding: 6px 0; border-top: 1px solid var(--rc-line-soft); }
.stars-account-list { list-style: none; margin: 0; padding: 8px 0 6px; }
.stars-account-list li { margin: 0; border: 0; }

html:root .stars-menu .stars-menu-item {
	--icon: 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	width: auto;
	max-width: none;
	min-height: 36px;
	margin: 0 6px;
	padding: 6px 10px;
	border: 0;
	border-radius: var(--r-md);
	color: var(--rc-text);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.35;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--fast) var(--ease);
}
html:root .stars-menu .stars-menu-item:before {
	float: none !important;
	margin: 0 !important;
	width: var(--icon) !important;
	height: var(--icon);
	flex: none;
	color: var(--rc-text-2);
}
html:root .stars-menu .stars-menu-item:hover,
html:root .stars-menu .stars-menu-item:focus-visible { background: var(--rc-hover); }
html:root .stars-menu .stars-menu-label { flex: 1 1 auto; min-width: 0; display: block; }
.stars-menu-value {
	flex: none;
	font-size: 12.5px;
	color: var(--rc-text-2);
	padding-left: 8px;
}
.stars-menu-hint { display: block; font-size: 12px; color: var(--rc-text-3); margin-top: 1px; }

/* an account row: mark, address, and a tick on the one in use */
html:root .stars-menu .stars-account { gap: 10px; padding: 7px 10px; }
.stars-avatar-sm { width: 28px; height: 28px; font-size: 11px; flex: none; }
.stars-account-text { flex: 1 1 auto; min-width: 0; }
.stars-account-address {
	display: block;
	font-size: 13.5px;
	color: var(--rc-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.stars-account-name {
	display: block;
	font-size: 12px;
	color: var(--rc-text-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
html:root .stars-menu .stars-account.is-active { cursor: default; background: var(--rc-accent-soft); }
html:root .stars-menu .stars-account.is-active .stars-account-address { font-weight: 500; }
.stars-account-tick { --icon: 16px; flex: none; color: var(--rc-accent); line-height: 0; }
html:root .stars-menu .stars-account.is-busy { opacity: .5; pointer-events: none; }

/* Removing an account: a quiet control that only appears on the row it
   belongs to, so the list stays a list of accounts rather than a row of
   buttons. */
.stars-account-row { display: flex; align-items: center; }
.stars-account-row > .stars-account { flex: 1 1 auto; min-width: 0; margin-right: 0; }
html:root .stars-menu .stars-account-remove {
	--icon: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 30px;
	height: 30px;
	margin-right: 6px;
	border-radius: 50%;
	color: var(--rc-text-3);
	opacity: 0;
	transition: opacity var(--fast) var(--ease), background var(--fast) var(--ease);
}
.stars-account-row:hover .stars-account-remove,
html:root .stars-menu .stars-account-remove:focus-visible { opacity: 1; }
html:root .stars-menu .stars-account-remove:hover { background: var(--rc-hover); color: var(--rc-danger); }
html:root .stars-menu .stars-account-remove.is-busy { opacity: .4; pointer-events: none; }

/* a touch screen has no hover, so the control is simply always there */
@media (hover: none) {
	html:root .stars-menu .stars-account-remove { opacity: 1; }
}

/* the appearance panel */
.stars-menu-head {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	padding: 0 10px;
	border-bottom: 1px solid var(--rc-line-soft);
}
.stars-menu-title { font-size: 13.5px; font-weight: 500; color: var(--rc-text); }
html:root .stars-menu .stars-menu-back {
	--icon: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 50%;
	color: var(--rc-text-2);
}

html:root .stars-menu .stars-menu-back:hover { background: var(--rc-hover); color: var(--rc-text); }
.stars-theme-list { list-style: none; margin: 0; padding: 6px 0; }
.stars-theme-list li { margin: 0; border: 0; }
html:root .stars-menu .theme-option { align-items: flex-start; }
html:root .stars-menu .theme-option:before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	margin-top: 1px !important;
	flex: none;
	border: 2px solid var(--rc-line-strong);
	border-radius: 50%;
	background: transparent;
	box-sizing: border-box;
	transition: border-color var(--fast) var(--ease), border-width var(--fast) var(--ease);
}
html:root .stars-menu .theme-option.is-selected:before {
	border-color: var(--rc-accent);
	border-width: 5px;
}

/* Elastic lays a popup out as a full-height sheet on a phone; the menu is
   already a list, so it only needs room to breathe. */
@media screen and (max-width: 480px) {
	html:root #stars-account-menu.stars-menu { width: auto; }
	html:root .stars-menu .stars-menu-item { min-height: 44px; font-size: 14.5px; }
	html:root .stars-menu .stars-account { padding: 9px 10px; }
}


#stars-topbar a.task-menu-button {
	--icon: 22px;
	flex: none;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--rc-text-2);
}
#stars-topbar a.task-menu-button:before { margin: 0 !important; float: none !important; }
#stars-topbar a.task-menu-button .inner { display: none; }
#stars-topbar a.task-menu-button:hover { background: var(--rc-hover); color: var(--rc-text); }
@media screen and (min-width: 769px) {
	#stars-topbar a.task-menu-button { display: none; }
}

/* ---------------------------------------------------------------
   4  sidebar
   --------------------------------------------------------------- */
@media screen and (min-width: 769px) {
	#layout-menu { width: auto; min-width: 0; padding: 0 8px 8px; overflow: visible; }


	#taskmenu { display: flex; flex-direction: column; gap: 2px; overflow: visible; }
	/* the task switch and the theme button are reached from the product bar
	   and the account menu on a wide screen; they come back in the drawer */
	#layout-menu #taskmenu > a,
	#layout-menu #taskmenu .special-buttons { display: none; }

	/* Compose: the one filled control in the product */
	#taskmenu .action-buttons { display: block; margin: 0 8px 12px; }
	#taskmenu .action-buttons a.compose,
	html:root #taskmenu .action-buttons a.compose {
		--icon: 20px;
		display: inline-flex;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		width: auto;
		max-width: none;
		min-width: 0;
		float: none;
		height: 48px;
		padding: 0 24px 0 20px;
		border: 0;
		border-radius: var(--r-md);
		background: var(--rc-accent);
		color: var(--rc-on-accent);
		font-size: 14px;
		font-weight: 500;
		box-shadow: none;
		transition: background var(--fast) var(--ease), box-shadow var(--slow) var(--ease);
	}
	#taskmenu .action-buttons a.compose:before { margin: 0 !important; float: none !important; }
	#taskmenu .action-buttons a.compose .inner { display: inline; font-size: 100%; padding: 0; }
	#taskmenu .action-buttons a.compose:hover,
	html:root #taskmenu .action-buttons a.compose:hover {
		background: var(--rc-accent-hover);
		color: var(--rc-on-accent);
		box-shadow: var(--shadow-2);
	}
	#taskmenu .action-buttons a.compose:active { box-shadow: none; }

	/* one row shape for tasks, views and folders */
	#taskmenu > a,
	html:root #taskmenu > a,
	#stars-views a,
	html:root .folderlist li > a,
	html:root .listing.folderlist li > a,
	html:root #directorylist li > a,
	html:root #savedsearchlist li > a {
		--icon: 20px;
		display: flex;
		align-items: center;
		gap: 14px;
		width: 100%;
		max-width: none;
		min-width: 0;
		float: none;
		height: 34px;
		padding: 0 12px;
		margin: 0;
		border: 0 !important;
		border-radius: var(--r-md);
		color: var(--rc-text);
		font-size: 13.5px;
		font-weight: 400;
		line-height: normal;
		text-align: left;
		text-decoration: none;
		transition: background var(--fast) var(--ease);
	}
	#taskmenu > a:before,
	#stars-views a:before,
	html:root .folderlist li > a:before,
	html:root #directorylist li > a:before,
	html:root #savedsearchlist li > a:before {
		float: none !important;
		margin: 0 !important;
		width: var(--icon) !important;
		height: var(--icon);
		flex: none;
		color: var(--rc-text-2);
	}
	#taskmenu > a .inner,
	#stars-views a .inner { display: inline; font-size: 100%; padding: 0; }

	#taskmenu > a:hover,
	html:root #taskmenu > a:hover,
	#stars-views a:hover,
	html:root .folderlist li > a:hover,
	html:root #directorylist li > a:hover,
	html:root #savedsearchlist li > a:hover { background: var(--rc-hover); }

	#taskmenu > a.selected,
	html:root #taskmenu > a.selected,
	#stars-views a.selected,
	html:root .folderlist li.selected > a,
	html:root .listing li.selected > a,
	html:root .listing li.selected > div > a {
		background: var(--rc-accent-soft);
		color: var(--rc-text);
		font-weight: 600;
	}
	html:root .folderlist li.selected > a:before,
	html:root #directorylist li.selected > a:before,
	#taskmenu > a.selected:before,
	#stars-views a.selected:before { color: var(--rc-accent); }
}

#folderlist-content { padding: 0 8px 16px; }
html:root .folderlist li { border: 0; }
html:root .listing li.selected ul { background: transparent; }
html:root .folderlist ul { margin-left: 14px; padding: 0; border: 0; }

/* unread count: a number, not a badge */
html:root .folderlist li.mailbox .unreadcount,
html:root .folderlist li.mailbox.recent > a > .unreadcount {
	background: transparent;
	color: var(--rc-text-2);
	font-size: 12px;
	font-weight: 500;
	line-height: normal;
	padding: 0;
	min-width: auto;
	margin-left: auto;
	border-radius: 0;
}
html:root .folderlist li.unread > a { font-weight: 600; }
html:root .folderlist li.unread > a .unreadcount { color: var(--rc-text); }
html:root .folderlist li.selected > a .unreadcount { color: var(--rc-accent); }

.stars-navlabel {
	display: block;
	padding: 18px 12px 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--rc-text-2);
}
/* #stars-views sits inside #folderlist-content, which already pads. */
#stars-views { padding: 0; margin: 0; list-style: none; }
#stars-views li { margin: 0; border: 0; }

#layout-sidebar > .header { display: none; }
#layout-sidebar > .footer {
	border-top: 1px solid var(--rc-line);
	padding: 0 20px !important;
	height: 40px;
	min-height: 40px;
}
.quota-widget { --icon: 16px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--rc-text-2); }
.quota-widget:before { color: var(--rc-text-3); }

/* ---------------------------------------------------------------
   5  toolbar over the list
   --------------------------------------------------------------- */
#messagelist-header {
	position: relative;
	padding: 0 8px !important;
	border-bottom: 1px solid var(--rc-line) !important;
	gap: 2px;
}
.stars-listbar-wrap { display: contents; }
#stars-listbar {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 1;
	min-width: 0;
	height: var(--head-h);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
}
#stars-listbar > li { display: flex; align-items: center; border: 0; }
@media screen and (min-width: 769px) {
	html:not(.stars-three) #stars-listbar { padding-right: 230px; }
}
.stars-listbar-spacer { flex: 1 1 auto; }

/* the icon button every toolbar in the product uses */
#stars-listbar a,
html:root #stars-listbar a,
#layout .header .toolbar a {
	--icon: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-width: 36px;
	max-width: none;
	float: none;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: var(--rc-text-2);
	transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
		opacity var(--fast) var(--ease);
}
#stars-listbar a:before,
#layout .header .toolbar a:before {
	float: none;
	margin: 0;
	width: var(--icon);
	height: var(--icon);
	line-height: 1;
}
#stars-listbar a .inner,
#layout .header .toolbar a .inner { display: none !important; }
#stars-listbar a:not(.disabled):hover,
html:root #stars-listbar a:not(.disabled):hover,
#layout .header .toolbar a:not(.disabled):hover { background: var(--rc-hover); color: var(--rc-text); }
#stars-listbar a.disabled,
#layout .header .toolbar a.disabled { opacity: .38; pointer-events: none; }
#layout .header .toolbar .spacer { flex: 1 1 auto; }
#layout > div > .header > .toolbar { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }

/* select-all keeps a real control in the markup */
.stars-selectgroup { display: inline-flex; align-items: center; }
#stars-listbar #stars-selectall,
html:root #stars-listbar #stars-selectall { width: 36px; min-width: 36px; }
#stars-listbar #stars-selectall:before { content: none; display: none; }
#stars-listbar #stars-selectall .stars-box {
	position: relative;
	display: block;
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	border: 2px solid var(--rc-text-3);
	border-radius: var(--r-sm);
	background: transparent;
	transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
#stars-listbar #stars-selectall:hover .stars-box { border-color: var(--rc-text); }
#stars-listbar #stars-selectall[aria-checked="true"] .stars-box,
#stars-listbar #stars-selectall[aria-checked="mixed"] .stars-box {
	background: var(--rc-accent);
	border-color: var(--rc-accent);
}
#stars-listbar #stars-selectall[aria-checked="true"] .stars-box:after {
	content: "";
	position: absolute;
	left: 4.5px;
	top: 1px;
	width: 5px;
	height: 9px;
	box-sizing: border-box;
	border: solid var(--rc-on-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
#stars-listbar #stars-selectall[aria-checked="mixed"] .stars-box:after {
	content: "";
	position: absolute;
	left: 2.5px;
	top: 6px;
	width: 9px;
	height: 0;
	border-top: 2px solid var(--rc-on-accent);
}
#stars-listbar .stars-selectcaret,
html:root #stars-listbar .stars-selectcaret { --icon: 16px; width: 22px; min-width: 22px; }

/* actions that exist only while something is selected */
.stars-bulk {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: none;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-width var(--slow) var(--ease), opacity var(--fast) var(--ease);
}
.stars-bulk > a { flex: none; }
html.stars-has-selection .stars-bulk { max-width: 480px; opacity: 1; }
.stars-bulk:before {
	content: "";
	flex: none;
	width: 1px;
	height: 20px;
	margin: 0 8px 0 4px;
	background: var(--rc-line);
}
.stars-bulk-count {
	flex: none;
	font-size: 13px;
	color: var(--rc-text-2);
	white-space: nowrap;
	padding: 0 10px 0 2px;
}

/* the count and page navigation sit at the far end of the toolbar */
@media screen and (min-width: 769px) {
	html:not(.stars-three) #layout-list > .pagenav {
		position: absolute;
		top: 0;
		right: 8px;
		height: var(--head-h);
		width: auto;
		border: 0 !important;
		background: transparent;
		z-index: 2;
	}
}
html:root .menu.pagenav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 2px;
	padding: 0 8px !important;
	border-top: 1px solid var(--rc-line);
}
html:root .menu.pagenav .pagenav-text {
	font-size: 12px;
	color: var(--rc-text-2);
	flex: 0 1 auto;
	text-align: right;
	padding-right: 8px;
	white-space: nowrap;
}
html:root .menu.pagenav a {
	--icon: 18px;
	flex: none;
	width: 32px;
	min-width: 32px !important;
	height: 32px;
	border-radius: 50%;
	color: var(--rc-text-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
html:root .menu.pagenav a:before { line-height: 1; margin: 0; }
html:root .menu.pagenav a.disabled { opacity: .3; }
html:root .menu.pagenav a:not(.disabled):hover { background: var(--rc-hover); color: var(--rc-text); }
html:root .menu.pagenav input,
html:root .menu.pagenav a.firstpage,
html:root .menu.pagenav a.lastpage { display: none; }

/* ---------------------------------------------------------------
   6  message list
   --------------------------------------------------------------- */
#messagelist-content { padding: 0; }
.messagelist { border-collapse: collapse; }
html:root .messagelist tbody td { border: 0; padding: 0; }

.messagelist tbody tr {
	display: flex;
	align-items: center;
	position: relative;
	height: var(--row-h);
	min-height: var(--row-h);
	padding: 0 8px 0 0;
	background: var(--rc-surface-2);
	box-shadow: inset 0 -1px 0 var(--rc-line-soft);
	cursor: pointer;
	transition: background var(--fast) var(--ease);
}
html:root .messagelist tbody tr.unread { background: var(--rc-surface); }
html:root .messagelist tbody tr:hover {
	background: var(--rc-surface);
	box-shadow: inset 0 -1px 0 var(--rc-line-soft), var(--shadow-2);
	z-index: 1;
}
html:root .messagelist tbody tr.focused { background: var(--rc-surface); }
html:root .messagelist tbody tr.selected,
html:root .listing tr.selected td {
	background: var(--rc-accent-soft);
	color: var(--rc-text);
}

/* cells are placed by order, not by document position */
.messagelist td.selection {
	order: 1;
	flex: none;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	padding: 0 !important;
}
.messagelist td.selection input[type="checkbox"] {
	position: relative;
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	margin: 0;
	box-sizing: border-box;
	border: 2px solid var(--rc-text-3);
	border-radius: var(--r-sm);
	background: transparent;
	cursor: pointer;
	transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.messagelist td.selection input[type="checkbox"]:hover { border-color: var(--rc-text); }
.messagelist td.selection input[type="checkbox"]:checked {
	background: var(--rc-accent);
	border-color: var(--rc-accent);
}
.messagelist td.selection input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 4.5px;
	top: 1px;
	width: 5px;
	height: 9px;
	box-sizing: border-box;
	border: solid var(--rc-on-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* the flags cell dissolves so the star sits second and the clip last */
.messagelist td.flags { display: contents; }
.messagelist td.flags > span.flag {
	order: 2;
	flex: none;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	cursor: pointer;
	align-self: center;
}
.messagelist td.flags > span.flag:hover { background: var(--rc-hover); }
.messagelist td.flags > span.flag > span { --icon: 18px; display: block; line-height: 0; }
.messagelist td.flags > span.flag > span:before { margin: 0; width: var(--icon); height: var(--icon); }
html:root .messagelist tr span.unflagged:before { color: var(--rc-text-3); opacity: .5; }
html:root .messagelist tr span.unflagged:hover:before { opacity: 1; color: var(--rc-text-2); }
html:root .messagelist tr span.flagged:before { color: var(--rc-star); opacity: 1; }

.messagelist td.flags > span.attachment {
	order: 8;
	flex: none;
	--icon: 16px;
	width: 22px;
	display: flex;
	justify-content: center;
	color: var(--rc-text-3);
	align-self: center;
}
.messagelist td.flags > span.attachment > span:before { margin: 0; }
.messagelist td.threads { order: 3; flex: none; width: 20px; align-self: center; }
.messagelist td.threads div:before { --icon: 16px; color: var(--rc-text-3); }

/* sender, subject, preview */
.messagelist td.subject {
	order: 4;
	flex: 1 1 auto;
	width: auto !important;
	min-width: 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	padding: 0 !important;
	overflow: hidden;
}
.messagelist td.subject span { line-height: normal; width: auto; }
.messagelist td.subject span.fromto {
	order: 1;
	flex: none;
	width: 200px;
	padding: 0 16px 0 4px;
	font-size: 13.5px;
	color: var(--rc-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.messagelist td.subject span.subject {
	order: 2;
	flex: 0 1 auto;
	width: auto;
	min-width: 0;
	max-width: 50%;
	display: flex;
	align-items: center;
	font-size: 13.5px;
	color: var(--rc-text);
	overflow: hidden;
	white-space: nowrap;
}
.messagelist td.subject span.subject > a {
	flex: 1 1 auto;
	min-width: 0;
	color: inherit;
	text-decoration: none;
	overflow: hidden;
}
.messagelist td.subject span.subject > a > span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.messagelist td.subject span.stars-snippet {
	order: 3;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13.5px;
	font-weight: 400;
	color: var(--rc-text-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.messagelist td.subject span.stars-snippet:before { content: "\2013"; margin: 0 7px; color: var(--rc-text-3); }
.messagelist td.subject span.date {
	order: 9;
	flex: none;
	margin-left: auto;
	padding-left: 12px;
	font-size: 12px;
	color: var(--rc-text-2);
	white-space: nowrap;
}
.messagelist td.subject span.size { display: none; }
.messagelist.sort-size td.subject span.size {
	display: inline;
	order: 9;
	margin-left: auto;
	padding-left: 12px;
	font-size: 12px;
	color: var(--rc-text-2);
}
.messagelist.sort-size td.subject span.date { display: none; }

/* unread carries weight, so the status dot is redundant beside it */
.messagelist td.subject span.msgicon.status { display: none; }
.messagelist td.subject span.msgicon.status.replied,
.messagelist td.subject span.msgicon.status.forwarded {
	display: block;
	--icon: 15px;
	flex: none;
	width: 15px;
	margin-right: 8px;
	color: var(--rc-text-3);
}
.messagelist td.subject span.msgicon.status.replied:before,
.messagelist td.subject span.msgicon.status.forwarded:before { margin: 0; }

html:root .messagelist tr.unread td.subject span.fromto,
html:root .messagelist tr.unread td.subject span.subject,
html:root .messagelist tr.unread td.subject span.subject a { font-weight: 700; color: var(--rc-text); }
html:root .messagelist tr.unread td.subject span.date { color: var(--rc-text); font-weight: 600; }
html:root .messagelist tr:not(.unread) td.subject span.fromto { font-weight: 400; color: var(--rc-text-2); }
html:root .messagelist tr:not(.unread) td.subject span.subject,
html:root .messagelist tr:not(.unread) td.subject span.subject a { font-weight: 400; color: var(--rc-text); }
html:root .messagelist tr.deleted td.subject span.subject,
html:root .messagelist tr.deleted td.subject span.fromto { text-decoration: line-through; opacity: .6; }
html:root .messagelist tr.flagged:not(.deleted) td,
html:root .messagelist tr.flagged:not(.deleted) td.subject span.date,
html:root .messagelist tr.flagged:not(.deleted) td.subject span.fromto,
html:root .messagelist tr.flagged:not(.deleted) td.subject span.subject a { color: inherit; }

/* hover actions sit where the timestamp was */
html:root .listing-hover-menu {
	right: 4px;
	height: auto;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	display: flex;
	align-items: center;
	gap: 2px;
}
html:root .listing-hover-menu span.txt { display: none; }
html:root .listing-hover-menu a.button {
	--icon: 18px;
	width: 32px;
	height: 32px;
	margin: 0;
	border-radius: 50%;
	color: var(--rc-text-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
html:root .listing-hover-menu a.button:before { margin: 0; width: var(--icon); height: var(--icon); }
html:root .listing-hover-menu a.button:hover { background: var(--rc-hover); color: var(--rc-text); }

/* ---------------------------------------------------------------
   7  reading view
   --------------------------------------------------------------- */
#layout-content > .header {
	border-bottom: 1px solid var(--rc-line);
	padding: 0 8px !important;
}
html.stars-reading #layout-content > .header a.back-list-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	--icon: 20px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--rc-text-2);
	flex: none;
}
html.stars-reading #layout-content > .header a.back-list-button:hover { background: var(--rc-hover); color: var(--rc-text); }
html.stars-reading #layout-content > .header a.back-list-button:before { margin: 0 !important; float: none !important; }
html.stars-reading #layout-content > .header a.back-list-button .inner { display: none; }

#mailtoolbar,
#toolbar-menu { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }

/* the message document (this file loads inside the preview frame too) */
html.iframe body.task-mail { background: var(--rc-surface); }
#message-header { padding: 24px 40px 16px; border: 0; }
#message-header > .subject,
#message-header h2.subject {
	font-size: 22px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--rc-text);
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
#message-header > .header { display: flex; gap: 16px; align-items: flex-start; padding: 0; border: 0; height: auto; }
#message-header .contactphoto,
#message-header > .header > .contactphoto {
	width: 40px;
	height: 40px;
	min-width: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--rc-accent-soft);
	flex: none;
}
#message-header .header-content { flex: 1; min-width: 0; }
#message-header .header-summary,
#message-header .header-headers { font-size: 13px; line-height: 1.55; color: var(--rc-text-2); }
#message-header .header-summary span.from,
#message-header .header-headers td.header-from { color: var(--rc-text); font-weight: 600; font-size: 14px; }
#message-header .header-headers .header-title { color: var(--rc-text-3); font-weight: 400; }
#message-header .date { font-size: 12.5px; color: var(--rc-text-2); }
#message-header .header-links { margin-top: 8px; display: flex; gap: 16px; flex-wrap: wrap; }
#message-header .header-links a {
	--icon: 15px;
	font-size: 12.5px;
	color: var(--rc-text-2);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
#message-header .header-links a:before { margin: 0; }
#message-header .header-links a:hover { color: var(--rc-accent); }

#message-content { display: flex; flex-direction: column; padding: 0; }
#message-content .rightcol { order: 1; padding: 8px 40px 24px; }
#message-content .leftcol { order: 2; padding: 0 40px; }
#message-content .stars-replybar { order: 3; }
#messagebody { font-size: 14px; line-height: 1.62; color: var(--rc-text); max-width: 100%; }
#messagebody .message-part,
#messagebody .message-htmlpart { border: 0; padding: 0; }
/* Roundcube emits plain text as <div class="pre"> with <br> line breaks;
   pre-wrap on the part around it would double every break */
#messagebody div.pre {
	font-family: inherit;
	font-size: 14px;
}
#messagebody a { color: var(--rc-accent); }
#messagebody blockquote {
	background: transparent;
	border: 0;
	border-left: 2px solid var(--rc-line-strong);
	color: var(--rc-text-2);
	margin: 12px 0;
	padding: 2px 0 2px 16px;
}
#messagebody .message-htmlpart,
#messagebody .message-part { color: var(--rc-text); }

html:root .attachmentslist,
html:root #attachment-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 16px 0 0;
	margin: 0;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--rc-line);
}
html:root .attachmentslist li {
	--icon: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
	background: transparent;
	border: 1px solid var(--rc-line);
	border-radius: var(--r-md);
	padding: 8px 12px;
	max-width: 300px;
	transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
html:root .attachmentslist li:hover { background: var(--rc-surface-2); border-color: var(--rc-line-strong); }
html:root .attachmentslist li:before { color: var(--rc-text-2); flex: none; }
html:root .attachmentslist li a {
	color: var(--rc-text);
	font-size: 13px;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
html:root .attachmentslist li .attachment-size { font-size: 12px; color: var(--rc-text-3); flex: none; }

.stars-replybar { display: flex; gap: 12px; flex-wrap: wrap; padding: 20px 40px 40px; }
.stars-replybar button {
	--icon: 18px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 36px;
	padding: 0 20px;
	border-radius: var(--r-md);
	border: 1px solid var(--rc-line-strong);
	background: transparent;
	color: var(--rc-text);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
	transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.stars-replybar button:hover { background: var(--rc-surface-2); border-color: var(--rc-text-3); }
.stars-replybar .stars-ico { width: var(--icon); height: var(--icon); display: block; }

/* ---------------------------------------------------------------
   8  composer
   --------------------------------------------------------------- */
#stars-composers {
	position: fixed;
	right: 24px;
	bottom: 0;
	z-index: 1200;
	display: flex;
	align-items: flex-end;
	gap: 16px;
	pointer-events: none;
}
.stars-composer {
	pointer-events: auto;
	width: min(600px, calc(100vw - 48px));
	height: min(560px, calc(100vh - 96px));
	display: flex;
	flex-direction: column;
	background: var(--rc-surface);
	border: 1px solid var(--rc-line);
	border-bottom: 0;
	border-radius: var(--r-md) var(--r-md) 0 0;
	box-shadow: var(--shadow-3);
	overflow: hidden;
	transition: height var(--slow) var(--ease), width var(--slow) var(--ease);
}
.stars-composer.is-closing { opacity: 0; transition: opacity var(--fast) var(--ease); }
.stars-composer[data-state="min"] { height: 44px; width: 300px; }
.stars-composer[data-state="min"] .stars-composer-frame { visibility: hidden; }
.stars-composer[data-state="max"] {
	position: fixed;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: min(1000px, calc(100vw - 64px));
	height: calc(100vh - 48px);
}
.stars-composer-bar {
	flex: none;
	display: flex;
	align-items: center;
	gap: 2px;
	height: 44px;
	padding: 0 6px 0 16px;
	background: var(--rc-surface-2);
	border-bottom: 1px solid var(--rc-line);
	user-select: none;
}
.stars-composer-title {
	flex: 1;
	min-width: 0;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--rc-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.stars-composer-btn {
	--icon: 18px;
	flex: none;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--rc-text-2);
	border-radius: 50%;
	cursor: pointer;
	transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.stars-composer-btn:hover { background: var(--rc-hover); color: var(--rc-text); }
.stars-composer-frame { flex: 1; width: 100%; border: 0; background: var(--rc-surface); min-height: 0; }

html.stars-docked #layout > div > .header a.task-menu-button,
html.stars-docked #layout > div > .header .header-title { display: none !important; }
html.stars-docked #layout-content > .header { border-bottom: 1px solid var(--rc-line); }
/* Elastic clones the toolbar into a bottom bar on small screens; in the panel
   the real Send button is right there, so the clone is only noise */
html.stars-docked .content-frame-navigation { display: none !important; }
/* the attachment list belongs under the message, not in the column Elastic
   collapses at this width */
html.stars-docked #compose-attachments {
	padding: 12px 20px 0;
	border-top: 1px solid var(--rc-line-soft);
}
html.stars-docked #compose-attachments .upload-form { display: none; }
html.stars-docked #compose-attachments .attachmentslist:empty { display: none; }

#compose-content { padding: 0; }
#compose-headers { padding: 12px 20px 0; }
.compose-headers .form-group.row {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 8px;
	margin: 0;
	padding: 2px 0;
	min-height: 40px;
	border-bottom: 1px solid var(--rc-line-soft);
}
.compose-headers .col-form-label,
.compose-headers label.col-2 {
	flex: 0 0 auto;
	width: 56px;
	max-width: 56px;
	padding: 0;
	font-size: 13px;
	font-weight: 400;
	color: var(--rc-text-2);
	align-self: center;
}
.compose-headers .col-10 { flex: 1 1 auto; min-width: 0; padding: 0; max-width: none; }
.compose-headers .input-group { display: flex; align-items: center; flex-wrap: nowrap; width: 100%; border: 0; }
.compose-headers .input-group > .recipient-input,
.compose-headers .input-group > .form-control,
.compose-headers .input-group > select { flex: 1 1 auto; min-width: 0; }
.compose-headers .form-control,
.compose-headers .recipient-input,
.compose-headers input,
.compose-headers select {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	font-size: 14px;
	color: var(--rc-text);
	padding: 6px 0;
	min-height: 0;
}
.compose-headers .input-group-append { flex: none; display: flex; }
.compose-headers .input-group-append .input-group-text {
	--icon: 18px;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--rc-text-2);
}
.compose-headers .input-group-append .input-group-text:before { margin: 0; float: none; }
.compose-headers .input-group-append .inner { display: none; }
.compose-headers .input-group-append .input-group-text:hover { background: var(--rc-hover); color: var(--rc-text); }
#compose-subject { font-weight: 500; }

html:root .recipient-input {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	min-height: 36px;
	padding: 0;
	background: transparent;
}
html:root .recipient-input ul.tagedit-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
html:root .recipient-input li.recipient {
	--icon: 14px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--rc-surface-2);
	border: 1px solid var(--rc-line);
	border-radius: var(--r-md);
	padding: 2px 4px 2px 10px;
	margin: 3px 6px 3px 0;
	font-size: 13px;
	color: var(--rc-text);
}
html:root .recipient-input li.recipient a.button.icon.remove { color: var(--rc-text-3); }
html:root .recipient-input li.recipient a.button.icon.remove:hover { color: var(--rc-danger); }
html:root .recipient-input > input,
html:root .recipient-input input[type="text"] {
	flex: 1 1 8ch;
	min-width: 8ch;
	background: transparent;
	border: 0;
	outline: 0;
	color: var(--rc-text);
	font-size: 14px;
	padding: 6px 0;
}

#composebodycontainer { padding: 8px 20px 0; }
html:root #composebody,
html:root textarea#composebody {
	background: transparent;
	border: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--rc-text);
	padding: 8px 0;
}
html:root div.tox.tox-tinymce { border: 0 !important; }
html:root div.tox .tox-toolbar,
html:root div.tox .tox-toolbar__primary {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--rc-line) !important;
	border-radius: 0;
	padding: 2px 0;
}
html:root div.tox .tox-toolbar__group { border: 0 !important; padding: 0 4px; }
html:root div.tox .tox-tbtn { color: var(--rc-text-2) !important; }
html:root div.tox .tox-tbtn:hover { background: var(--rc-hover) !important; color: var(--rc-text) !important; }
html:root div.tox .tox-tbtn svg { fill: currentColor !important; }

a.stars-compose-back { display: none !important; }

#compose-content > .formbuttons {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	background: var(--rc-surface);
	border-top: 1px solid var(--rc-line);
}
#compose-content > .formbuttons .btn.send,
html:root #compose-content > .formbuttons .btn-primary.send {
	--icon: 18px;
	background: var(--rc-accent);
	border: 0;
	color: var(--rc-on-accent);
	border-radius: var(--r-md);
	height: 40px;
	padding: 0 26px;
	font-weight: 500;
	font-size: 14px;
	box-shadow: none;
}
#compose-content > .formbuttons .btn.send:hover { background: var(--rc-accent-hover); box-shadow: var(--shadow-2); }
#compose-content > .formbuttons .btn.send:disabled,
#compose-content > .formbuttons .btn.send.disabled { opacity: .45; box-shadow: none; }

html.stars-compose #layout-sidebar { border-left: 1px solid var(--rc-line); background: var(--rc-surface); }
#compose-attachments { padding: 16px; }
html:root #compose-attachments .btn.attach,
html:root .btn-secondary {
	background: transparent;
	border: 1px solid var(--rc-line-strong);
	color: var(--rc-text);
	border-radius: var(--r-md);
	height: 40px;
	font-size: 13.5px;
	font-weight: 500;
}
html:root #compose-attachments .btn.attach:hover { background: var(--rc-surface-2); }
#compose-options { padding: 0 16px 20px; }
#compose-options .form-group.row { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
#compose-options .col-form-label { font-size: 13px; color: var(--rc-text-2); padding: 0; }

/* ---------------------------------------------------------------
   9  settings
   --------------------------------------------------------------- */
body.task-settings { --mid-w: 288px; }
#settings-menu { padding: 8px; margin: 0; }
html:root #settings-menu li { border: 0; }
html:root #settings-menu li a {
	--icon: 20px;
	display: flex;
	align-items: center;
	gap: 14px;
	height: 34px;
	padding: 0 12px;
	border: 0;
	border-radius: var(--r-md);
	font-size: 13.5px;
	color: var(--rc-text);
}
html:root #settings-menu li a:before {
	float: none;
	margin: 0;
	width: var(--icon);
	height: var(--icon);
	color: var(--rc-text-2);
}
html:root #settings-menu li a:hover { background: var(--rc-hover); }
html:root #settings-menu li.selected a { background: var(--rc-accent-soft); font-weight: 600; }
html:root #settings-menu li.selected a:before { color: var(--rc-accent); }

body.task-settings #layout-list > .header { border-bottom: 1px solid var(--rc-line) !important; }
#sections-table { padding: 8px; }
html:root #sections-table tr { border: 0; cursor: pointer; }
html:root #sections-table td {
	--icon: 20px;
	display: flex;
	align-items: center;
	gap: 14px;
	height: 38px;
	padding: 0 12px;
	border: 0;
	border-radius: var(--r-md);
	font-size: 13.5px;
	color: var(--rc-text);
}
html:root #sections-table td:before { margin: 0; width: var(--icon); height: var(--icon); color: var(--rc-text-2); }
html:root #sections-table tr:hover td { background: var(--rc-hover); }
html:root #sections-table tr.selected td { background: var(--rc-accent-soft); font-weight: 600; }

body.task-settings .formcontainer,
body.task-settings .content.boxcontent { max-width: 740px; padding: 24px 32px 40px; }
body.task-settings fieldset { margin-bottom: 28px; }
html:root fieldset legend,
html:root .propform legend,
html:root .boxtitle {
	display: block;
	width: 100%;
	font-size: 13px;
	font-weight: 600;
	color: var(--rc-text);
	padding-bottom: 8px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--rc-line);
	text-transform: none;
	letter-spacing: 0;
}
html:root .propform .form-group.row,
html:root .formcontent .form-group.row { margin-bottom: 14px; align-items: center; }
html:root .col-form-label { font-size: 13.5px; color: var(--rc-text-2); font-weight: 400; }
html:root .propform .form-group.row > [class^="col-"],
html:root .formcontent .form-group.row > [class^="col-"] { max-width: 380px; }
html:root .propform .form-group.row > label[class^="col-"],
html:root .formcontent .form-group.row > label[class^="col-"] { max-width: 300px; }
body.task-settings .formbuttons { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--rc-line); }

/* ---------------------------------------------------------------
   10  contacts

   Three columns: the address books and groups on the rail, the people in
   the middle, the person on the right. The rail rows are the folder rows
   from section 4; what is left here is the panel around them.
   --------------------------------------------------------------- */
body.task-addressbook { --mid-w: 320px; }

/* The rail's own header carries the group actions, so it stays; it is
   dressed as the quiet section label the folder list uses in mail.
   ui.js writes the title's margins inline, hence the !important. */
body.task-addressbook #layout-sidebar > .header {
	height: auto;
	min-height: 0;
	padding: 18px 20px 6px;
	border: 0;
	gap: 6px;
}
body.task-addressbook #layout-sidebar > .header > .header-title {
	flex: 1 1 auto;
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 12px;
	font-weight: 500;
	color: var(--rc-text-2);
}
body.task-addressbook #layout-sidebar > .header > a.sidebar-menu {
	--icon: 18px;
	flex: none;
	color: var(--rc-text-3);
}
body.task-addressbook #layout-sidebar > .header > a.sidebar-menu:hover { color: var(--rc-text); }
#directorylist,
#savedsearchlist { padding: 0 8px; margin: 0; }
html:root #directorylist li,
html:root #savedsearchlist li { border: 0; }
html:root #directorylist ul.groups { margin-left: 14px; padding: 0; border: 0; }
html:root #directorylist li.readonly > a { color: var(--rc-text-2); }

/* the middle column, and the hairline that ends it */
@media screen and (min-width: 769px) {
	html:not(.iframe) body.task-addressbook #layout-list,
	html:not(.iframe) body.task-settings #layout-list { border-right: 1px solid var(--rc-line); }

	/* Elastic hides the list title on wide screens because in mail the folder
	   name is already on the rail. Here it says which address book, group or
	   search the column is showing, so it comes back. */
	/* ui.js centres a header title by writing margins inline, so the offset
	   it computes has to be overruled rather than replaced. */
	html:root body.task-addressbook #layout-list > .header > .header-title {
		display: block;
		flex: 0 1 auto;
		margin: 0 0 0 12px !important;
		padding: 0 !important;
		text-align: left;
	}
	html:root body.task-addressbook #layout-list > .header > .toolbar { margin-left: auto; }
}
body.task-addressbook #layout-list > .header { border-bottom: 1px solid var(--rc-line); }
body.task-addressbook #layout-list > .scroller:not(.searchoptions) {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
}

/* the people */
html:root .contactlist tr { border: 0; box-shadow: inset 0 -1px 0 var(--rc-line-soft); }
html:root .contactlist tr td {
	--icon: 20px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	font-size: 13.5px;
}
html:root .contactlist tr td:before { color: var(--rc-text-3); flex: none; }
html:root .contactlist tr:hover td { background: var(--rc-hover); }
html:root .contactlist tr.selected td { background: var(--rc-accent-soft); }
html:root .contactlist span.name { font-weight: 500; color: var(--rc-text); }
html:root .contactlist span.email { font-size: 12.5px; color: var(--rc-text-2); }

/* the person */
body.task-addressbook #layout-content > .header { border-bottom: 1px solid var(--rc-line); }
body.task-addressbook .frame-content { padding: 24px 32px 40px; }
#contacthead { padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid var(--rc-line); }
#contacthead .names .namefield { display: block; font-size: 20px; font-weight: 500; color: var(--rc-text); }
#contacthead .jobfield,
#contacthead .source.row { font-size: 13px; color: var(--rc-text-2); margin-top: 4px; }
body.task-addressbook fieldset { margin-bottom: 24px; max-width: 620px; }

/* New contact reads as an action, not one more glyph in a row of glyphs */
@media screen and (min-width: 769px) {
	html:root body.task-addressbook #toolbar-menu a.create {
		--icon: 18px;
		gap: 8px;
		width: auto;
		max-width: none;
		height: 34px;
		padding: 0 14px 0 12px;
		border: 1px solid var(--rc-line-strong);
		border-radius: var(--r-md);
		color: var(--rc-text);
		font-size: 13.5px;
		font-weight: 500;
	}
	html:root body.task-addressbook #toolbar-menu a.create .inner {
		display: inline !important;
		font-size: 100%;
		padding: 0;
		text-transform: none;
	}
	html:root body.task-addressbook #toolbar-menu a.create:before { margin: 0 !important; float: none !important; }
	html:root body.task-addressbook #toolbar-menu a.create:hover { background: var(--rc-hover); }
	html:root body.task-addressbook #toolbar-menu a.create.disabled { border-color: var(--rc-line); color: var(--rc-text-3); }
}


/* ---------------------------------------------------------------
   the Security page (plugins/stars_security)
   One column of plain sections, in the same voice as Settings: a heading,
   a line of explanation, and the control that does the thing.
   --------------------------------------------------------------- */
.stars-security { max-width: 720px; padding: 24px 32px 48px; }
.stars-sec-title { font-size: 20px; font-weight: 500; color: var(--rc-text); margin: 0; }
.stars-sec-account { font-size: 13px; color: var(--rc-text-2); margin: 4px 0 28px; }

.stars-sec-section {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 4px 16px;
	align-items: start;
	padding: 22px 0;
	border-top: 1px solid var(--rc-line);
}
.stars-sec-head { grid-column: 1; }
.stars-sec-head h2 { font-size: 14.5px; font-weight: 600; color: var(--rc-text); margin: 0; }
.stars-sec-lead { font-size: 13px; color: var(--rc-text-2); margin-top: 3px; }
.stars-sec-action { grid-column: 2; grid-row: 1; }
.stars-sec-body { grid-column: 1 / -1; margin-top: 14px; }

html:root a.stars-sec-btn,
html:root button.stars-sec-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding: 0 14px;
	border: 1px solid var(--rc-line-strong);
	border-radius: var(--r-md);
	background: var(--rc-surface);
	color: var(--rc-text);
	font-size: 13.5px;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
}
html:root a.stars-sec-btn:hover { background: var(--rc-hover); }
html:root a.stars-sec-btn.small { height: 30px; padding: 0 12px; font-size: 13px; }
html:root a.stars-sec-btn.danger { color: var(--rc-danger); border-color: var(--rc-danger); }
html:root a.stars-sec-btn.danger:hover { background: var(--rc-danger-soft); }
html:root a.stars-sec-btn.is-busy { opacity: .5; pointer-events: none; }

.stars-sec-list { display: flex; flex-direction: column; }
.stars-sec-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
	border-top: 1px solid var(--rc-line-soft);
}
.stars-sec-item:first-child { border-top: 0; }
.stars-sec-item-text { flex: 1 1 auto; min-width: 0; }
.stars-sec-item-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stars-sec-item-name { font-size: 13.5px; color: var(--rc-text); }
.stars-sec-item-meta { font-size: 12.5px; color: var(--rc-text-2); margin-top: 2px; }
.stars-sec-when { flex: none; font-size: 12.5px; color: var(--rc-text-2); }
.stars-sec-empty { font-size: 13.5px; color: var(--rc-text-3); }
.stars-sec-item.is-warn .stars-sec-item-name { color: var(--rc-danger); }

.stars-sec-badge {
	flex: none;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--rc-accent-soft);
	color: var(--rc-accent);
	font-size: 11.5px;
	font-weight: 500;
}
.stars-sec-badge.quiet { background: var(--rc-surface-2); color: var(--rc-text-2); }

html:root a.stars-sec-btn.primary,
html:root button.stars-sec-btn.primary {
	background: var(--rc-accent);
	border-color: var(--rc-accent);
	color: var(--rc-on-accent);
}
html:root a.stars-sec-btn.primary:hover,
html:root button.stars-sec-btn.primary:hover { background: var(--rc-accent-hover); border-color: var(--rc-accent-hover); }
html:root a.stars-sec-btn.quiet { border-color: transparent; color: var(--rc-text-2); }
html:root a.stars-sec-btn.quiet:hover { background: var(--rc-hover); color: var(--rc-text); }

/* on / off, said once and plainly */
.stars-sec-status { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--rc-text); }
.stars-sec-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--rc-text-3); }
.stars-sec-status.on .stars-sec-dot { background: var(--rc-ok); }
.stars-sec-status.off .stars-sec-dot { background: var(--rc-text-3); }

.stars-sec-forms { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; }
.stars-sec-codeform { display: flex; align-items: center; gap: 8px; margin: 0; }
html:root input.stars-code-input {
	width: 190px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--rc-line-strong);
	border-radius: var(--r-md);
	background: var(--rc-surface);
	color: var(--rc-text);
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 17px;
	letter-spacing: .18em;
}
html:root input.stars-code-input.small { width: 150px; height: 30px; font-size: 14px; letter-spacing: .1em; }
html:root input.stars-sec-input {
	width: 260px;
	max-width: 100%;
	height: 30px;
	padding: 0 12px;
	border: 1px solid var(--rc-line-strong);
	border-radius: var(--r-md);
	background: var(--rc-surface);
	color: var(--rc-text);
	font-family: inherit;
	font-size: 13.5px;
}
html:root input.stars-sec-input:focus {
	border-color: var(--rc-accent);
	box-shadow: 0 0 0 1px var(--rc-accent);
	outline: none;
}
body.task-settings .stars-login input.stars-sec-input { width: 100%; height: 44px; font-size: 15px; padding: 0 14px; }
html:root input.stars-code-input:focus {
	border-color: var(--rc-accent);
	box-shadow: 0 0 0 1px var(--rc-accent);
	outline: none;
}
html:root input.stars-code-input::placeholder { letter-spacing: .1em; color: var(--rc-text-3); }

/* setting it up */
.stars-sec-intro { max-width: 56ch; margin-bottom: 24px; }
.stars-sec-steps { margin: 0; padding-left: 20px; }
.stars-sec-steps > li { margin-bottom: 22px; font-size: 13.5px; color: var(--rc-text); }
/* The one deliberate colour literal in this file: a QR code has to stay dark
   on light to be scannable, so this panel keeps its own ground in dark mode
   rather than following the theme. */
.stars-qr-wrap {
	display: inline-block;
	margin: 14px 0 10px;
	padding: 12px;
	border: 1px solid var(--rc-line);
	border-radius: var(--r-md);
	background: #ffffff;
	line-height: 0;
}
.stars-qr { width: 200px; height: 200px; display: block; }
.stars-sec-key { font-size: 12.5px; color: var(--rc-text-2); }
.stars-sec-key-label { display: block; margin-bottom: 3px; }
.stars-sec-key-value {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 13px;
	letter-spacing: .08em;
	color: var(--rc-text);
	user-select: all;
}
.stars-sec-codefield { margin-top: 12px; }
.stars-sec-formbuttons { display: flex; align-items: center; gap: 10px; margin-top: 8px; }

/* recovery codes, shown once */
.stars-codes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 20px;
	list-style: none;
	margin: 0 0 22px;
	padding: 18px 20px;
	max-width: 420px;
	border: 1px solid var(--rc-line);
	border-radius: var(--r-md);
	background: var(--rc-surface-2);
}
.stars-codes li {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 14px;
	letter-spacing: .06em;
	color: var(--rc-text);
	user-select: all;
}

@media screen and (max-width: 768px) {
	.stars-security { padding: 16px 16px 40px; }
	.stars-sec-section { grid-template-columns: minmax(0, 1fr); }
	.stars-sec-action { grid-column: 1; grid-row: auto; margin-top: 12px; }
	.stars-sec-body { grid-column: 1; }
	.stars-codes { grid-template-columns: minmax(0, 1fr); }
	.stars-sec-codeform { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------
   11  menus, dialogs, forms, buttons
   --------------------------------------------------------------- */
html:root .popupmenu,
html:root .popover {
	background: var(--rc-surface);
	border: 1px solid var(--rc-line);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-3);
	overflow: hidden;
	padding: 0;
}
html:root .popupmenu .listing,
html:root .popover .listing { padding: 6px; }
html:root .popupmenu .listing li,
html:root .popover .listing li { border: 0; }
html:root .popupmenu .listing li > a,
html:root .popover .menu li a {
	--icon: 20px;
	display: flex;
	align-items: center;
	gap: 14px;
	height: 36px;
	line-height: normal;
	padding: 0 14px;
	border: 0;
	border-radius: var(--r-sm);
	font-size: 13.5px;
	color: var(--rc-text);
}
html:root .popupmenu .listing li > a:before,
html:root .popover .menu li a:before {
	float: none;
	margin: 0;
	width: var(--icon);
	height: var(--icon);
	color: var(--rc-text-2);
}
html:root .popupmenu .listing li > a:not(.disabled):hover,
html:root .popover .menu li a:not(.disabled):hover { background: var(--rc-hover); }
html:root .popupmenu .listing li > a.disabled { opacity: .4; }
html:root .popupmenu .listing li.separator label,
html:root .popover .listing li.separator label {
	font-size: 12px;
	font-weight: 500;
	color: var(--rc-text-2);
	padding: 10px 14px 4px;
	text-transform: none;
	letter-spacing: 0;
}
html:root .popover-overlay { background: var(--rc-scrim); }

html:root .ui-dialog {
	background: var(--rc-surface);
	border: 0;
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-3);
	overflow: hidden;
}
html:root .ui-dialog .ui-dialog-titlebar { background: transparent; border: 0; padding: 20px 24px 8px; }
html:root .ui-dialog .ui-dialog-title { font-size: 17px; font-weight: 500; color: var(--rc-text); }
html:root .ui-dialog .ui-dialog-content { padding: 8px 24px 20px; font-size: 14px; }
html:root .ui-dialog .ui-dialog-buttonpane { border: 0; padding: 8px 16px 16px; }
html:root .ui-widget-overlay { background: var(--rc-scrim); opacity: 1; }

html:root .btn {
	--icon: 18px;
	border-radius: var(--r-md);
	font-family: inherit;
	font-weight: 500;
	font-size: 13.5px;
	height: 38px;
	padding: 0 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid transparent;
	box-shadow: none;
	transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
		color var(--fast) var(--ease);
}
html:root .btn-primary {
	background: var(--rc-accent);
	border-color: var(--rc-accent);
	color: var(--rc-on-accent);
}
html:root .btn-primary:hover {
	background: var(--rc-accent-hover);
	border-color: var(--rc-accent-hover);
	color: var(--rc-on-accent);
}
html:root .btn-secondary { background: transparent; border-color: var(--rc-line-strong); color: var(--rc-text); }
html:root .btn-link { background: transparent; border-color: transparent; color: var(--rc-accent); }
html:root .btn-secondary:hover { background: var(--rc-surface-2); border-color: var(--rc-text-3); }
html:root .btn.disabled,
html:root .btn:disabled { opacity: .45; }
html:root .btn-danger { background: var(--rc-danger); border-color: var(--rc-danger); color: var(--rc-on-danger); }

html:root .form-control,
html:root .custom-select,
html:root input.form-control,
html:root textarea.form-control {
	background: var(--rc-surface);
	border: 1px solid var(--rc-line-strong);
	border-radius: var(--r-sm);
	color: var(--rc-text);
	font-family: inherit;
	font-size: 13.5px;
	min-height: 38px;
	box-shadow: none;
	transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
html:root .form-control:hover,
html:root .custom-select:hover { border-color: var(--rc-text-3); }
html:root .form-control:focus,
html:root .custom-select:focus { border-color: var(--rc-accent); box-shadow: 0 0 0 1px var(--rc-accent); }
html:root .form-control:disabled,
html:root .form-control[readonly] { background: var(--rc-surface-2); opacity: 1; color: var(--rc-text-2); }
html:root .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
	background: var(--rc-accent);
	border-color: var(--rc-accent);
}

html:root .searchoptions {
	background: var(--rc-surface);
	border-bottom: 1px solid var(--rc-line);
	padding: 20px 24px;
}
html:root .searchoptions .proplist li label { font-size: 13.5px; color: var(--rc-text); }

/* ui.js reuses one <ul> for the message actions: inline in the header, and
   moved into a .popover when the ⋮ opens it. Inline, it must not wear the
   popup's chrome; the parent says which of the two it currently is. */
#layout > div > .header > ul#toolbar-menu {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	gap: 2px;
}
#layout > div > .header > ul#toolbar-menu > li {
	border: 0;
	margin: 0;
	padding: 0;
	background: transparent;
}

/* the phone popover: the same surface as every other menu */
html:root .popover { background: var(--rc-surface); border: 0; box-shadow: var(--shadow-3); }
html:root .popover > .popover-header {
	display: flex;
	align-items: center;
	height: 56px;
	min-height: 56px;
	padding: 0 8px !important;
	background: var(--rc-surface);
	border-bottom: 1px solid var(--rc-line);
	color: var(--rc-text);
	font-size: 15px;
	font-weight: 500;
}
html:root .popover > .popover-header a.cancel {
	--icon: 20px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	padding: 0 10px;
	border-radius: var(--r-md);
	color: var(--rc-text-2);
	font-size: 14px;
}
html:root .popover > .popover-header a.cancel .inner { display: inline; }
html:root .popover > .popover-header a.cancel:before { margin: 0; float: none; }
html:root .popover > .popover-header a.cancel:hover { background: var(--rc-hover); color: var(--rc-text); }

/* ---------------------------------------------------------------
   12  states
   --------------------------------------------------------------- */
.listing-info { display: none !important; }
.stars-empty {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 32px;
	text-align: center;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--slow) var(--ease);
}
.stars-empty.is-shown { opacity: 1; }
.stars-empty-title { font-size: 15px; color: var(--rc-text-2); }
.stars-empty-sub { font-size: 13.5px; color: var(--rc-text-3); max-width: 40ch; }

/* loading: one hairline under the toolbar, nothing more */
#stars-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--fast) var(--ease);
	z-index: 3;
}
#stars-progress.is-on { opacity: 1; }
#stars-progress:after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--rc-accent);
	transform-origin: 0 50%;
	animation: starsProgress 1.1s var(--ease) infinite;
}
@keyframes starsProgress {
	0% { transform: translateX(-100%) scaleX(.4); }
	60% { transform: translateX(60%) scaleX(.7); }
	100% { transform: translateX(100%) scaleX(.4); }
}

html:root .iframe-loader { background: transparent; }
html:root .iframe-loader .spinner-border {
	width: 22px;
	height: 22px;
	border-width: 2px;
	color: var(--rc-accent);
	border-color: currentColor var(--rc-line) currentColor currentColor;
}

/* toasts, low and quiet */
body:not(.task-login) #messagestack {
	left: 24px;
	bottom: 24px;
	right: auto;
	transform: none;
	width: auto;
	max-width: min(420px, calc(100vw - 48px));
}
html:root body:not(.task-login) #messagestack div {
	border-radius: var(--r-md);
	border: 0;
	box-shadow: var(--shadow-3);
	font-size: 13.5px;
	padding: 14px 18px;
	background: var(--rc-text);
	color: var(--rc-surface);
}
html:root body:not(.task-login) #messagestack div i.icon { display: none; }
html:root body:not(.task-login) #messagestack div a { color: var(--rc-surface); text-decoration: underline; }
html:root body:not(.task-login) #messagestack .alert-danger { background: var(--rc-danger); color: var(--rc-on-danger); }
html:root body:not(.task-login) #messagestack .alert-danger a { color: var(--rc-on-danger); }

/* ---------------------------------------------------------------
   13  responsive
   --------------------------------------------------------------- */
@media screen and (min-width: 1600px) {
	:root { --nav-w: 272px; }
	#message-header { padding: 28px 56px 16px; }
	#message-content .rightcol { padding: 8px 56px 24px; }
	#message-content .leftcol { padding: 0 56px; }
	.stars-replybar { padding: 20px 56px 40px; }
	.messagelist td.subject span.fromto { width: 240px; }
}

@media screen and (max-width: 1200px) {
	.messagelist td.subject span.fromto { width: 170px; }
}

@media screen and (max-width: 1024px) {
	:root { --nav-w: 224px; }
	.messagelist td.subject span.stars-snippet { display: none; }
}

@media screen and (max-width: 900px) {
	#stars-brand .stars-brand-name { display: none; }
}

@media screen and (max-width: 768px) {
	#stars-topbar { height: 56px; padding: 0 8px 0 4px; }
	#stars-search .searchbar { height: 40px; min-height: 40px; }
	#stars-search .searchbar input { height: 38px; font-size: 14px; }
	#stars-brand { margin-right: 0; padding: 6px; }

	#messagelist-header a.task-menu-button,
	#layout-list > .header a.task-menu-button,
	#layout-sidebar > .header a.task-menu-button { display: none !important; }

	/* Three rows on a phone: who and when, then the subject, then the first
	   line of the message. A grid states that directly; a wrapping flex row
	   cannot, because it breaks the line before it shrinks the sender. */
	html:root .messagelist tbody tr {
		height: auto;
		min-height: 68px;
		padding: 10px 8px 10px 0;
		align-items: flex-start;
	}
	html:root .messagelist td.selection { align-self: center; }
	html:root .messagelist td.flags > span.flag { align-self: flex-start; margin-top: 2px; }
	html:root .messagelist td.subject {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		row-gap: 2px;
		align-items: baseline;
		padding-right: 4px !important;
	}
	html:root .messagelist td.subject span.fromto {
		grid-area: 1 / 1 / 2 / 2;
		width: auto;
		min-width: 0;
		padding-left: 0;
		font-size: 14px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	html:root .messagelist td.subject span.date {
		grid-area: 1 / 2 / 2 / 3;
		width: auto;
		padding-left: 10px;
		white-space: nowrap;
	}
	html:root .messagelist td.subject span.subject {
		grid-area: 2 / 1 / 3 / 3;
		width: auto;
		min-width: 0;
		max-width: none;
	}
	html:root .messagelist td.subject span.stars-snippet {
		grid-area: 3 / 1 / 4 / 3;
		display: block;
		width: auto;
		min-width: 0;
	}
	html:root .messagelist td.subject span.stars-snippet:before { content: none; }
	html:root .messagelist td.subject span.size { display: none; }
	html:root .messagelist td.flags > span.attachment { align-self: flex-start; margin-top: 4px; }

	/* The folder screen is a screen of its own on a phone, so the rows are
	   sized for a thumb rather than for a rail. */
	html:root #layout-sidebar > .header {
		display: flex;
		height: 56px;
		min-height: 56px;
		padding: 0 8px !important;
		border-bottom: 1px solid var(--rc-line);
	}
	html:root #layout-sidebar > .header > .header-title {
		flex: 1 1 auto;
		max-width: none;
		margin: 0 0 0 4px !important;
		font-size: 15px;
		font-weight: 500;
	}
	html:root #layout-sidebar > .header > a.back-list-button {
		--icon: 20px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		color: var(--rc-text-2);
	}
	html:root #layout-sidebar > .header > a.back-list-button .inner { display: none; }
	html:root #layout-sidebar > .header > a.back-list-button:before { margin: 0; float: none; }

	html:root .folderlist li > a,
	html:root .listing.folderlist li > a,
	html:root #directorylist li > a,
	html:root #savedsearchlist li > a,
	html:root #stars-views a {
		--icon: 20px;
		display: flex;
		align-items: center;
		gap: 16px;
		width: 100%;
		max-width: none;
		min-width: 0;
		float: none;
		height: 48px;
		padding: 0 16px;
		margin: 0;
		border: 0 !important;
		border-radius: var(--r-md);
		color: var(--rc-text);
		font-size: 14px;
		font-weight: 400;
		line-height: normal;
		text-align: left;
	}
	html:root .folderlist li > a:before,
	html:root #directorylist li > a:before,
	html:root #savedsearchlist li > a:before,
	html:root #stars-views a:before {
		float: none !important;
		margin: 0 !important;
		width: var(--icon) !important;
		height: var(--icon);
		flex: none;
		color: var(--rc-text-2);
	}
	html:root .folderlist li > a .inner,
	html:root #stars-views a .inner { display: inline; font-size: 100%; padding: 0; }
	html:root .folderlist li.selected > a,
	html:root #directorylist li.selected > a,
	html:root #stars-views a.selected {
		background: var(--rc-accent-soft);
		color: var(--rc-text);
		font-weight: 600;
	}
	html:root .folderlist li.selected > a:before,
	html:root #directorylist li.selected > a:before,
	html:root #stars-views a.selected:before { color: var(--rc-accent); }

	html:root #layout-content > .header > .header-title { display: none; }
	#message-header { padding: 16px 16px 12px; }
	#message-header > .subject { font-size: 19px; margin-bottom: 14px; }
	#message-content .rightcol { padding: 8px 16px 20px; }
	#message-content .leftcol { padding: 0 16px; }
	.stars-replybar { padding: 16px 16px 32px; flex-direction: column; align-items: stretch; }
	.stars-replybar a { justify-content: flex-start; }

	/* the reply-all / forward carets are a second way into the ⋯ menu that is
	   already in the same bar, and they read as specks at this size */
	#layout-content > .header ul#toolbar-menu a.dropdown { display: none; }
	#compose-headers { padding: 8px 14px 0; }
	#composebodycontainer { padding: 8px 14px 0; }
	#compose-content > .formbuttons { padding: 10px 14px; }
	/* ui.js clones the form buttons into a bottom navigation bar on a small
	   screen; the form already carries them, so one set is enough. */
	body.action-compose .footer.content-frame-navigation { display: none !important; }
	/* the drawer is one row up in the product bar already */
	#layout-content > .header > a.task-menu-button { display: none !important; }
	html:root a.stars-compose-back {
		--icon: 20px;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 40px;
		min-width: 40px;
		height: 40px;
		border-radius: 50%;
		color: var(--rc-text-2);
	}
	html:root a.stars-compose-back .inner { display: none; }
	html:root a.stars-compose-back:before { margin: 0; float: none; }
	html:root a.stars-compose-back:hover { background: var(--rc-hover); color: var(--rc-text); }
	#messagestack { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* the task menu as a drawer */
@media screen and (max-width: 480px) {
	/* The drawer needs its own ground, and the shell rule that clears the
	   rail's background carries an id and two classes, so this has to match it. */
	html:not(.iframe).layout-phone body:not(.task-login) #layout-menu {
		background: var(--rc-surface);
		border-right: 1px solid var(--rc-line);
		box-shadow: var(--shadow-3);
		padding: 0 8px 16px;
		width: min(288px, 86vw);
	}
	html.layout-phone #layout-menu .popover-header {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		height: 56px;
		background: transparent !important;
		border-bottom: 1px solid var(--rc-line);
		margin-bottom: 8px;
		padding: 0 8px 0 12px !important;
	}
	#stars-drawer-brand {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		font-size: 14px;
		font-weight: 500;
		letter-spacing: .01em;
		color: var(--rc-text);
	}
	#stars-drawer-brand svg { width: 22px; height: 22px; flex: none; color: var(--rc-accent); }
	#stars-drawer-brand .tm { font-size: .55em; vertical-align: .7em; opacity: .6; }
	html:root #layout-menu .popover-header a.cancel {
		--icon: 20px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		color: var(--rc-text-2);
	}
	html:root #layout-menu .popover-header a.cancel .inner { display: none; }
	html:root #layout-menu .popover-header a.cancel:before { margin: 0; float: none; }
	html:root #layout-menu .popover-header a.cancel:hover { background: var(--rc-hover); color: var(--rc-text); }
	html.layout-phone #taskmenu { display: flex; flex-direction: column; gap: 2px; }
	html.layout-phone #taskmenu .action-buttons { display: block; margin: 8px 8px 12px; }
	html.layout-phone #taskmenu .action-buttons a.compose,
	html:root.layout-phone #taskmenu .action-buttons a.compose {
		--icon: 20px;
		display: flex;
		align-items: center;
		gap: 12px;
		width: auto;
		height: 48px;
		padding: 0 24px 0 20px;
		border: 0;
		border-radius: var(--r-md);
		background: var(--rc-accent);
		color: var(--rc-on-accent);
		font-weight: 500;
	}
	html.layout-phone #taskmenu .action-buttons a.compose .inner { display: inline; }
	html.layout-phone #taskmenu .special-buttons { display: block; }
	html.layout-phone #taskmenu > a,
	html:root.layout-phone #taskmenu > a,
	html.layout-phone #taskmenu .special-buttons > a,
	html:root.layout-phone #taskmenu .special-buttons > a {
		--icon: 20px;
		display: flex;
		align-items: center;
		gap: 14px;
		width: 100%;
		height: 40px;
		padding: 0 12px;
		border: 0 !important;
		border-radius: var(--r-md);
		color: var(--rc-text);
		font-size: 14px;
	}
	html.layout-phone #taskmenu > a .inner,
	html.layout-phone #taskmenu .special-buttons > a .inner { display: inline; font-size: 100%; padding: 0; }
	html.layout-phone #taskmenu > a:before,
	html.layout-phone #taskmenu .special-buttons > a:before { float: none !important; margin: 0 !important; width: var(--icon) !important; }
	#stars-composers { display: none; }

	/* The phone toolbar carries only what a phone needs. Threading is a
	   desktop refinement; the list header's own ⋮ opens Elastic's message
	   menu, which belongs to the reading view, so it goes. */
	/* Both ⋮ buttons open a clone of a toolbar that is already fully visible
	   beside them: in the list it is the wrong toolbar, in the reading view it
	   is the same one twice. */
	#messagelist-header > a.toolbar-menu-button,
	#layout-content > .header > a.toolbar-menu-button { display: none !important; }
	#stars-listbar .stars-item-threads { display: none; }
	#stars-topbar #stars-topbar-actions .stars-topbtn.settings { display: none; }

	/* With a selection the bar becomes what Gmail's does: the actions for
	   what is selected, and nothing else. */
	html.stars-has-selection #stars-listbar .stars-item-refresh,
	html.stars-has-selection #stars-listbar .stars-item-folderactions,
	html.stars-has-selection #stars-listbar .stars-item-options { display: none; }
	html.stars-has-selection .stars-bulk:before { content: none; }
	html.stars-has-selection .stars-bulk { max-width: none; }
	.stars-bulk-count { padding: 0 8px 0 4px; font-size: 0; }
	.stars-bulk-count:before { content: attr(data-count); font-size: 13.5px; font-weight: 500; color: var(--rc-text); }

	html:root .floating-action-buttons a.button { width: 56px; height: 56px; }
}

html:root .floating-action-buttons a.button {
	background: var(--rc-accent);
	color: var(--rc-on-accent);
	box-shadow: var(--shadow-3);
}

@media (prefers-reduced-motion: reduce) {
	*, *:before, *:after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
	#stars-progress:after { animation: none; transform: none; }
}

@media print {
	#stars-topbar,
	#layout-menu,
	#layout-sidebar,
	#layout-list { display: none !important; }
}