/* =========================================================================
   BuyTides — affiliate dashboard (/affiliate-dashboard/)
   =========================================================================

   Scoped to .btad rather than to a page-id class so the shortcode can be
   dropped on a second page without the design going missing.

   The palette below is the approved design's, remapped onto the live brand
   tokens: the source file was drawn against the previous navy (#0b2c4d), and
   using it verbatim would leave the page a shade off the header and footer
   that sit directly above and below it.

   Two shells exist sitewide, so nothing here hangs off .wp-site-blocks.
   ========================================================================= */

.btad {
	--btad-navy: #2b3754;
	--btad-navy-mid: #164a7a;
	--btad-navy-deep: #08213a;
	--btad-navy-hover: #3a4a6e;
	--btad-cyan: #1fc8e3;
	--btad-cyan-bright: #6fe4f2;
	--btad-cyan-tint: #eaf7fb;
	--btad-teal: #1b7fa8;
	--btad-line: #dde7ee;
	--btad-mist: #eef2f4;
	--btad-ink: #4b6479;
	--btad-ink-soft: #7c93a3;
	--btad-ink-faint: #9cb0bd;

	--btad-ok-bg: #e7f7ee;
	--btad-ok-fg: #166f45;
	--btad-warn-bg: #fdf3e3;
	--btad-warn-fg: #8a5a0f;
	--btad-bad-bg: #fbecec;
	--btad-bad-fg: #8c2b2b;
	--btad-flat-bg: #eef2f4;

	--btad-sans: "Inter", system-ui, -apple-system, sans-serif;
	--btad-display: "Outfit", "Inter", system-ui, sans-serif;

	font-family: var(--btad-sans);
	color: var(--btad-navy);
	line-height: normal;
}

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

.btad__wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 48px);
}

.btad h1,
.btad h2,
.btad h3 {
	font-family: var(--btad-display);
	font-weight: 600;
	letter-spacing: -0.028em;
	margin: 0;
	text-wrap: balance;
}

.btad p {
	margin: 0;
	text-wrap: pretty;
}

/* Buttons are excluded by selector rather than out-specified later: a bare
   `.btad a` rule (0-1-1) outranks `.btad-btn` (0-1-0), so every anchor styled
   as a button was taking the link colour, and `.btad a:hover` would have put
   navy text on the navy primary button. The tab links are excluded for the\n   same reason: this selector is specific enough to outrank .btad-tab.is-on,\n   which would leave both tabs the link colour and no visible active state. */
.btad a:not([class*="btad-btn"]):not(.btad-tab) {
	color: var(--btad-teal);
	text-decoration: none;
}

.btad a:not([class*="btad-btn"]):not(.btad-tab):hover {
	color: var(--btad-navy);
}

.btad a.btad-btn {
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */

.btad-hero {
	background: var(--btad-navy);
	background-image: radial-gradient(110% 90% at 92% 0%, var(--btad-navy-mid) 0%, rgba(43, 55, 84, 0) 62%);
	color: #fff;
}

.btad-hero__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	padding-top: clamp(34px, 4vw, 56px);
	padding-bottom: clamp(34px, 4vw, 56px);
}

.btad-crumbs {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.6);
}

.btad-crumbs a {
	color: rgba(255, 255, 255, 0.6);
}

.btad-crumbs a:hover {
	color: #fff;
}

.btad-crumbs__here {
	color: var(--btad-cyan-bright);
}

.btad-hero__title {
	margin: 14px 0 10px;
	font-size: clamp(32px, 4vw, 50px);
	line-height: 1.05;
}

.btad-hero__copy {
	font-size: 16.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.8);
	max-width: 560px;
}

.btad-idcard {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.07);
}

.btad-idcard__avatar {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--btad-cyan-bright);
	color: var(--btad-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--btad-display);
	font-size: 19px;
	font-weight: 600;
}

.btad-idcard__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.btad-idcard__name {
	font-family: var(--btad-display);
	font-size: 16.5px;
	font-weight: 600;
}

.btad-idcard__since {
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.62);
}

.btad-idcard__meta {
	font-size: 13px;
	color: var(--btad-cyan-bright);
}

/* -------------------------------------------------------------------------
   Body
   ---------------------------------------------------------------------- */

.btad-body {
	background: var(--btad-mist);
	padding: 0 0 clamp(56px, 7vw, 96px);
}

.btad-tabs {
	display: flex;
	justify-content: center;
	gap: clamp(22px, 3vw, 38px);
	border-bottom: 1.5px solid var(--btad-line);
	padding-top: clamp(24px, 3vw, 34px);
	margin-bottom: clamp(24px, 3vw, 34px);
}

.btad-tab {
	position: relative;
	padding: 0 4px 16px;
	font-family: var(--btad-display);
	font-size: clamp(16px, 1.5vw, 18.5px);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--btad-ink-soft);
	cursor: pointer;
	transition: color 0.15s ease;
}

.btad-tab:hover {
	color: var(--btad-navy);
}

.btad-tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1.5px;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: transparent;
	transition: background 0.15s ease;
}

.btad-tab.is-on {
	color: var(--btad-navy);
}

.btad-tab.is-on::after {
	background: var(--btad-cyan);
}

/* Both panels are in the DOM so the tab switch needs no round trip. Without
   JS the server-rendered tab is the one carrying .is-on, and the tab strip is
   a pair of real links, so the page still works. */
.btad-panelset {
	display: none;
	flex-direction: column;
	gap: 20px;
}

.btad-panelset.is-on {
	display: flex;
}

/* -------------------------------------------------------------------------
   Panels, tables, chips
   ---------------------------------------------------------------------- */

.btad-panel {
	border: 1.5px solid var(--btad-line);
	border-radius: 16px;
	background: #fff;
}

.btad-panel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 22px 24px 16px;
}

.btad-panel__head h2 {
	font-size: 22px;
}

.btad-h3 {
	font-size: 20px;
}

.btad-panel__note {
	font-size: 13.5px;
	color: var(--btad-ink-soft);
}

.btad-sectionhead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.btad-sectionhead h2 {
	font-size: 22px;
}

.btad-ranges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.btad-range {
	border: 1.5px solid var(--btad-line);
	border-radius: 999px;
	background: #fff;
	color: var(--btad-navy);
	padding: 8px 15px;
	font-family: var(--btad-display);
	font-size: 13.5px;
	font-weight: 600;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btad-range:hover {
	border-color: var(--btad-cyan);
	color: var(--btad-navy);
}

.btad-range.is-on,
.btad-range.is-on:hover {
	background: var(--btad-navy);
	border-color: var(--btad-navy);
	color: #fff;
}

/* These pills are anchors, so .btad a:not([class*="btad-btn"]):not(.btad-tab)
   (0-3-1) outranks the 0-2-0 rule above and painted the selected pill teal on
   its own navy fill. Out-specified the way the rest of this file settles it. */
.btad a.btad-range.is-on:not([class*="btad-btn"]),
.btad a.btad-range.is-on:not([class*="btad-btn"]):hover {
	color: #fff;
}

.btad-scroll {
	overflow-x: auto;
	overflow-y: hidden;
}

.btad-tbl {
	width: 100%;
	border-collapse: collapse;
}

.btad-tbl th,
.btad-tbl td {
	padding: 15px 18px;
	text-align: left;
	border-bottom: 1px solid var(--btad-line);
	font-size: 14.5px;
	vertical-align: middle;
}

.btad-tbl th {
	font-family: var(--btad-display);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--btad-ink-soft);
	white-space: nowrap;
}

.btad-tbl tr:last-child td {
	border-bottom: 0;
}

.btad-tbl--wide {
	min-width: 720px;
}

.btad-tbl:not(.btad-tbl--wide) {
	min-width: 340px;
}

.btad-strong {
	font-family: var(--btad-display);
	font-weight: 600;
}

.btad-muted {
	color: var(--btad-ink);
}

.btad-num {
	font-variant-numeric: tabular-nums;
}

.btad-nowrap {
	white-space: nowrap;
}

.btad-right {
	text-align: right;
}

.btad-mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13.5px;
}

.btad-empty {
	padding: 30px 18px;
	color: var(--btad-ink-soft);
	font-size: 14px;
}

.btad-chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--btad-flat-bg);
	color: var(--btad-ink);
	font-family: var(--btad-display);
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
}

.btad-chip--paid {
	background: var(--btad-ok-bg);
	color: var(--btad-ok-fg);
}

.btad-chip--unpaid {
	background: var(--btad-warn-bg);
	color: var(--btad-warn-fg);
}

.btad-chip--rejected {
	background: var(--btad-bad-bg);
	color: var(--btad-bad-fg);
}

.btad-code {
	display: inline-block;
	padding: 5px 10px;
	border-radius: 8px;
	background: var(--btad-cyan-tint);
	color: #12657f;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13.5px;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   Stat cards
   ---------------------------------------------------------------------- */

.btad-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 16px;
}

.btad-stats--5 {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.btad-stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px;
	border: 1.5px solid var(--btad-line);
	border-radius: 16px;
	background: #fff;
}

.btad-stat__label {
	font-family: var(--btad-display);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--btad-ink-soft);
}

.btad-stat__value {
	font-family: var(--btad-display);
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.btad-stat__note {
	font-size: 13.5px;
	color: var(--btad-ink);
}

/* -------------------------------------------------------------------------
   Buttons and fields
   ---------------------------------------------------------------------- */

.btad-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 46px;
	padding: 0 22px;
	border: 0;
	border-radius: 12px;
	background: var(--btad-navy);
	color: #fff;
	font-family: var(--btad-display);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
	white-space: nowrap;
}

.btad-btn:hover {
	background: var(--btad-navy-hover);
	color: #fff;
}

.btad-btn:active {
	background: var(--btad-navy-deep);
}

.btad-btn--cyan {
	background: var(--btad-cyan-bright);
	color: var(--btad-navy);
}

.btad-btn--cyan:hover {
	background: var(--btad-cyan);
	color: var(--btad-navy);
}

.btad-btn--ghost {
	background: transparent;
	border: 1.5px solid var(--btad-line);
	color: var(--btad-navy);
}

.btad-btn--ghost:hover {
	background: var(--btad-cyan-tint);
	border-color: var(--btad-cyan);
	color: var(--btad-navy);
}

.btad-btn--sm {
	height: 38px;
	font-size: 14px;
	padding: 0 16px;
}

.btad-link {
	border: 0;
	background: transparent;
	padding: 0;
	font-family: var(--btad-display);
	font-size: 14px;
	font-weight: 600;
	color: var(--btad-teal);
	cursor: pointer;
}

.btad-link:hover {
	color: var(--btad-navy);
}

/* The loyalty plugin forces black text onto every input sitewide, so these
   need the extra weight to keep the design's ink colour. */
.btad-in {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1.5px solid var(--btad-line);
	border-radius: 11px;
	background: #fff;
	font-family: var(--btad-sans);
	font-size: 14.5px;
	color: var(--btad-navy) !important;
	transition: border-color 0.15s ease;
}

.btad-in:focus {
	border-color: var(--btad-cyan);
	outline: none;
}

.btad-in::placeholder {
	color: var(--btad-ink-faint);
}

.btad-in:disabled {
	background: var(--btad-mist);
	color: var(--btad-ink-soft) !important;
}

.btad-in--area {
	height: auto;
	padding: 12px 14px;
	line-height: 1.55;
	resize: vertical;
}

/* The link builder's product picker. appearance:none so the control matches
   the text inputs it sits beside instead of inheriting the OS widget, with
   the chevron drawn as an inline SVG — no asset request, and it recolours
   with the brand by editing one stroke value here. padding-right keeps a
   long product name off the arrow. */
.btad-in--select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232b3754' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	cursor: pointer;
	text-overflow: ellipsis;
}

/* The dropdown list itself is painted by the OS, which does not inherit the
   panel's colours — these two keep it legible where it does listen. */
.btad-in--select option {
	color: var(--btad-navy);
}

.btad-in--select optgroup {
	font-weight: 700;
	color: var(--btad-navy);
}

.btad-lbl {
	font-family: var(--btad-display);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--btad-ink-soft);
}

.btad-hint {
	font-size: 12.5px;
	color: var(--btad-ink-soft);
}

.btad-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.btad-grid2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

/* -------------------------------------------------------------------------
   Composite blocks
   ---------------------------------------------------------------------- */

.btad-duo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
}

.btad-trio {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 20px;
}

.btad-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
}

.btad-card p {
	font-size: 14px;
	line-height: 1.65;
	color: var(--btad-ink);
}

.btad-card__cta {
	margin-top: auto;
}

.btad-card--navy {
	background: var(--btad-navy);
	border-color: var(--btad-navy);
	color: #fff;
}

.btad-card--navy h2 {
	color: #fff;
}

.btad-card--navy p {
	color: rgba(255, 255, 255, 0.78);
}

.btad-terms {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
}

.btad-terms li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	color: var(--btad-ink);
}

.btad-terms strong {
	font-family: var(--btad-display);
	font-weight: 600;
	color: var(--btad-navy);
	text-align: right;
}

.btad-nextpay {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 24px;
}

.btad-nextpay__copy {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 620px;
}

.btad-nextpay__copy p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--btad-ink);
}

.btad-nextpay__amount {
	font-family: var(--btad-display);
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.btad-stack {
	padding: clamp(22px, 2.6vw, 30px);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.btad-stack__intro {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.btad-stack__intro h2 {
	font-size: 22px;
}

.btad-stack__intro p {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--btad-ink);
	max-width: 64ch;
}

.btad-copyfield {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border: 1.5px solid var(--btad-line);
	border-radius: 11px;
	background: #f7fafb;
	min-width: 0;
}

.btad-copyfield .btad-mono {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--btad-navy);
}

.btad-copyfield .btad-mono.is-empty {
	color: var(--btad-ink-faint);
}

.btad-copyrow {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.btad-copyrow .btad-copyfield {
	flex: 1 1 340px;
}

.btad-shares {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.btad-buildrow {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.btad-buildrow .btad-in {
	flex: 1 1 320px;
	width: auto;
}

.btad-form {
	padding: clamp(22px, 2.6vw, 30px);
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.btad-form__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.btad-form__head h2 {
	font-size: 22px;
}

.btad-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.btad-flash {
	padding: 14px 18px;
	border-radius: 12px;
	font-size: 14.5px;
	font-weight: 500;
}

.btad-flash--ok {
	background: var(--btad-ok-bg);
	color: var(--btad-ok-fg);
}

.btad-flash--bad {
	background: var(--btad-bad-bg);
	color: var(--btad-bad-fg);
}

/* -------------------------------------------------------------------------
   Signed-out / not-an-affiliate gate
   ---------------------------------------------------------------------- */

.btad--gate {
	background: var(--btad-mist);
	padding: clamp(48px, 7vw, 96px) 0;
}

.btad-gate {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: clamp(28px, 4vw, 44px);
	max-width: 620px;
	margin: 0 auto;
}

.btad-gate__title {
	font-size: clamp(24px, 3vw, 32px);
}

.btad-gate__copy {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--btad-ink);
}

/* -------------------------------------------------------------------------
   Small screens
   ---------------------------------------------------------------------- */

@media (max-width: 700px) {
	.btad-hero__inner {
		align-items: flex-start;
	}

	.btad-idcard {
		width: 100%;
	}

	.btad-nextpay {
		align-items: flex-start;
	}
}

/* -------------------------------------------------------------------------
   Page shell

   templates/page-affiliate-dashboard.html renders the post content and
   nothing else — no post-title block — because the design carries its own H1
   inside the navy hero. Printing the theme's title as well would show the
   page name twice.

   Twenty Twenty-Five hands every block a vertical block-gap margin and
   constrains post-content to the theme's content width. Both are cleared here
   so the hero and the mist body run edge to edge, with .btad__wrap supplying
   the 1240px measure instead.
   ---------------------------------------------------------------------- */

.wp-site-blocks > .btad-page,
.btad-page > *,
.btad-page .wp-block-post-content > * {
	margin-block: 0;
}

.btad-page,
.btad-page .wp-block-post-content {
	max-width: none;
	padding-inline: 0;
}

.btad-page .btad {
	display: block;
	width: 100%;
}

/* The link builder's label is for screen readers only. WordPress defines
   .screen-reader-text itself, but only when the block library stylesheet is
   on the page — which is not guaranteed once a page is built from a
   shortcode. Declaring it here means the label can never render visibly. */
.btad .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
   Tax information (W-9)

   The form is Gravity Forms 4, opted into the sitewide form skin with the
   `bta-form` class, so it inherits the --gf-ctrl-* variables rather than
   having its controls restyled property by property here.
   ---------------------------------------------------------------------- */

.btad-w9flag {
	font-family: var(--btad-display);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--btad-warn-fg);
}

.btad-w9flag.is-on {
	color: var(--btad-ok-fg);
}

.btad-w9body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 0 24px 24px;
}

.btad-w9body p {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--btad-ink);
	max-width: 72ch;
}

/* The security note is the one line an affiliate must not skim past, so it
   gets a rule and a tint rather than sitting as another grey paragraph. */
.btad-w9note {
	border-left: 3px solid var(--btad-cyan);
	background: var(--btad-cyan-tint);
	border-radius: 0 10px 10px 0;
	padding: 12px 16px;
}

.btad-w9body .gform_wrapper {
	margin: 4px 0 0;
}

.btad-w9body .gform_wrapper .gform_footer {
	margin-bottom: 0;
	padding-bottom: 0;
}

/* -------------------------------------------------------------------------
   Narrow screens

   The tables keep their min-width and scroll sideways inside .btad-scroll —
   a six-column commission table does not usefully reflow, and squeezing it
   into 340px would make every figure unreadable. Two things follow from that
   and are fixed below: an empty table must not inherit the min-width, and a
   table that does scroll has to look like it scrolls.
   ---------------------------------------------------------------------- */

/* An empty state is one sentence, and it was being clipped by the min-width
   its own table carries — so the reader had to scroll sideways to find out
   there was nothing to see. Dropping the min-width lets it wrap, and the
   header row goes with it: column headings over no rows are just noise.

   :has() is doing the work so no PHP needs to know whether a table is empty.
   Browsers without it fall back to the previous behaviour: readable, just
   with a sideways scroll. */
.btad-tbl:has(.btad-empty),
.btad-tbl--wide:has(.btad-empty) {
	min-width: 0;
}

.btad-tbl:has(.btad-empty) thead {
	display: none;
}

.btad-tbl:has(.btad-empty) .btad-empty {
	white-space: normal;
}

/* Scroll affordance. The two white gradients sit in the scroller's own
   coordinate space (background-attachment: local) so they slide away as it
   scrolls; the two shadows are fixed to the element, so a shadow only shows
   where content actually continues past the edge. No JS, and nothing shows on
   a table that fits. */
.btad-scroll {
	background:
		linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 44px 100% no-repeat local,
		linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 44px 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, rgba(43, 55, 84, 0.16), rgba(43, 55, 84, 0)) left center / 16px 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgba(43, 55, 84, 0.16), rgba(43, 55, 84, 0)) right center / 16px 100% no-repeat scroll;
}

@media (max-width: 600px) {
	/* Five full-width KPI cards is a long scroll before the reader reaches any
	   actual data. Two up keeps the whole row on one screen. */
	.btad-stats,
	.btad-stats--5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.btad-stat {
		padding: 16px;
		gap: 4px;
	}

	.btad-stat__value {
		font-size: 24px;
	}

	.btad-stat__label {
		font-size: 10.5px;
		letter-spacing: 0.08em;
	}

	.btad-stat__note {
		font-size: 12.5px;
		line-height: 1.45;
	}

	/* An odd card left alone on the last row looks like a mistake next to a
	   full row above it, so the fifth KPI spans both columns. */
	.btad-stats--5 > .btad-stat:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.btad-panel__head,
	.btad-form__head {
		padding-left: 18px;
		padding-right: 18px;
	}

	.btad-tbl th,
	.btad-tbl td {
		padding: 13px 14px;
	}

	.btad-w9body {
		padding: 0 18px 20px;
	}

	/* Full-width buttons read as tappable targets rather than as chips that
	   happen to be left over at the end of a wrapped row. */
	.btad-copyrow .btad-btn,
	.btad-buildrow .btad-btn,
	.btad-form__actions .btad-btn,
	.btad-card__cta {
		width: 100%;
	}

	.btad-nextpay__amount {
		font-size: 24px;
	}
}

/* The tabs are anchors, and they are excluded from the generic .btad a rule
   above so that rule cannot outrank .btad-tab.is-on. That exclusion also took
   away their text-decoration reset, so it is restored here — the active state
   is the cyan bar underneath, not a browser underline through the label. */
.btad-tab,
.btad-tab:hover {
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   Marketing assets

   One card per promotable product. The grid is auto-fill rather than a fixed
   column count so it steps from four cards to one without a breakpoint for
   each step, and every card keeps a square image well so a 42-product page
   does not jump around as the photography loads at different aspect ratios.
   ---------------------------------------------------------------------- */

.btad-assets {
	padding-bottom: 26px;
}

.btad-assets__intro {
	padding: 0 24px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--btad-ink);
}

.btad-assets__empty {
	padding: 18px 24px 0;
	font-size: 14.5px;
	color: var(--btad-ink-soft);
}

.btad-assets__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
	gap: 20px;
	padding: 22px 24px 0;
}

.btad-asset {
	display: flex;
	flex-direction: column;
	border: 1.5px solid var(--btad-line);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
}

.btad-asset__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	border-bottom: 1.5px solid var(--btad-line);
	background: #fff;
}

.btad-asset__media a {
	display: block;
	width: 100%;
	height: 100%;
}

.btad-asset__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.btad-asset__noimg {
	padding: 0 18px;
	text-align: center;
	font-size: 13px;
	color: var(--btad-ink-faint);
}

.btad-asset__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 16px 16px 18px;
	flex: 1;
}

.btad-asset__cat {
	font-family: var(--btad-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--btad-ink-soft);
}

.btad-asset__name {
	font-size: 15.5px;
	line-height: 1.35;
}

/* .btad a:not([class*="btad-btn"]):not(.btad-tab) is 0-3-1 and would paint
   every product name teal. This matches that weight and comes later, which
   is how the rest of this file settles the same fight. */
.btad .btad-asset__name a:not([class*="btad-btn"]) {
	color: var(--btad-navy);
}

.btad .btad-asset__name a:not([class*="btad-btn"]):hover {
	color: var(--btad-teal);
}

.btad-asset__price {
	font-family: var(--btad-display);
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--btad-navy);
}

.btad-asset__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	padding-top: 12px;
}

.btad-asset__act {
	flex: 1 1 auto;
	gap: 8px;
	padding: 0 12px;
}

/* The icons are masks rather than inline SVG because the copy button swaps
   its own textContent to say "Copied" — an SVG child would not survive it. */
.btad-asset__act::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: none;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.btad-asset__act--copy::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17H7A5 5 0 0 1 7 7h2M15 7h2a5 5 0 0 1 0 10h-2M8 12h8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17H7A5 5 0 0 1 7 7h2M15 7h2a5 5 0 0 1 0 10h-2M8 12h8'/%3E%3C/svg%3E");
}

.btad-asset__act--image::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7.5 10.5 12 15l4.5-4.5M4 20h16'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7.5 10.5 12 15l4.5-4.5M4 20h16'/%3E%3C/svg%3E");
}

@media (max-width: 600px) {
	/* Thirteen categories wrapped to thirteen rows pushed the grid itself
	   below the fold on a phone. One scrolling line keeps the filter to the
	   height of a single chip; the Reports ranges keep wrapping, which is
	   why this is a modifier rather than a change to .btad-ranges. */
	.btad-cats {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}

	.btad-cats .btad-range {
		flex: none;
	}

	.btad-assets__grid {
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		gap: 14px;
		padding: 18px 16px 0;
	}

	.btad-assets__intro,
	.btad-assets__empty {
		padding-left: 16px;
		padding-right: 16px;
	}

	.btad-asset__act {
		flex: 1 1 100%;
	}
}