/*
 * Oderland SMTP & Postal Mailer, design direction 4a (from Claude Design).
 *
 * Loaded after smtp-postal-admin.css and dashboard.css, on the plugin's own pages only.
 * Every component rule is scoped to .smtp-postal-header / .smtp-postal-body, so nothing
 * leaks into the rest of wp-admin. The logs and accounts screens add body.tbl-a.
 */

/* === Fonts (bundled, SIL Open Font License; see ../fonts/*-OFL.txt) === */

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url("../fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* === Tokens === */

:root {
	--color-white: #fff;
	--color-bg: #faf7f5;
	--color-bg-hover: #f2ede8;
	--color-border: #e8e4e0;
	--color-border-light: #f2ede8;
	--color-text: #1a1a1a;
	--color-text-light: #3a3a3a;
	--color-text-muted: #6b6b6b;
	--color-primary: #cc2027;
	--color-primary-hover: #a8191f;
	--color-primary-dark: #8a1319;
	--color-primary-light: #fdf2f2;
	--color-success: #2f8a4a;
	--color-success-dark: #27743e;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 14px;
	--shadow-sm: none;
	--shadow-md: none;
	--shadow-lg: none;
	--transition: 150ms cubic-bezier(.4,0,.2,1); /* @kind other */
	--om-ink: #1a1a1a;
	--om-field-border: #8f8780;
	--om-sans: 'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
	--om-mono: 'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
	--om-ok: #6fb585;
	--om-ok-ink: #2f7a46;
	--om-ok-bg: #eef6f0;
	--om-warn: #e0b25e;
	--om-warn-ink: #8a5f1c;
	--om-warn-bg: #fbf4e6;
	--om-bad: #e2716c;
	--om-bad-ink: #b03a35;
	--om-bad-bg: #fcf0ef;
	--om-neu: #c9c2bb;
	--om-neu-ink: #3a3a3a;
	--om-neu-bg: #f4f0ec;
	--om-info: #7da3cc;
	--om-info-ink: #3c6694;
	--om-info-bg: #eef3f9;
}

/* === Type === */
.smtp-postal-header,
.smtp-postal-body,
.smtp-postal-body input,
.smtp-postal-body select,
.smtp-postal-body textarea,
.smtp-postal-body .button {
	font-family: var(--om-sans);
}

.smtp-postal-body {
	font-size: 14px;
	color: var(--color-text);
}

.smtp-postal-body h1.wp-heading-inline,
.smtp-postal-body .wrap > h1 {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--color-text);
	margin-inline-end: 12px;
}

.smtp-postal-body h2 {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--color-text);
}

.smtp-postal-body pre,
.smtp-postal-body code {
	font-family: var(--om-mono);
}

/* === Header: gradient band, tabs flush with the bottom edge, white underline on the active tab === */
.smtp-postal-header {
	background: linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);
	box-shadow: none;
}

.smtp-postal-header .header-brand {
	padding: 24px 36px 18px;
}

.smtp-postal-header .oderland-logo {
	height: 24px;
}

.smtp-postal-header .header-divider {
	background: rgba(255,255,255,.3);
	height: 20px;
}

.smtp-postal-header .header-brand h1 {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.smtp-postal-header .tabs {
	padding: 0 26px;
	gap: 0;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}

.smtp-postal-header .tabs .tab {
	border: 0;
	border-radius: 0;
	margin: 0 10px;
	padding: 8px 2px 13px;
	font-size: 13px;
	font-weight: 600;
	color: rgba(255,255,255,.9);
	background: transparent;
	white-space: nowrap;
	flex: none;
}

.smtp-postal-header .tabs .tab:hover {
	background: transparent;
	color: #fff;
}

.smtp-postal-header .tabs .tab.active {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 -3px 0 #fff;
}

.smtp-postal-header .tabs .tab:focus-visible {
	box-shadow: inset 0 0 0 2px rgba(255,255,255,.6);
	border-radius: 4px;
}

/* === Buttons: ink primary, white secondary, red only for destructive === */
.smtp-postal-body .button {
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	min-height: 34px;
	line-height: 24px;
	padding: 4px 14px;
	box-shadow: none;
}

.smtp-postal-body .button.button-primary:not(.button-link):not(.delete) {
	background: var(--om-ink);
	border-color: var(--om-ink);
	color: #fff;
	box-shadow: none;
}

.smtp-postal-body .button.button-primary:not(.button-link):not(.delete):hover,
.smtp-postal-body .button.button-primary:not(.button-link):not(.delete):focus {
	background: #000;
	border-color: #000;
	color: #fff;
}

.smtp-postal-body .button:not(.button-link):not(.delete):not(.button-primary) {
	background: #fff;
	border-color: var(--color-border);
	color: var(--color-text);
	box-shadow: none;
}

.smtp-postal-body .button:not(.button-link):not(.delete):not(.button-primary):hover {
	background: #fff;
	border-color: var(--om-ink);
	color: var(--color-text);
}

.smtp-postal-body .button.delete {
	border-radius: 8px;
	color: var(--om-bad-ink);
	border-color: #f0c9c9;
}

.smtp-postal-body .button.delete:hover {
	background: var(--om-bad)!important;
	border-color: var(--om-bad);
	color: #fff;
}

.smtp-postal-body .page-title-action {
	background: var(--om-ink)!important;
	border-color: var(--om-ink)!important;
	color: #fff!important;
	border-radius: 8px!important;
	font-weight: 600;
	padding: 6px 14px;
	top: -4px;
}

.smtp-postal-body .page-title-action:hover {
	background: #000!important;
	border-color: #000!important;
}

.smtp-postal-body .bounce-export-actions a,
.smtp-postal-body a {
	color: var(--om-ink);
	text-decoration-color: rgba(26,26,26,.3);
	text-underline-offset: 3px;
}

.smtp-postal-body a:hover {
	color: #000;
	text-decoration-color: currentColor;
}

/* === Inputs: ink focus, neutral ring === */
.smtp-postal-body input[type=text],
.smtp-postal-body input[type=password],
.smtp-postal-body input[type=email],
.smtp-postal-body input[type=number],
.smtp-postal-body input[type=url],
.smtp-postal-body input[type=tel],
.smtp-postal-body input[type=search],
.smtp-postal-body textarea,
.smtp-postal-body select {
	border-radius: 8px;
	/* 3.5:1 on white: form fields need a perceivable boundary (WCAG 1.4.11). */
	border-color: var(--om-field-border);
	min-height: 36px;
	font-size: 14px;
	outline-color: var(--om-ink);
	accent-color: var(--om-ink);
}

.smtp-postal-body input:hover,
.smtp-postal-body select:hover,
.smtp-postal-body textarea:hover {
	border-color: var(--color-text-muted);
}

.smtp-postal-body input:focus,
.smtp-postal-body select:focus,
.smtp-postal-body textarea:focus {
	border-color: var(--om-ink);
	box-shadow: 0 0 0 3px var(--color-border);
	outline: none;
}

.smtp-postal-body input[type=checkbox] {
	border-radius: 4px;
	border-color: var(--om-field-border);
	accent-color: var(--om-ink);
}

.smtp-postal-body input[type=checkbox]:checked {
	background: var(--om-ink);
	border-color: var(--om-ink);
}

.smtp-postal-body input[type=checkbox]:checked::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffffff' d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z'/%3E%3C/svg%3E");
}

.smtp-postal-body input[type=checkbox]:focus {
	box-shadow: 0 0 0 3px var(--color-border);
}

.smtp-postal-body .description {
	color: var(--color-text-muted);
}

/* === Forms + log details: form-table as a hairline card === */
.smtp-postal-body .form-table {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 14px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	margin-bottom: 8px;
}

.smtp-postal-body .form-table th {
	width: 200px;
	padding: 16px 16px 16px 24px;
	color: var(--color-text-muted);
	font-weight: 500;
}

.smtp-postal-body .form-table td {
	padding: 14px 24px 14px 0;
	font-weight: 500;
	color: var(--color-text);
}

.smtp-postal-body .form-table tr+tr>* {
	border-top: 1px solid var(--color-border-light);
}

.smtp-postal-body .form-table pre {
	margin: 0;
	padding: 10px 12px;
	background: var(--color-bg);
	border: 1px solid var(--color-border-light);
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.6;
	white-space: pre-wrap;
}

.smtp-postal-body h2+.form-table {
	margin-top: 8px;
}

/* === Service picker cards === */
.smtp-postal-body .radio-as-button-tabs {
	gap: 12px;
}

.smtp-postal-body .radio-as-button-tabs .container label {
	border-radius: 14px;
	border-color: var(--color-border);
	box-shadow: none;
	font-size: 15px;
	font-weight: 600;
}

.smtp-postal-body .radio-as-button-tabs .container label:hover {
	border-color: #d4cdc6;
	box-shadow: none;
	transform: none;
}

.smtp-postal-body .radio-as-button-tabs .radio-check {
	width: 24px;
	height: 24px;
	background: var(--color-border-light);
	box-shadow: inset 0 0 0 1px var(--color-border);
}

.smtp-postal-body .radio-as-button-tabs .container label .radio-check .icon .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
}

.smtp-postal-body .radio-as-button-tabs .container input[type=radio]:checked+label {
	border-color: var(--om-ink);
	box-shadow: 0 0 0 1px var(--om-ink);
	background: #fff;
}

.smtp-postal-body .radio-as-button-tabs .container input[type=radio]:checked+label .radio-check {
	background: var(--om-ink);
	box-shadow: none;
}

.smtp-postal-body .radio-as-button-tabs .container input[type=radio]:focus+label {
	box-shadow: 0 0 0 1px var(--om-ink),0 0 0 4px var(--color-border);
}

.smtp-postal-body .radio-label-icon[src$="/smtp.svg"] {
	width: 32px;
	height: 32px;
	max-height: 32px;
}

/* === List tables === */
.smtp-postal-body .wp-list-table {
	border: 1px solid var(--color-border);
	border-radius: 14px;
	border-collapse: separate;
	border-spacing: 0;
	box-shadow: none;
	overflow: hidden;
}

.smtp-postal-body .wp-list-table thead th,
.smtp-postal-body .wp-list-table thead td.check-column,
.smtp-postal-body .wp-list-table tfoot th,
.smtp-postal-body .wp-list-table tfoot td.check-column {
	background: var(--color-bg);
	color: var(--color-text-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--color-border);
	border-top: 0;
}

.smtp-postal-body .wp-list-table tfoot th,
.smtp-postal-body .wp-list-table tfoot td.check-column {
	border-top: 1px solid var(--color-border);
	border-bottom: 0;
}

.smtp-postal-body .wp-list-table thead th a,
.smtp-postal-body .wp-list-table tfoot th a {
	color: var(--color-text-muted);
}

.smtp-postal-body .wp-list-table thead th a:hover,
.smtp-postal-body .wp-list-table tfoot th a:hover,
.smtp-postal-body .wp-list-table thead th.sorted a {
	color: var(--color-text);
}

.smtp-postal-body .wp-list-table.striped>tbody>:nth-child(odd) {
	background: #fff;
}

.smtp-postal-body .wp-list-table.striped>tbody>:nth-child(even) {
	background: #fdfbfa;
}

.smtp-postal-body .wp-list-table tbody tr:hover {
	background: var(--color-bg)!important;
}

.smtp-postal-body .wp-list-table tbody td,
.smtp-postal-body .wp-list-table tbody th {
	border-top: 1px solid var(--color-border-light);
	color: var(--color-text);
	vertical-align: middle;
}

.smtp-postal-body .wp-list-table tbody td a:not(.dashicons):not(.btn) {
	color: var(--color-text);
	font-weight: 600;
}

.smtp-postal-body .wp-list-table .column-id,
.smtp-postal-body .wp-list-table .column-created_at {
	font-family: var(--om-mono);
	font-size: 12px;
	color: var(--color-text-light);
}

.smtp-postal-body .wp-list-table thead .column-id,
.smtp-postal-body .wp-list-table thead .column-created_at,
.smtp-postal-body .wp-list-table tfoot .column-id,
.smtp-postal-body .wp-list-table tfoot .column-created_at {
	font-family: var(--om-sans);
}

.smtp-postal-body .wp-list-table .sorting-indicator:before,
.smtp-postal-body .wp-list-table .sorting-indicators .sorting-indicator:before {
	color: currentColor!important;
}

.smtp-postal-body .wp-list-table .btn .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.smtp-postal-body .btn.icon-blue {
	color: var(--color-text-muted);
}

.smtp-postal-body .btn.icon-blue:hover {
	color: var(--om-ink);
}

.smtp-postal-body .btn.icon-red {
	color: var(--om-bad-ink);
}

.smtp-postal-body .btn.icon-green {
	color: var(--om-ok);
}

.smtp-postal-body .tablenav .tablenav-pages a {
	color: var(--om-ink);
	border-color: var(--color-border);
	border-radius: 6px;
	background: #fff;
}

.smtp-postal-body .tablenav .tablenav-pages .current-page {
	border-color: var(--color-border);
}

.smtp-postal-body .tablenav .tablenav-pages .current-page:focus {
	border-color: var(--om-ink);
	box-shadow: 0 0 0 3px var(--color-border);
}

.smtp-postal-body .tablenav .displaying-num {
	color: var(--color-text-muted);
}

/* === List table header + row actions (logs and accounts screens: body.tbl-a) === */
.tbl-a .smtp-postal-body .wp-list-table thead th,
.tbl-a .smtp-postal-body .wp-list-table thead td.check-column,
.tbl-a .smtp-postal-body .wp-list-table tfoot th,
.tbl-a .smtp-postal-body .wp-list-table tfoot td.check-column {
	background: #fff!important;
	color: var(--color-text-muted)!important;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	border-bottom: 1px solid var(--color-border);
}

.tbl-a .smtp-postal-body .wp-list-table thead th a,
.tbl-a .smtp-postal-body .wp-list-table tfoot th a {
	color: var(--color-text-muted)!important;
}

.tbl-a .smtp-postal-body .wp-list-table thead th.sorted a,
.tbl-a .smtp-postal-body .wp-list-table thead th a:hover {
	color: var(--color-text)!important;
}

.tbl-a .smtp-postal-body .wp-list-table.striped>tbody>:nth-child(even) {
	background: #fff;
}

.tbl-a .smtp-postal-body .wp-list-table td.column-actions {
	font-size: 13px;
	white-space: nowrap;
	position: relative;
}

.tbl-a .smtp-postal-body .wp-list-table .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	color: var(--color-text-muted)!important;
	text-decoration: none;
	vertical-align: middle;
}

.tbl-a .smtp-postal-body .wp-list-table .btn:hover {
	background: var(--color-bg-hover);
	color: var(--color-text)!important;
}

.tbl-a .smtp-postal-body .wp-list-table .btn.icon-red:hover {
	background: var(--om-bad-bg);
	color: var(--om-bad-ink)!important;
}

.tbl-a .smtp-postal-body .wp-list-table .btn.icon-green:hover {
	background: var(--om-ok-bg);
	color: var(--om-ok-ink)!important;
}

.tbl-a .smtp-postal-body .wp-list-table .om-row-btn {
	min-height: 28px!important;
	line-height: 20px!important;
	padding: 3px 12px!important;
	font-size: 12px!important;
	border-radius: 999px!important;
	vertical-align: middle;
}

.tbl-a .smtp-postal-body .wp-list-table td.column-actions .om-row-btn+.btn {
	margin-left: 4px;
}

.tbl-a .smtp-postal-body .wp-list-table td.column-actions .btn[aria-expanded=true] {
	background: var(--color-bg-hover);
	color: var(--color-text)!important;
}

/* === Row overflow menu (the "more actions" button in the actions column) === */
.smtp-postal-body .om-menu {
	position: absolute;
	right: 16px;
	bottom: calc(100% - 10px);
	z-index: 5;
	min-width: 168px;
	padding: 4px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(26,26,26,.10),0 1px 2px rgba(26,26,26,.06);
	display: flex;
	flex-direction: column;
	text-align: left;
}

.smtp-postal-body .om-menu a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500!important;
	color: var(--color-text)!important;
	text-decoration: none;
}

.smtp-postal-body .om-menu a:hover,
.smtp-postal-body .om-menu a:focus {
	background: var(--color-bg-hover);
	outline: none;
}

.smtp-postal-body .om-menu a .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	color: var(--color-text-muted);
}

.smtp-postal-body .om-menu hr {
	margin: 4px 2px;
	border: 0;
	border-top: 1px solid var(--color-border-light);
}

.smtp-postal-body .om-menu a.om-menu-danger,
.smtp-postal-body .om-menu a.om-menu-danger .dashicons {
	color: var(--om-bad-ink)!important;
}

.smtp-postal-body .om-menu a.om-menu-danger:hover,
.smtp-postal-body .om-menu a.om-menu-danger:focus {
	background: var(--om-bad-bg);
}

/* === Priority stepper: the number with up/down nudges, in the Priority column === */
.smtp-postal-body .om-priority {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.smtp-postal-body .om-priority-val {
	min-width: 16px;
	font: 500 13px var(--om-mono);
	color: var(--color-text);
	text-align: left; /* starts under the column header, like every other cell */
}

.smtp-postal-body .om-priority-steps {
	display: inline-flex;
	flex-direction: column;
	overflow: hidden;
}

.smtp-postal-body .om-priority-steps a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 12px;
	border-radius: 4px;
	color: var(--color-text-muted)!important;
	text-decoration: none;
}

.smtp-postal-body .om-priority-steps a:hover,
.smtp-postal-body .om-priority-steps a:focus {
	background: var(--color-bg-hover);
	color: var(--color-text)!important;
}

.smtp-postal-body .om-priority-steps .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	line-height: 14px;
}

/* === Notices: soft fill + status icon, no side stripe ===
 * Block layout with the icon in the start padding, so notices with several children
 * (the DNS warnings: heading, list, paragraph, dismiss form) stack instead of lining up. */
.smtp-postal-body .notice {
	position: relative;
	display: block;
	margin: 0 0 12px;
	padding-block: 12px;
	padding-inline: 42px 44px;
	border: 1px solid transparent!important;
	border-radius: 10px;
	box-shadow: none;
	font-size: 13.5px;
	line-height: 1.5;
}

.smtp-postal-body .notice p {
	margin: 0;
	padding: 0;
	font-size: 13.5px;
	line-height: 1.5;
}

.smtp-postal-body .notice > * + * {
	margin-block-start: 6px;
}

.smtp-postal-body .notice::before {
	position: absolute;
	inset-block-start: 13px;
	inset-inline-start: 14px;
	font: normal 18px/1 dashicons;
}

.smtp-postal-body .notice .notice-dismiss {
	top: 6px;
	right: auto;
	inset-inline-end: 6px;
	padding: 6px;
	border-radius: 8px;
}

.smtp-postal-body .notice .notice-dismiss:before {
	color: var(--color-text-muted);
	font-size: 16px;
}

.smtp-postal-body .notice .notice-dismiss:hover {
	background: rgba(26,26,26,.06);
}

.smtp-postal-body .notice-success {
	background: var(--om-ok-bg)!important;
}

.smtp-postal-body .notice-success::before {
	content: "\f147";
	color: var(--om-ok-ink);
}

.smtp-postal-body .notice-error {
	background: var(--om-bad-bg)!important;
}

.smtp-postal-body .notice-error::before {
	content: "\f534";
	color: var(--om-bad-ink);
}

.smtp-postal-body .notice-warning {
	background: var(--om-warn-bg)!important;
}

.smtp-postal-body .notice-warning::before {
	content: "\f534";
	color: var(--om-warn-ink);
}

.smtp-postal-body .notice-info {
	background: var(--om-info-bg)!important;
}

.smtp-postal-body .notice-info::before {
	content: "\f348";
	color: var(--om-info-ink);
}

/* === Events (log details + webhook debug): borderless rows with a status light === */
.smtp-postal-body .event {
	--dot: var(--om-neu);
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	overflow: visible;
}

.smtp-postal-body .event--success {
	--dot: var(--om-ok);
}

.smtp-postal-body .event--warning {
	--dot: var(--om-warn);
}

.smtp-postal-body .event--danger {
	--dot: var(--om-bad);
}

.smtp-postal-body .event+.event {
	border-top: 1px solid var(--color-border-light);
}

.smtp-postal-body .event:hover {
	box-shadow: none;
}

.smtp-postal-body .event-header {
	background: transparent;
	color: var(--color-text);
	padding: 10px 2px;
	font-weight: 600;
}

.smtp-postal-body .event-header:hover {
	background: transparent;
	color: #000;
}

.smtp-postal-body .event-header:focus {
	outline: none;
}

.smtp-postal-body .event-header:focus-visible {
	outline: 2px solid var(--om-ink);
	outline-offset: 2px;
	border-radius: 4px;
}

.smtp-postal-body .event .kind,
.smtp-postal-body .event-header>div:first-child {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.smtp-postal-body .event .kind::before,
.smtp-postal-body .event-header > div:first-child::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--dot);
	box-shadow: 0 0 0 3px color-mix(in srgb,var(--dot) 18%,transparent);
}

.smtp-postal-body .event-header .timestamp,
.smtp-postal-body .event-header>div:first-child>span:first-child {
	font: 500 12px var(--om-mono);
	color: var(--color-text-muted);
}

.smtp-postal-body .event-header .chevron {
	color: var(--color-text-muted);
	font-size: 16px;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	margin-left: 8px;
}

.smtp-postal-body .om-events-toolbar {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 8px;
}

.smtp-postal-body .event-body:has(*) {
	margin: 0 0 12px 17px;
	padding: 10px 14px;
	background: var(--color-bg);
	border: 1px solid var(--color-border-light);
	border-radius: 8px;
}

.smtp-postal-body .event-payload {
	padding: 2px 0!important;
	border: 0;
}

.smtp-postal-body .event-payload-key {
	flex: 0 0 80px;
	font: 500 12px/1.7 var(--om-mono);
	color: var(--color-text-muted);
}

.smtp-postal-body .event-payload-value {
	font: 500 12px/1.7 var(--om-mono);
}

.smtp-postal-body .webhook-debug-badge {
	margin: 0;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.smtp-postal-body .webhook-debug-badge--success {
	background: var(--om-ok-bg);
	color: var(--om-ok-ink);
}

.smtp-postal-body .webhook-debug-badge--auth_failure {
	background: var(--om-bad-bg);
	color: var(--om-bad-ink);
}

.smtp-postal-body .webhook-debug-badge--error {
	background: var(--om-warn-bg);
	color: var(--om-warn-ink);
}

.smtp-postal-body .webhook-debug-badge--filtered {
	background: var(--om-neu-bg);
	color: var(--om-neu-ink);
}

/* === Dashboard === */
.smtp-postal-body .stats-range-selector {
	display: flex!important;
	gap: 0!important;
	align-items: center;
	background: none;
	padding: 0;
	margin: 16px 0;
}

.smtp-postal-body .stats-range-selector .button.stats-range-btn {
	position: relative;
	isolation: isolate;
	margin: 0!important;
	border: 0!important;
	border-radius: 0!important;
	background: var(--color-bg-hover,#f1ece8)!important;
	color: var(--color-text-light)!important;
	box-shadow: none!important;
	min-height: 36px;
	line-height: 36px!important;
	padding: 0 15px!important;
	font-weight: 500;
}

.smtp-postal-body .stats-range-selector .button.stats-range-btn:first-child {
	border-radius: 999px 0 0 999px!important;
	padding-left: 18px!important;
}

.smtp-postal-body .stats-range-selector .button.stats-range-btn[data-range=all] {
	border-radius: 0 999px 999px 0!important;
	padding-right: 18px!important;
}

.smtp-postal-body .stats-range-selector .button.stats-range-btn:hover {
	color: var(--color-text)!important;
}

.smtp-postal-body .stats-range-selector .button.stats-range-btn.active {
	color: var(--color-text)!important;
	font-weight: 600;
}

.smtp-postal-body .stats-range-selector .button.stats-range-btn.active::before {
	content: "";
	position: absolute;
	inset: 3px;
	z-index: -1;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 1px 2px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04);
}

/* Keyboard focus only: the track has no border or shadow for core's ring to use. */
.smtp-postal-body .stats-range-selector .button.stats-range-btn:focus-visible {
	outline: 2px solid var(--om-ink);
	outline-offset: -2px;
	border-radius: 999px!important;
}

.smtp-postal-body .stats-range-selector #stats-export-csv:focus-visible {
	outline: 2px solid var(--om-ink);
	outline-offset: 1px;
}

.smtp-postal-body .stats-range-selector #stats-export-csv {
	margin: 0 0 0 12px!important;
	border-radius: 999px!important;
	min-height: 36px;
	line-height: 34px!important;
	padding: 0 16px!important;
	background: #fff!important;
	border: 1px solid var(--color-border)!important;
	color: var(--color-text)!important;
	box-shadow: none!important;
}

.smtp-postal-body .stats-range-selector #stats-export-csv:hover {
	background: var(--color-bg-hover,#f1ece8)!important;
}

.smtp-postal-body .stats-cards {
	gap: 12px;
}

.smtp-postal-body .stats-card {
	text-align: left;
	border-color: var(--color-border);
	border-radius: 14px;
	box-shadow: none;
	padding: 20px 22px;
}

.smtp-postal-body .stats-card:hover {
	box-shadow: none;
	border-color: #d4cdc6;
}

.smtp-postal-body .stats-card-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--color-text-muted);
}

.smtp-postal-body .stats-card-value {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.smtp-postal-body .stats-card-value--success {
	color: var(--om-ok-ink);
}

.smtp-postal-body .stats-card-value--danger {
	color: var(--om-bad-ink);
}

.smtp-postal-body .stats-card-value--warning {
	color: var(--om-warn-ink);
}

.smtp-postal-body [class*="-container"][class^="stats-"] {
	border-color: var(--color-border);
	border-radius: 14px;
	box-shadow: none;
	padding: 22px 24px;
}

.smtp-postal-body [class^="stats-"] .wp-list-table {
	border: 0;
	border-radius: 0;
}

.smtp-postal-body [class^="stats-"] .wp-list-table thead th {
	background: transparent;
}

.smtp-postal-body .stats-account-type {
	font: 500 12px var(--om-mono);
	background: var(--om-neu-bg);
	color: var(--om-neu-ink);
	border-radius: 6px;
}

.smtp-postal-body .stats-error-message,
.smtp-postal-body .stats-link-url {
	font-family: var(--om-mono);
	background: var(--color-bg);
	border-color: var(--color-border);
	border-radius: 6px;
}

.smtp-postal-body .stats-success-rate--high {
	color: var(--om-ok-ink);
}

.smtp-postal-body .stats-success-rate--medium {
	color: var(--om-warn-ink);
}

.smtp-postal-body .stats-success-rate--low {
	color: var(--om-bad-ink);
}

/* === Plugin integration (not in the Claude Design file) === */
.smtp-postal-body .om-menu[hidden] {
	display: none!important;
}

.smtp-postal-body .om-menu.om-menu--fixed {
	position: fixed;
	right: auto;
	bottom: auto;
}

.smtp-postal-body .om-page-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
}

.smtp-postal-body .om-page-head h1.wp-heading-inline {
	margin-inline-end: auto;
}

.smtp-postal-body .wp-list-table button.btn {
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.smtp-postal-body .wp-list-table button.btn:focus-visible {
	outline: 2px solid var(--om-ink);
	outline-offset: 1px;
}

.smtp-postal-body .om-mail-body {
	display: block;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	background: #fff;
}

.smtp-postal-body .om-menu a:focus,
.smtp-postal-body .om-priority-steps a:focus {
	box-shadow: none;
}

.smtp-postal-body .om-menu a:focus-visible,
.smtp-postal-body .om-priority-steps a:focus-visible {
	box-shadow: inset 0 0 0 2px var(--om-ink);
}

.smtp-postal-body .notice a {
	color: var(--om-ink);
}