/* Bond Account 1.1.0
   Written in the theme's own language: white paper, Inter, one blue for
   anything you can act on. Every value reads a Bond token first and falls back
   to the same number the theme sets, so the member area looks the same whether
   the theme stylesheet is loaded or not. */

.bond-account {
	--ba-ink: var(--ink, #1d1d1f);
	--ba-gray: var(--gray, #6e6e73);
	--ba-gray-2: var(--gray-2, #86868b);
	--ba-hair: var(--hair, #e8e8ed);
	--ba-soft: var(--bg-soft, #f5f5f7);
	--ba-blue: var(--blue, #0071e3);
	--ba-blue-dark: var(--blue-dark, #0060c2);

	/* The green the theme already uses when an ATS check passes. */
	--ba-green: #1fa463;

	/* The one token this plugin adds. An overdue follow-up is the only thing
	   in the member area that has to raise its voice, and the theme has no
	   alert colour of its own. */
	--ba-due: #c7362b;
	--ba-due-soft: #fdeeec;

	--ba-card-sh: var(--card-sh, 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 24px -8px rgba(0, 0, 0, 0.06));
	--ba-sheet-sh: var(--sheet-sh, 0 2px 4px rgba(0, 0, 0, 0.04), 0 24px 48px -12px rgba(0, 0, 0, 0.12), 0 64px 120px -32px rgba(0, 0, 0, 0.18));

	color: var(--ba-ink);
	font-variant-numeric: tabular-nums;
}

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

/* When the shortcode sits in an ordinary page, the theme wraps it in the
   720px column meant for prose. The board needs the full measure, so it steps
   out with margins rather than a transform, which would break the fixed
   drawer by turning its ancestor into a containing block. */
.entry-content .bond-account {
	max-width: none;
	margin-inline: calc(50% - 50vw);
	padding-inline: max(var(--step, 28px), calc(50vw - var(--wrap, 1180px) / 2));
	font-size: 16px;
}

/* Breathing room when the member area owns the whole page. */
.bond-account-shell {
	padding-block: 44px 76px;
}

.bond-account .ba-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ----------------------------------------------------------------- head */

.bond-account .ba-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	padding-bottom: 26px;
}

.bond-account .ba-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ba-gray);
	margin: 0 0 10px;
}

.bond-account .ba-title {
	margin: 0;
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.1;
}

.bond-account .ba-sub {
	margin: 14px 0 0;
	max-width: 52ch;
	color: var(--ba-gray);
	font-size: 17px;
	line-height: 1.55;
}

.bond-account .ba-sub b {
	color: var(--ba-ink);
	font-weight: 600;
}

/* Fourteen days of rhythm: the only chart on the page, and it answers the
   question a search actually has, which is whether anything moved. */

.bond-account .ba-week {
	flex: 0 0 auto;
	text-align: right;
}

.bond-account .ba-week-bars {
	display: flex;
	align-items: flex-end;
	gap: 5px;
	height: 48px;
}

.bond-account .ba-week-bars i {
	display: block;
	width: 8px;
	min-height: 3px;
	border-radius: 100px;
	background: var(--ba-hair);
	transition: height 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.bond-account .ba-week-bars i.has {
	background: var(--ba-blue);
}

.bond-account .ba-week-label {
	margin: 12px 0 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ba-gray-2);
}

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

.bond-account .ba-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 18px 0 24px;
	border-top: 1px solid var(--ba-hair);
}

.bond-account .ba-tabs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

/* Pills, the shape the theme already uses for pagination and for the header
   action, so the switch reads as part of the site rather than as a widget. */
.bond-account .ba-tab {
	appearance: none;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	color: var(--ba-gray);
	background: #fff;
	border: 1px solid var(--ba-hair);
	border-radius: 100px;
	padding: 7px 15px;
	transition: background 0.2s, color 0.2s;
}

.bond-account .ba-tab:hover {
	color: var(--ba-ink);
	background: var(--ba-soft);
}

.bond-account .ba-tab.is-on {
	background: var(--ba-ink);
	border-color: var(--ba-ink);
	color: #fff;
	font-weight: 600;
}

.bond-account .ba-bar-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bond-account .ba-search input {
	width: 230px;
	max-width: 46vw;
	font: inherit;
	font-size: 14px;
	color: var(--ba-ink);
	background: #fff;
	border: 1px solid var(--ba-hair);
	border-radius: 100px;
	padding: 9px 16px;
}

.bond-account .ba-search input::placeholder {
	color: var(--ba-gray-2);
}

.bond-account .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	background: var(--ba-blue);
	color: #fff;
	padding: 10px 22px;
	border: 0;
	border-radius: 100px;
	cursor: pointer;
	transition: background 0.2s;
}

.bond-account .btn:hover {
	background: var(--ba-blue-dark);
	color: #fff;
}

.bond-account .btn.ghost {
	background: #fff;
	color: var(--ba-ink);
	border: 1px solid var(--ba-hair);
}

.bond-account .btn.ghost:hover {
	background: var(--ba-soft);
	color: var(--ba-ink);
}

.bond-account .btn.danger {
	background: none;
	color: var(--ba-due);
	margin-left: auto;
	padding-inline: 10px;
}

.bond-account .btn.danger:hover {
	background: var(--ba-due-soft);
	color: var(--ba-due);
}

.bond-account .ba-link {
	color: var(--ba-blue);
	font-size: 14px;
	font-weight: 500;
}

.bond-account .ba-link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bond-account .ba-flash {
	margin: 0 0 20px;
	padding: 11px 18px;
	border-radius: 100px;
	background: var(--ba-soft);
	color: var(--ba-ink);
	font-size: 14px;
	display: inline-block;
}

/* display on the class would otherwise beat the hidden attribute. */
.bond-account .ba-flash[hidden] {
	display: none;
}

.bond-account .ba-flash.is-bad {
	background: var(--ba-due-soft);
	color: var(--ba-due);
}

/* ---------------------------------------------------------------- views */

.bond-account .ba-view[hidden] {
	display: none;
}

/* ---------------------------------------------------------------- board */

.bond-account .ba-board {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}

.bond-account .ba-col {
	background: var(--ba-soft);
	border-radius: 20px;
	padding: 16px 14px 14px;
	min-height: 190px;
}

.bond-account .ba-col-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0 4px 12px;
}

.bond-account .ba-col-head h2 {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ba-gray);
}

.bond-account .ba-count {
	font-size: 13px;
	font-weight: 600;
	color: var(--ba-gray-2);
}

.bond-account .ba-drop {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 64px;
	border-radius: 16px;
	transition: box-shadow 0.15s ease;
}

.bond-account .ba-drop.is-over {
	box-shadow: inset 0 0 0 2px var(--ba-blue);
}

/* A card is a small sheet of paper, like everything else on this site. The
   rule down its left edge is the clock: it fills as the application sits
   untouched and turns red once the promised next step is past due. */

.bond-account .ba-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--ba-hair);
	border-radius: 16px;
	padding: 15px 16px 14px 19px;
	box-shadow: var(--ba-card-sh);
	cursor: grab;
	overflow: hidden;
	transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.25s;
}

.bond-account .ba-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 18px 36px -14px rgba(0, 0, 0, 0.16);
}

.bond-account .ba-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(
		to top,
		var(--ba-blue) 0,
		var(--ba-blue) var(--age, 8%),
		var(--ba-hair) var(--age, 8%)
	);
}

/* A closed application has no clock left to run. */
.bond-account .ba-card[data-stage="closed"]::before {
	background: var(--ba-hair);
}

.bond-account .ba-card.is-due::before {
	background: var(--ba-due);
}

.bond-account .ba-card.dragging {
	opacity: 0.4;
}

.bond-account .ba-card h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

.bond-account .ba-card p {
	margin: 4px 0 0;
	font-size: 13.5px;
	color: var(--ba-gray);
	line-height: 1.45;
}

.bond-account .ba-card-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 11px;
}

.bond-account .ba-chip {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	color: var(--ba-gray);
	background: var(--ba-soft);
	border-radius: 100px;
	padding: 3px 11px;
}

.bond-account .ba-chip.due {
	background: var(--ba-due-soft);
	color: var(--ba-due);
	font-weight: 600;
}

.bond-account .ba-chip.good {
	background: rgba(31, 164, 99, 0.12);
	color: var(--ba-green);
	font-weight: 600;
}

.bond-account .ba-empty {
	padding: 12px 6px;
	margin: 0;
	font-size: 13.5px;
	color: var(--ba-gray-2);
	line-height: 1.5;
}

.bond-account .ba-legend {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 22px 0 0;
	font-size: 13.5px;
	color: var(--ba-gray-2);
	line-height: 1.5;
	max-width: 96ch;
}

.bond-account .ba-legend i {
	display: inline-block;
	width: 3px;
	height: 24px;
	border-radius: 100px;
	flex: 0 0 auto;
	background: linear-gradient(to top, var(--ba-blue) 0, var(--ba-blue) 55%, var(--ba-hair) 55%);
}

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

.bond-account .ba-table-wrap {
	overflow-x: auto;
	background: #fff;
	border: 1px solid var(--ba-hair);
	border-radius: 20px;
	box-shadow: var(--ba-card-sh);
}

.bond-account .ba-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.bond-account .ba-table th {
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ba-gray);
	padding: 16px 20px;
	border-bottom: 1px solid var(--ba-hair);
	cursor: pointer;
	white-space: nowrap;
}

.bond-account .ba-table th:hover,
.bond-account .ba-table th.sorted {
	color: var(--ba-ink);
}

.bond-account .ba-table td {
	padding: 15px 20px;
	border-bottom: 1px solid var(--ba-hair);
	vertical-align: top;
}

.bond-account .ba-table tr:last-child td {
	border-bottom: 0;
}

.bond-account .ba-row {
	cursor: pointer;
}

.bond-account .ba-row:hover {
	background: var(--ba-soft);
}

.bond-account .ba-stage {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 500;
	background: var(--ba-soft);
	color: var(--ba-gray);
}

.bond-account .ba-stage[data-stage="interview"] {
	background: rgba(0, 113, 227, 0.1);
	color: var(--ba-blue);
	font-weight: 600;
}

.bond-account .ba-stage[data-stage="offer"] {
	background: rgba(31, 164, 99, 0.12);
	color: var(--ba-green);
	font-weight: 600;
}

.bond-account .ba-table-foot {
	margin: 18px 0 0;
}

/* ------------------------------------------------------------- insights */

.bond-account .ba-insights {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}

.bond-account .ba-panel {
	background: #fff;
	border: 1px solid var(--ba-hair);
	border-radius: 20px;
	padding: 28px;
	box-shadow: var(--ba-card-sh);
}

.bond-account .ba-panel h2 {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.1;
}

.bond-account .ba-panel .ba-note {
	margin: 0 0 22px;
	font-size: 14.5px;
	color: var(--ba-gray);
	line-height: 1.5;
}

.bond-account .ba-funnel {
	display: grid;
	gap: 12px;
}

.bond-account .ba-funnel-row {
	display: grid;
	grid-template-columns: 104px 1fr 32px;
	align-items: center;
	gap: 14px;
	font-size: 14px;
}

.bond-account .ba-funnel-bar {
	height: 10px;
	border-radius: 100px;
	background: var(--ba-soft);
	overflow: hidden;
}

.bond-account .ba-funnel-bar span {
	display: block;
	height: 100%;
	background: var(--ba-blue);
	border-radius: 100px;
	transition: width 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.bond-account .ba-funnel-num {
	font-weight: 600;
	text-align: right;
	color: var(--ba-gray);
}

.bond-account .ba-stat-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 26px;
}

.bond-account .ba-stat b {
	display: block;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.05;
}

.bond-account .ba-stat span {
	display: block;
	margin-top: 6px;
	font-size: 13.5px;
	color: var(--ba-gray);
	line-height: 1.45;
}

.bond-account .ba-panel-wide {
	grid-column: 1 / -1;
}

.bond-account .ba-sources {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bond-account .ba-panel-wide .ba-sources {
	columns: 2;
	column-gap: 40px;
}

.bond-account .ba-sources li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--ba-hair);
	font-size: 15px;
	break-inside: avoid;
}

.bond-account .ba-sources b {
	font-weight: 600;
	color: var(--ba-gray);
}

/* ------------------------------------------------------------ documents */

.bond-account .ba-docs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}

.bond-account .ba-doc {
	background: #fff;
	border: 1px solid var(--ba-hair);
	border-radius: 20px;
	padding: 24px;
	box-shadow: var(--ba-card-sh);
	transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.25s;
}

.bond-account .ba-doc:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 18px 36px -14px rgba(0, 0, 0, 0.16);
}

.bond-account .ba-doc h3 {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.015em;
}

.bond-account .ba-doc p {
	margin: 0 0 14px;
	font-size: 13.5px;
	color: var(--ba-gray);
}

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

.bond-account .ba-form {
	display: grid;
	gap: 16px;
}

.bond-account .ba-form-narrow {
	max-width: 480px;
}

.bond-account .ba-field {
	display: grid;
	gap: 7px;
}

.bond-account .ba-field > span {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ba-gray);
}

.bond-account .ba-field input,
.bond-account .ba-field select,
.bond-account .ba-field textarea {
	width: 100%;
	font: inherit;
	font-size: 15px;
	color: var(--ba-ink);
	background: #fff;
	border: 1px solid var(--ba-hair);
	border-radius: 12px;
	padding: 11px 14px;
}

.bond-account .ba-field input:focus,
.bond-account .ba-field select:focus,
.bond-account .ba-field textarea:focus {
	border-color: var(--ba-blue);
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.14);
}

.bond-account .ba-field textarea {
	resize: vertical;
	line-height: 1.5;
}

.bond-account .ba-field-pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.bond-account .ba-form-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 6px;
}

/* ---------------------------------------------------------------- sheet */

.bond-account .ba-sheet {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	justify-content: flex-end;
}

.bond-account .ba-sheet[hidden] {
	display: none;
}

.bond-account .ba-sheet-scrim {
	position: absolute;
	inset: 0;
	background: rgba(29, 29, 31, 0.28);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	animation: ba-fade 0.2s ease;
}

.bond-account .ba-sheet-panel {
	position: relative;
	width: min(480px, 100%);
	height: 100%;
	overflow-y: auto;
	background: #fff;
	border-radius: 24px 0 0 24px;
	box-shadow: var(--ba-sheet-sh);
	padding: 26px 28px 44px;
	animation: ba-slide 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.bond-account .ba-sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 22px;
}

.bond-account .ba-sheet-head h2 {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.025em;
}

.bond-account .ba-icon-btn {
	appearance: none;
	border: 1px solid var(--ba-hair);
	background: #fff;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: var(--ba-gray);
}

.bond-account .ba-icon-btn:hover {
	background: var(--ba-soft);
	color: var(--ba-ink);
}

@keyframes ba-slide {
	from {
		translate: 26px 0;
		opacity: 0;
	}
}

@keyframes ba-fade {
	from {
		opacity: 0;
	}
}

/* ----------------------------------------------------------------- gate */

.bond-account-gate .ba-gate-head {
	max-width: 60ch;
	padding-bottom: 30px;
}

.bond-account-gate .ba-gate {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	align-items: start;
	padding-bottom: 20px;
}

.bond-account-gate .ba-gate-card {
	background: #fff;
	border: 1px solid var(--ba-hair);
	border-radius: 20px;
	padding: 28px 30px 26px;
	box-shadow: var(--ba-card-sh);
}

/* Creating an account is the action most visitors here need, so it carries
   the weight: the sheet shadow the theme uses for paper in the hero. */
.bond-account-gate .ba-gate-card-lead {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 24px 48px -16px rgba(0, 0, 0, 0.14);
}

.bond-account-gate .ba-gate-card h2 {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.1;
}

.bond-account-gate .ba-gate-note {
	margin: 0 0 22px;
	font-size: 14.5px;
	color: var(--ba-gray);
}

.bond-account-gate .ba-hint {
	font-size: 12.5px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ba-gray-2);
}

/* wp_login_form prints its own markup, so it is styled where it lands. */
.bond-account-gate .ba-gate-card label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ba-gray);
	margin-bottom: 16px;
}

.bond-account-gate .ba-gate-card .login-remember label {
	letter-spacing: 0;
	text-transform: none;
	font-size: 14px;
	font-weight: 400;
	color: var(--ba-gray);
}

.bond-account-gate .ba-gate-card input[type="text"],
.bond-account-gate .ba-gate-card input[type="email"],
.bond-account-gate .bond-account-gate .ba-gate-card input[type="password"],
.bond-account-gate .ba-gate-card input[type="password"] {
	width: 100%;
	font: inherit;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	margin-top: 7px;
	padding: 11px 14px;
	border: 1px solid var(--ba-hair);
	border-radius: 12px;
	background: #fff;
	color: var(--ba-ink);
}

.bond-account-gate .ba-gate-card input:focus {
	border-color: var(--ba-blue);
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.14);
}

.bond-account-gate .ba-gate-card input[type="checkbox"] {
	width: auto;
	margin: 0 6px 0 0;
}

.bond-account-gate .ba-gate-card input[type="submit"] {
	appearance: none;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	padding: 11px 26px;
	border: 0;
	border-radius: 100px;
	background: var(--ba-blue);
	color: #fff;
}

.bond-account-gate .ba-gate-card input[type="submit"]:hover {
	background: var(--ba-blue-dark);
}

.bond-account-gate .ba-gate-links {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin: 16px 0 0;
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 1080px) {
	.bond-account .ba-board {
		grid-template-columns: repeat(5, minmax(230px, 1fr));
		overflow-x: auto;
		padding-bottom: 10px;
	}
}

@media (max-width: 900px) {
	.bond-account .ba-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
	}

	.bond-account .ba-week {
		text-align: left;
	}

	.bond-account .ba-board {
		grid-template-columns: repeat(5, 78vw);
		gap: 14px;
		scroll-snap-type: x mandatory;
	}

	.bond-account .ba-col {
		scroll-snap-align: start;
	}

	.bond-account .ba-insights,
	.bond-account .ba-field-pair,
	.bond-account .ba-stat-grid,
	.bond-account-gate .ba-gate {
		grid-template-columns: minmax(0, 1fr);
	}

	.bond-account .ba-panel-wide .ba-sources {
		columns: 1;
	}

	.bond-account .ba-bar-actions {
		width: 100%;
	}

	.bond-account .ba-search {
		flex: 1;
	}

	.bond-account .ba-search input {
		width: 100%;
		max-width: none;
	}

	.bond-account .ba-sheet-panel {
		width: 100%;
		border-radius: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bond-account .ba-card:hover,
	.bond-account .ba-doc:hover {
		transform: none;
	}

	.bond-account * {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}