/**
 * Magnolia State Mail.
 *
 * The layout follows the supplied design study: a blue command bar, a narrow
 * app rail, a folder pane, a message list and a reading pane. Sizes and
 * colours are kept as they were given; what is added here covers the parts a
 * working client needs and a static mock-up does not - pagination, compose,
 * attachments, errors and the quoted-text treatment in a real message body.
 */

:root {
	--blue: #0078d4;
	--blue-dark: #0067b8;
	--blue-press: #005a9e;
	--ink: #252525;
	--muted: #686868;
	--line: #e6e6e6;
	--surface: #fff;
	--navy: #0A2B4E;
	--red: #C8102E;
	--ui-font: 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	min-height: 100%;
	font-family: var(--ui-font);
	color: var(--ink);
}

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

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid #005a9e;
	outline-offset: 2px;
}

[hidden] { display: none !important; }

/* Present to screen readers, not on screen. */
.voice {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.icon {
	width: 21px; height: 21px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: middle;
	flex: none;
}


/* ===================================================================
   AUTHENTICATION SCREENS
   Sign in, forgot password and choosing a new password.

   One card in two panels: the brand on the left, the form on the right.
   The card is centred on the layered background of the design study. On a
   phone the brand panel keeps only its logo so the form stays above the fold.
   =================================================================== */

.auth-screen {
	min-height: 100dvh;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 32px 20px;
	background: linear-gradient(134deg, #e8edf6 4%, #f6f1f4 52%, #eef1f9 93%);
}

.auth-screen::before {
	content: '';
	position: absolute; z-index: 0;
	top: -40%; left: -22%;
	width: 77vw; height: 130vh;
	border-radius: 22%;
	transform: rotate(-14deg);
	background: linear-gradient(120deg, rgba(235,247,251,.79), rgba(240,235,245,.46));
	filter: blur(2px);
}

.auth-screen::after {
	content: '';
	position: absolute; z-index: 0;
	bottom: -50%; left: -2%;
	width: 55vw; height: 93vh;
	border: 2px solid rgba(255,255,255,.68);
	border-radius: 24px;
	transform: rotate(27deg);
	background: linear-gradient(120deg, rgba(221,239,250,.53), rgba(250,243,246,.78));
	box-shadow: 0 1px 30px rgba(255,255,255,.4);
}

.shape { position: absolute; pointer-events: none; z-index: 0; }

.shape-a {
	width: 55vw; height: 70vh; top: -35%; left: 46%;
	border: 2px solid rgba(185,213,253,.47);
	border-radius: 38px; transform: rotate(-26deg);
	background: rgba(245,243,250,.34);
}

.shape-b {
	width: 54vw; height: 65vh; bottom: -35%; right: -13%;
	border: 1px solid rgba(255,255,255,.85);
	border-radius: 38px; transform: rotate(20deg);
	background: rgba(255,255,255,.2);
}

.shape-c {
	width: 31vw; height: 35vh; top: -14%; right: -2%;
	border: 1px solid rgba(146,205,252,.65);
	border-radius: 25px; transform: rotate(-12deg);
	background: rgba(219,239,254,.12);
}

.auth-card {
	position: relative;
	z-index: 1;
	display: flex;
	width: min(980px, 100%);
	background: #fff;
	box-shadow: 0 3px 10px rgba(16, 38, 68, .12), 0 24px 60px rgba(16, 38, 68, .09);
	overflow: hidden;
	flex: none;
}

.auth-card-single { width: min(520px, 100%); }

/* ---- brand panel ---------------------------------------------------- */

.auth-aside {
	flex: 0 0 42%;
	max-width: 42%;
	padding: 44px 40px 36px;
	background: linear-gradient(160deg, #0A2B4E 0%, #123a66 58%, #15456f 100%);
	color: #fff;
	display: flex;
	flex-direction: column;
}

/* The logo is dark artwork, so on the navy panel it sits on a white plate. */
.auth-logo {
	height: 46px; width: auto; max-width: 100%;
	background: #fff;
	padding: 7px 11px;
	border-radius: 4px;
	align-self: flex-start;
}

.auth-aside-title {
	font-size: 25px;
	line-height: 1.32;
	font-weight: 600;
	margin: 30px 0 28px;
	letter-spacing: -.3px;
}

.auth-points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.auth-points li { display: flex; gap: 14px; align-items: flex-start; }

.auth-point-icon {
	flex: none;
	width: 34px; height: 34px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #bcdcf7;
}
.auth-point-icon svg { width: 19px; height: 19px; }

.auth-points strong {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 3px;
}

.auth-points p {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .72);
}

.auth-aside-foot {
	margin: auto 0 0;
	padding-top: 28px;
	font-size: 12px;
	color: rgba(255, 255, 255, .55);
}

/* ---- form panel ------------------------------------------------------ */

.auth-main {
	flex: 1 1 auto;
	min-width: 0;
	padding: 48px 48px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.auth-card-single .auth-main { padding: 40px 38px 34px; }

.auth-brand-row { margin-bottom: 26px; }
.auth-logo-small { height: 38px; width: auto; display: block; }

.auth-head { margin-bottom: 26px; }

.auth-head h1 {
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -.4px;
	margin: 0 0 7px;
	color: #16212e;
}

.auth-head p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: #62707f;
}

.back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	background: none;
	color: var(--blue-dark);
	font-size: 13px;
	padding: 0 0 14px;
}
.back-link svg { width: 16px; height: 16px; }
.back-link:hover { text-decoration: underline; }

.field { margin-bottom: 18px; }

.field label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: #4a5765;
	margin-bottom: 7px;
}

.field-label-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.link-inline {
	border: 0; background: none;
	color: var(--blue-dark);
	font-size: 12.5px;
	padding: 0 0 7px;
}
.link-inline:hover { text-decoration: underline; }

.auth-main input[type="text"],
.auth-main input[type="email"],
.auth-main input[type="password"] {
	width: 100%;
	height: 44px;
	padding: 0 13px;
	border: 1px solid #d3dbe4;
	border-radius: 3px;
	font-size: 15px;
	color: #1d2733;
	background: #fff;
	transition: border-color .12s, box-shadow .12s;
}

.auth-main input:focus {
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(0, 120, 212, .14);
}

.auth-main input::placeholder { color: #9aa6b2; }

/* The field that carries the reveal button. */
.field-with-button { position: relative; }
.field-with-button input { padding-right: 46px; }

.reveal {
	position: absolute;
	right: 4px; top: 50%;
	transform: translateY(-50%);
	width: 38px; height: 38px;
	display: grid; place-items: center;
	border: 0; background: none;
	color: #8a97a4;
	border-radius: 3px;
}
.reveal svg { width: 19px; height: 19px; }
.reveal:hover { color: #46525f; background: #f2f5f8; }
.reveal.on { color: var(--blue-dark); }

.checkbox {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	color: #4a5765;
	margin: 4px 0 20px;
	cursor: pointer;
}
.checkbox input { width: 16px; height: 16px; accent-color: var(--blue); margin: 0; }

.btn-primary {
	width: 100%;
	height: 46px;
	background: var(--blue);
	color: #fff;
	border: 1px solid var(--blue);
	border-radius: 3px;
	font-size: 15px;
	font-weight: 600;
}
.btn-primary:hover { background: var(--blue-press); border-color: var(--blue-press); }
.btn-primary[disabled] { opacity: .62; cursor: default; }

.btn-link {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.auth-note {
	margin: 0 0 18px;
	padding: 11px 13px;
	font-size: 13px;
	line-height: 1.5;
	border-left: 3px solid #ccc;
	background: #f4f6f8;
	color: #3f4a57;
}
.auth-note.bad { background: #fdeaed; color: #8c0a21; border-left-color: var(--red); }
.auth-note.ok  { background: #e9f6f0; color: #0a5c46; border-left-color: #0d8b6c; }

.auth-help {
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px solid #edf1f5;
	font-size: 12.5px;
	line-height: 1.6;
	color: #7b8793;
}

.field-hint { margin: 7px 0 0; font-size: 12px; color: #7b8793; }
.field-hint.warn { color: #9a6508; }
.field-hint.ok   { color: #0a7a5c; }

/* Password strength. The width is set from script; the colour comes from the
   class, so the two cannot disagree. */
.meter {
	height: 4px;
	margin-top: 10px;
	background: #e8edf2;
	border-radius: 2px;
	overflow: hidden;
}
.meter span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 2px;
	transition: width .18s ease-out, background-color .18s;
}
.meter span.meter-0 { background: #d9dee4; }
.meter span.meter-1 { background: #d0544a; }
.meter span.meter-2 { background: #d98b25; }
.meter span.meter-3 { background: #3a9ad9; }
.meter span.meter-4 { background: #19936f; }

.auth-footer {
	position: relative;
	z-index: 1;
	width: min(980px, 100%);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	padding: 18px 4px 0;
	font-size: 11.5px;
	color: #6a7684;
}
.auth-footer-links { display: flex; gap: 20px; }
.auth-footer a { color: #46525f; text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }


/* ===================================================================
   MAILBOX SHELL
   =================================================================== */

.outlook-screen {
	height: 100dvh;
	min-height: 460px;
	background: #f4f4f4;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.outlook-topbar {
	height: 72px; flex: none;
	display: flex; align-items: center;
	color: #fff; background: var(--blue);
	position: relative; z-index: 30;
	box-shadow: 0 1px 1px rgba(0,0,0,.1);
}

.waffle {
	height: 70px; width: 60px;
	display: grid; place-items: center;
	border: 0; background: transparent; color: #fff;
}
.waffle:hover { background: #0867aa; }

.waffle-grid { display: grid; grid-template-columns: repeat(3, 4px); gap: 3px; }
.waffle-grid i { width: 4px; height: 4px; background: #fff; border-radius: 1px; }

.outlook-wordmark {
	display: flex; align-items: center;
	padding: 0 18px 0 6px;
	flex: none;
}

/* The logo is dark-on-light artwork, so on the blue bar it sits on a small
   white plate rather than being recoloured. */
.topbar-logo {
	height: 40px; width: auto; max-width: 210px;
	display: block;
	background: #fff;
	padding: 4px 8px;
	border-radius: 3px;
}

.search-box {
	height: 48px; width: min(526px, 40vw);
	background: #cfe4f7; color: #3f6584;
	display: flex; align-items: center;
	padding: 0 16px; gap: 12px;
	border-radius: 2px;
	transition: background .15s;
}

.search-box:focus-within { background: #fff; color: #333; }
.search-icon svg { width: 20px; height: 20px; display: block; }

.search-box input {
	width: 100%; min-width: 0;
	background: transparent; border: 0; outline: 0;
	font-size: 17px; color: #263746;
}
.search-box input::placeholder { color: #476886; opacity: 1; }
.search-box:focus-within input::placeholder { color: #8a8a8a; }

.search-clear {
	border: 0; background: none; color: inherit;
	font-size: 22px; line-height: 1; padding: 0 2px;
}

.topbar-spacer { flex: 1; }

.avatar-button {
	width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid #a6d9ff; background: #1679c6;
	color: #fff; font-size: 15px; font-weight: 600;
	margin: 0 14px 0 8px; flex: none;
}

.profile-menu {
	position: absolute; right: 16px; top: 66px;
	background: #fff; color: var(--ink);
	box-shadow: 0 6px 25px rgba(0,0,0,.22);
	width: 268px; padding: 16px; z-index: 40; border-radius: 3px;
}
.profile-menu strong { display: block; font-size: 14px; word-break: break-all; }
.profile-menu p { font-size: 12px; color: #666; line-height: 17px; margin: 6px 0 12px; }
.profile-menu button {
	border: 1px solid #d5d5d5; background: #fafafa;
	color: var(--blue-dark); padding: 9px 12px; width: 100%; border-radius: 2px;
}
.profile-menu button:hover { background: #f1f1f1; }

.outlook-workspace {
	flex: 1; min-height: 0;
	display: grid;
	grid-template-columns: 72px 320px 520px minmax(200px, 1fr);
	grid-template-rows: 73px minmax(0, 1fr);
	background: #f6f6f6;
	position: relative;
}

.app-rail {
	grid-column: 1; grid-row: 1 / 3;
	background: #fafafa;
	border-right: 1px solid #ededed;
	display: flex; flex-direction: column; align-items: center;
	padding-top: 12px; gap: 8px;
}

.rail-button {
	width: 56px; height: 54px;
	border: 0; background: transparent;
	display: grid; place-items: center;
	color: #9a9a9a; position: relative;
}
.rail-button:hover { background: #e9f1fa; }
.rail-button.active { color: var(--blue); }
.rail-button.active::before {
	content: ''; position: absolute;
	left: 5px; top: 4px; bottom: 5px;
	width: 3px; background: var(--blue); border-radius: 4px;
}
.rail-button .icon { width: 24px; height: 24px; }

.command-toolbar {
	grid-column: 2 / 5; grid-row: 1;
	background: #f8f8f8;
	display: flex; align-items: center; gap: 36px;
	padding: 0 24px 0 16px;
	border-bottom: 1px solid #f0f0f0;
	z-index: 2;
}

.toolbar-start { display: flex; align-items: center; gap: 24px; min-width: 280px; }

.hamburger { color: #87a0ac; border: 0; background: transparent; padding: 6px 3px; }

.new-mail {
	background: var(--blue); color: #fff; border: 0;
	height: 48px; padding: 0 18px;
	display: flex; gap: 10px; align-items: center;
	font-size: 17px; font-weight: 600; white-space: nowrap;
	border-radius: 5px;
	box-shadow: 0 0 0 2px rgba(0,120,212,.09);
}
.new-mail:hover { background: var(--blue-press); }
.new-mail .icon { width: 22px; height: 22px; }

.toolbar-other {
	display: flex; align-items: center; gap: 9px;
	font-size: 16px; color: #565656;
	border: 0; background: transparent;
	padding: 10px 0; white-space: nowrap;
}
.toolbar-other:hover { color: #1b1b1b; }
.toolbar-other .icon { width: 24px; height: 24px; color: #5e8eaa; }


/* ===================================================================
   FOLDERS
   =================================================================== */

.folder-panel {
	grid-column: 2; grid-row: 2;
	min-width: 0;
	background: #f8f8f8;
	overflow: auto;
	border-right: 1px solid #e9e9e9;
	padding-bottom: 24px;
}

.section-head {
	padding: 18px 22px 14px;
	font-size: 16px; font-weight: 600; color: #404040;
}

.folder-loading { padding: 10px 24px; color: var(--muted); font-size: 14px; }

.folder-item {
	height: 54px; width: 100%;
	display: flex; align-items: center; gap: 14px;
	padding: 0 22px; border: 0;
	background: transparent; text-align: left;
	color: #505050; font-size: 17px;
}
.folder-item:hover { background: #eef2f6; }
.folder-item.selected { background: #c9e2f8; color: #165b8d; }
.folder-item .icon { width: 23px; height: 23px; color: #6e6e6e; }
.folder-item.selected .icon { color: #1a729b; }
.folder-item .folder-name {
	flex: 1; min-width: 0;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.folder-item .folder-count {
	font-style: normal; color: #2f719d;
	font-weight: 600; font-size: 15px;
}


/* ===================================================================
   MESSAGE LIST
   =================================================================== */

.list-panel {
	grid-column: 3; grid-row: 2;
	background: #fff;
	overflow: hidden;
	display: flex; flex-direction: column;
	border-right: 1px solid #f0f0f0;
	box-shadow: 2px 0 5px rgba(0,0,0,.025);
}

.list-tabs {
	min-height: 70px; height: 70px;
	display: flex; align-items: center; gap: 30px;
	padding: 0 22px;
	background: #fff;
	border-bottom: 1px solid #f3f3f3;
}

.tab-button {
	height: 70px; border: 0; background: none;
	display: flex; align-items: center; gap: 9px;
	font-size: 17px; color: #5d5d5d;
	position: relative; padding: 0 0 4px;
}
.tab-button.active { font-weight: 600; color: #414141; }
.tab-button.active::after {
	content: ''; position: absolute;
	height: 4px; bottom: 3px; left: 0; right: 0;
	background: var(--blue);
}
.tab-button .icon { width: 24px; height: 24px; color: #868686; }

.other-count {
	background: #e1e1e1; padding: 2px 8px; border-radius: 15px;
	font-size: 13px; font-weight: 600; color: #4d4d4d;
}

.filter-button {
	margin-left: auto; border: 0; background: transparent;
	color: #277cae; display: flex; gap: 7px; align-items: center;
	font-size: 16px;
}
.filter-button.active { font-weight: 700; }
.filter-button .icon { width: 17px; height: 17px; color: #a3a3a3; }

.message-scroll {
	flex: 1; overflow-y: auto;
	scrollbar-width: thin; scrollbar-color: #aaa transparent;
}

.message-row {
	width: 100%; min-height: 110px;
	background: #fff;
	display: flex; align-items: flex-start; gap: 16px;
	border: 0; border-left: 4px solid transparent;
	border-bottom: 1px solid #f6f6f6;
	text-align: left;
	padding: 18px 16px 16px 12px;
	color: inherit;
	transition: background .1s;
}
.message-row.unread { border-left-color: var(--blue); }
.message-row:hover,
.message-row.selected-message { background: #edf5fc; }
.message-row.selected-message { border-left-color: var(--blue); }

.sender-avatar {
	width: 42px; height: 42px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 14px; font-weight: 600; color: #fff; flex: none;
}

.message-inner { flex: 1; min-width: 0; }

.message-top {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.message-top strong {
	flex: 1; min-width: 0;
	font-size: 17px; color: #393939;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	font-weight: 600;
}
.message-row.unread .message-top strong { color: #1b1b1b; }

.message-date { color: #4c9bc7; font-size: 13px; white-space: nowrap; flex: none; }

.message-subject {
	display: block; font-size: 16px; color: #267bb3;
	white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
	margin-top: 4px; font-weight: 600;
}
.message-row.unread .message-subject { color: var(--blue-dark); }

.message-meta {
	display: flex; align-items: center; gap: 10px;
	margin-top: 5px; font-size: 14px; color: #777;
}
.message-flag { color: #d08b00; }

.list-empty { text-align: center; padding: 64px 14px; color: #7c7c7c; font-size: 15px; }
.list-error  { text-align: center; padding: 40px 14px; color: #8c0a21; font-size: 14px; }

.list-footer {
	flex: none; height: 48px;
	display: flex; align-items: center; justify-content: center; gap: 16px;
	border-top: 1px solid #f0f0f0;
	font-size: 13px; color: var(--muted);
}
.page-button {
	border: 1px solid #ddd; background: #fff; color: #444;
	width: 30px; height: 28px; border-radius: 2px; font-size: 16px; line-height: 1;
}
.page-button[disabled] { opacity: .4; cursor: default; }


/* ===================================================================
   READING PANE
   =================================================================== */

.reader-panel {
	grid-column: 4; grid-row: 2;
	background: #fafafa;
	display: flex; flex-direction: column;
	min-width: 0; overflow: auto;
}

.reader-empty {
	margin: auto; text-align: center;
	font-size: 17px; color: #606060;
}
.reader-empty strong { font-size: 18px; font-weight: 600; display: block; margin-bottom: 10px; }
.reader-empty p { margin: 0; color: #858585; }

.reader-content { padding: 26px 40px 48px; max-width: 980px; width: 100%; }

.reader-actions {
	border-bottom: 1px solid #e5e5e5;
	padding-bottom: 18px; margin-bottom: 22px;
	display: flex; gap: 18px; flex-wrap: wrap;
}
.reader-actions button {
	background: none; border: 0; color: #565656;
	display: flex; align-items: center; gap: 8px; font-size: 14px;
}
.reader-actions button:hover { color: var(--blue-dark); }
.reader-actions .icon { width: 19px; height: 19px; }

.reader-subject { font-weight: 600; font-size: 24px; margin: 0 0 22px; line-height: 1.3; }

.reader-sender { display: flex; gap: 13px; align-items: flex-start; }
.reader-sender-info { min-width: 0; }
.reader-sender-info strong { font-size: 15px; display: block; }
.reader-sender-info p { color: #777; font-size: 13px; margin: 3px 0 0; word-break: break-word; }
.reader-date { margin-left: auto; font-size: 13px; color: #777; white-space: nowrap; }

/* Remote images are held back until asked for; this is the bar that says so. */
.remote-banner {
	margin: 20px 0 0;
	padding: 11px 14px;
	background: #fff8e5;
	border: 1px solid #f0dfae;
	font-size: 13px; color: #6b5618;
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.remote-banner button {
	border: 1px solid #d9c489; background: #fff;
	color: #6b5618; padding: 5px 12px; border-radius: 2px; font-size: 13px;
}

/* The body is rendered in an iframe; this is its frame. */
.reader-body-frame {
	width: 100%; border: 0; margin-top: 22px;
	min-height: 220px; background: #fff;
}

.attach-panel { margin-top: 26px; border-top: 1px solid #e5e5e5; padding-top: 18px; }
.attach-panel h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
                   color: var(--muted); margin: 0 0 12px; font-weight: 600; }
.attach-items { display: flex; flex-wrap: wrap; gap: 10px; }
.attach-chip {
	display: flex; align-items: center; gap: 9px;
	border: 1px solid #ddd; background: #fff;
	padding: 9px 13px; border-radius: 3px;
	font-size: 13px; color: #333; text-decoration: none;
}
.attach-chip:hover { border-color: var(--blue); color: var(--blue-dark); }
.attach-chip .size { color: var(--muted); font-size: 12px; }


/* ===================================================================
   COMPOSE
   =================================================================== */

.modal-overlay {
	position: fixed; inset: 0; z-index: 80;
	background: rgba(0,0,0,.28);
	display: flex; justify-content: center; align-items: center;
	padding: 20px;
}

.modal {
	width: min(680px, 100%);
	max-height: calc(100vh - 40px);
	background: #fff;
	box-shadow: 0 18px 56px rgba(0,0,0,.23);
	border-radius: 3px;
	overflow: hidden;
	display: flex; flex-direction: column;
}

.modal-head {
	background: var(--blue); color: #fff;
	display: flex; align-items: center; justify-content: space-between;
	padding: 13px 18px; font-size: 16px; font-weight: 600; flex: none;
}
.modal-head button { border: 0; background: transparent; color: #fff; font-size: 26px; line-height: 20px; }

.modal-body { padding: 18px 22px 20px; overflow-y: auto; }
.modal-body label { display: block; color: #555; font-size: 12.5px; margin: 14px 0 6px; font-weight: 600; }
.modal-body label:first-of-type { margin-top: 0; }
.modal-body input[type="text"],
.modal-body textarea {
	display: block; width: 100%;
	border: 1px solid #ddd; padding: 9px 10px;
	border-radius: 2px; outline-color: var(--blue);
}
.modal-body textarea { min-height: 200px; resize: vertical; font-family: inherit; line-height: 1.6; }

.link-button {
	border: 0; background: none; color: var(--blue-dark);
	font-size: 13px; padding: 8px 0 0;
}

.attach-row { margin-top: 16px; }
.attach-button {
	display: inline-flex; align-items: center; gap: 8px;
	border: 1px solid #ddd; background: #fafafa;
	padding: 8px 14px; border-radius: 2px;
	font-size: 13px; color: #333; cursor: pointer; margin: 0;
}
.attach-button:hover { background: #f1f1f1; }
.attach-button .icon { width: 17px; height: 17px; }

.attach-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.attach-list li {
	display: flex; align-items: center; gap: 8px;
	background: #f3f7fb; border: 1px solid #dde8f2;
	padding: 6px 10px; border-radius: 2px; font-size: 12.5px;
}
.attach-list button { border: 0; background: none; color: #8c0a21; font-size: 16px; line-height: 1; padding: 0; }

.compose-error {
	margin: 14px 0 0; padding: 10px 12px;
	background: #fdeaed; color: #8c0a21;
	font-size: 13px; border-left: 3px solid var(--red);
}

.modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.modal-actions button { padding: 9px 20px; border: 1px solid #d7d7d7; background: #f8f8f8; border-radius: 2px; }
.modal-actions .primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.modal-actions .primary:hover { background: var(--blue-press); }
.modal-actions .primary[disabled] { opacity: .6; cursor: default; }

.toast {
	position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
	background: #252525; color: #fff;
	padding: 12px 22px; border-radius: 3px;
	font-size: 14px; z-index: 90;
	box-shadow: 0 6px 20px rgba(0,0,0,.25);
	max-width: calc(100vw - 40px);
}
.toast.bad { background: #8c0a21; }


/* ===================================================================
   RESPONSIVE

   Three layouts, not one layout squeezed:

     wide    (1200+)  four columns, as the design study shows
     medium  (941-1199) same four, narrowed
     tablet  (651-940) rail + folders + list; the reading pane overlays
     phone   (<=650)  ONE pane at a time; folders are a drawer, and the
                      reading pane is full screen

   On a phone the app rail is removed from the layout rather than narrowed:
   at 390px wide, a 49px rail is an eighth of the screen spent on two icons
   that the toolbar already offers.
   =================================================================== */

@media (max-width: 1199px) {
	.outlook-workspace { grid-template-columns: 62px 245px 415px minmax(200px, 1fr); }
	.command-toolbar { gap: 22px; }
	.toolbar-start { min-width: 210px; gap: 14px; }
	.folder-item { padding-left: 16px; font-size: 16px; }
	.list-tabs { gap: 20px; padding: 0 14px; }
	.message-top strong, .message-subject { font-size: 15px; }
	.reader-content { padding: 22px 26px 40px; }
}

/* ---- tablet: the reading pane overlays the list ---------------------- */

@media (max-width: 940px) {
	.outlook-topbar { height: 62px; }
	.waffle { width: 52px; height: 60px; }
	.topbar-logo { height: 32px; max-width: 150px; }
	.search-box { width: min(340px, 42vw); height: 40px; }
	.search-box input { font-size: 15px; }
	.avatar-button { width: 38px; height: 38px; font-size: 13px; margin: 0 10px 0 6px; }

	.outlook-workspace {
		grid-template-columns: 58px 195px minmax(0, 1fr);
		grid-template-rows: 64px minmax(0, 1fr);
	}
	.command-toolbar { grid-column: 2 / 4; gap: 14px; padding-left: 10px; }
	.toolbar-start { min-width: 0; }
	.toolbar-other { font-size: 14px; }
	.new-mail { font-size: 15px; height: 42px; }

	.folder-panel { grid-column: 2; }
	.list-panel { grid-column: 3; }

	.reader-panel {
		position: absolute; top: 64px; right: 0; bottom: 0; left: 58px;
		z-index: 10; display: none;
	}
	.reader-panel.mobile-visible { display: flex; }
	.reader-back { display: inline-flex !important; }
}

/* ---- phone: one pane at a time --------------------------------------- */

@media (max-width: 650px) {
	/* -- authentication screens --
	   The two panels become one column. The brand panel keeps its logo and
	   loses the selling points, so the form stays above the fold; the screen
	   scrolls rather than clipping when the keyboard shortens the viewport. */
	.auth-screen {
		justify-content: flex-start;
		padding: 0;
		overflow-y: auto;
	}

	.auth-card {
		flex-direction: column;
		width: 100%;
		box-shadow: none;
	}

	.auth-aside {
		flex: none;
		max-width: none;
		width: 100%;
		padding: 18px 20px;
		flex-direction: row;
		align-items: center;
		gap: 14px;
	}

	.auth-logo { height: 38px; padding: 5px 9px; align-self: center; }

	/* The headline and the three points are the first things to go: on a
	   phone they would push the form off the screen. */
	.auth-aside-title,
	.auth-points,
	.auth-aside-foot { display: none; }

	.auth-main { padding: 26px 20px 30px; }
	.auth-card-single .auth-main { padding: 26px 20px 30px; }

	.auth-head h1 { font-size: 22px; }
	.auth-head p { font-size: 13.5px; }

	/* 16px keeps iOS from zooming the page when a field takes focus. */
	.auth-main input[type="text"],
	.auth-main input[type="email"],
	.auth-main input[type="password"] {
		font-size: 16px;
		height: 46px;
	}

	.btn-primary { height: 48px; font-size: 16px; }

	.auth-footer {
		width: 100%;
		flex-direction: column;
		gap: 10px;
		text-align: center;
		padding: 20px 16px 26px;
		background: #fff;
	}
	.auth-footer-links { gap: 24px; }

	.auth-brand-row { margin-bottom: 20px; }
	.auth-logo-small { height: 34px; }

	/* -- top bar -- */
	.outlook-topbar { height: 56px; }
	.waffle { width: 44px; height: 54px; }
	.waffle-grid { grid-template-columns: repeat(3, 3.5px); gap: 2.5px; }
	.waffle-grid i { width: 3.5px; height: 3.5px; }

	.outlook-wordmark { padding: 0 6px 0 0; }
	.topbar-logo { height: 26px; max-width: 92px; padding: 3px 5px; }

	.search-box {
		flex: 1; width: auto; min-width: 0;
		height: 34px; padding: 0 10px; gap: 8px; margin-right: 4px;
	}
	.search-box input { font-size: 14px; }
	.search-icon svg { width: 17px; height: 17px; }

	.topbar-spacer { display: none; }
	.avatar-button { width: 34px; height: 34px; font-size: 12px; margin: 0 8px 0 4px; }
	.profile-menu { top: 56px; right: 6px; left: 6px; width: auto; }

	/* -- the rail goes; the toolbar already has Compose -- */
	.app-rail { display: none; }

	.outlook-workspace {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: 56px minmax(0, 1fr);
	}

	.command-toolbar {
		grid-column: 1; grid-row: 1;
		gap: 10px; padding: 0 10px;
		justify-content: flex-start;
	}
	.toolbar-start { gap: 8px; flex: none; }
	.new-mail { padding: 0 14px; height: 40px; font-size: 15px; border-radius: 4px; }
	.new-mail .icon { width: 19px; height: 19px; }

	/* Labels go, icons stay, and they sit at the right. */
	.toolbar-other { font-size: 0; gap: 0; padding: 8px 4px; }
	.toolbar-other .icon { width: 22px; height: 22px; }
	#markReadButton { margin-left: auto; }

	/* -- the list owns the screen -- */
	.list-panel { grid-column: 1; grid-row: 2; border-right: 0; box-shadow: none; }

	.list-tabs { height: 54px; min-height: 54px; gap: 18px; padding: 0 14px; }
	.tab-button { height: 54px; font-size: 15px; gap: 7px; }
	.tab-button .icon { width: 19px; height: 19px; }
	.filter-button { font-size: 14px; }

	.message-row { min-height: 88px; padding: 13px 12px 13px 10px; gap: 12px; }
	.sender-avatar { width: 38px; height: 38px; font-size: 13px; }
	.message-top strong { font-size: 15px; }
	.message-date { font-size: 12px; }
	.message-subject { font-size: 14px; margin-top: 3px; }
	.message-meta { font-size: 12.5px; margin-top: 3px; }

	/* -- folders: a drawer from the left edge --
	   The element still belongs to a grid column, and the column placement
	   beats the `left` of a shorthand, so the left edge is set on its own
	   and the grid row is pinned to keep it below the toolbar. */
	.folder-panel {
		grid-column: 1; grid-row: 2;
		position: fixed;
		top: 56px; bottom: 0;
		left: 0; right: auto;
		width: min(272px, 82vw);
		z-index: 60;
		background: #f8f8f8;
		border-right: 1px solid #e3e3e3;
		box-shadow: 4px 0 20px rgba(0, 0, 0, .2);
		transform: translateX(-102%);
		transition: transform .2s ease-out;
		overflow-y: auto;
	}
	.folder-panel.open { transform: none; }

	.section-head { padding: 16px 18px 12px; }
	.folder-item { height: 50px; padding: 0 18px; font-size: 16px; }

	/* The dimmed area beside an open drawer. It is a sibling so that a tap
	   on it reaches the document listener that closes the drawer. */
	.drawer-scrim {
		position: fixed; inset: 56px 0 0 0;
		background: rgba(0, 0, 0, .35);
		z-index: 55;
	}

	/* -- reading pane: full screen over everything -- */
	.reader-panel {
		position: fixed; inset: 56px 0 0 0;
		z-index: 40;
		background: #fafafa;
		display: none;
	}
	.reader-panel.mobile-visible { display: flex; flex-direction: column; }

	.reader-back {
		display: inline-flex !important;
		align-items: center; gap: 8px;
		margin: 0; padding: 12px 14px;
		font-size: 15px; color: var(--blue-dark);
		background: #fff; border: 0;
		border-bottom: 1px solid #ececec;
		width: 100%; justify-content: flex-start;
		position: sticky; top: 0; z-index: 2;
	}

	.reader-content { padding: 14px 14px 36px; }

	.reader-actions {
		gap: 0; padding-bottom: 12px; margin-bottom: 16px;
		justify-content: space-between;
	}
	/* Labels go so five actions fit without wrapping or scrolling. */
	.reader-actions button { font-size: 0; gap: 0; padding: 6px; }
	.reader-actions .icon { width: 22px; height: 22px; }

	.reader-subject { font-size: 19px; margin: 0 0 16px; }
	.reader-sender { flex-wrap: wrap; gap: 10px; }
	.reader-sender-info strong { font-size: 14px; }
	.reader-sender-info p { font-size: 12px; }
	.reader-date { margin-left: 0; width: 100%; font-size: 12px; }
	.reader-body-frame { margin-top: 16px; }

	.attach-items { flex-direction: column; }
	.attach-chip { width: 100%; }

	/* -- compose: a full sheet, not a floating box -- */
	.modal-overlay { padding: 0; align-items: stretch; }
	.modal {
		width: 100%; max-height: 100%; height: 100%;
		border-radius: 0;
	}
	.modal-head { padding: 14px 16px; }
	.modal-body { padding: 16px 14px 20px; }
	.modal-body textarea { min-height: 180px; }
	.modal-actions {
		position: sticky; bottom: 0;
		background: #fff; padding: 14px 0 4px;
		margin-top: 16px;
		border-top: 1px solid #eee;
	}
	.modal-actions button { flex: 1; padding: 12px 16px; }

	.toast { left: 12px; right: 12px; transform: none; bottom: 16px; text-align: center; }

	.list-footer { height: 52px; }
}

/* Very narrow phones: keep the toolbar from wrapping. */
@media (max-width: 380px) {
	.topbar-logo { max-width: 72px; }
	.new-mail { padding: 0 10px; font-size: 14px; }
	.new-mail .icon { display: none; }
	.message-row { padding-left: 8px; gap: 10px; }
	.sender-avatar { width: 34px; height: 34px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}