/**
 * Responsive layer (v1.5.5), loaded LAST (after polish.css).
 *
 * One reviewable place for every phone/tablet rule so the older component sheets stay desktop-first and untouched.
 * Rules are ordered from largest to smallest breakpoint. Logical properties only (RTL/LTR safe).
 *
 * Breakpoints: 1024 (tablet), 768 (large phone / portrait tablet), 640 (phone), 480 (small phone), 360 (tiny).
 */

/* ---------- 0. Safety nets (all sizes) ---------- */
.bap-dashboard-wrap,
.bap-auth-container,
.bap-guide-page { min-inline-size: 0; max-inline-size: 100%; }
.bap-dashboard-wrap img,
.bap-dashboard-wrap video,
.bap-dashboard-wrap canvas { max-inline-size: 100%; block-size: auto; }
.bap-dashboard-wrap pre { max-inline-size: 100%; overflow-x: auto; }
.bap-bento-grid > *,
.bap-form-row > *,
.bap-payment-methods-grid > * { min-inline-size: 0; }

/* Long tokens (redirect URIs, keys, references) must wrap: polish.css makes <code> nowrap in RTL, which widened the whole page. */
.bap-dashboard-wrap code,
.bap-guide-page code { white-space: normal; overflow-wrap: anywhere; min-inline-size: 0; }
.bap-flex-row { flex-wrap: wrap; }

/* Grids that used fixed px minimums overflowed 320px phones: clamp the minimum to the container. */
.bap-payment-methods-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.bap-checklist-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.bap-guide-meta-grid,
.bap-d17-steps-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* Dialog: dynamic viewport height so mobile browser chrome never hides the footer. */
.bap-dialog { max-block-size: 90vh; max-block-size: 90dvh; overscroll-behavior: contain; }
.bap-dialog-backdrop { overflow-y: auto; padding-block: max(var(--bap-space-4), env(safe-area-inset-top)) max(var(--bap-space-4), env(safe-area-inset-bottom)); }
.bap-dialog__header { position: sticky; inset-block-start: 0; z-index: 1; background: var(--bap-surface); }

/* Toasts: the JS appends .bap-alert elements into the (already fixed) toast region. */
.bap-toast-region { inset-block-end: max(1rem, env(safe-area-inset-bottom)); inset-inline: auto 1rem; max-inline-size: min(26rem, calc(100vw - 2rem)); }
.bap-toast-region > .bap-alert { margin: 0; pointer-events: auto; box-shadow: var(--bap-shadow-lg); background-color: var(--bap-surface-elevated); }
.bap-toast-stack { inset-block-end: max(var(--bap-space-4), env(safe-area-inset-bottom)); max-inline-size: min(24rem, calc(100vw - 2rem)); }

/* Schedule preview chips (class was emitted by portal.js but had no styling). */
.bap-calendar-strip { -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.bap-calendar-day {
	flex: 0 0 auto;
	min-inline-size: 9.5rem;
	padding: 0.75rem 0.85rem;
	background: var(--bap-surface-2);
	border: 1px solid var(--bap-border);
	border-radius: var(--bap-radius-md);
	font-size: 0.8125rem;
	line-height: 1.5;
	scroll-snap-align: start;
}
.bap-calendar-day strong { display: block; margin-block-end: 0.25rem; }

/* Guide illustrations are LTR mock screenshots: keep them LTR so scrolling starts at their beginning, even in Arabic. */
.bap-guide-illustration,
.bap-guide-step-card__visual,
.bap-step-guide-item__visual { direction: ltr; }

/* Touch devices: real 44px targets and no hover-lift that "sticks" after a tap. */
@media (pointer: coarse) {
	.bap-btn,
	.bap-btn-sm,
	.bap-btn--sm { min-block-size: 44px; }
	.bap-tab-btn,
	.bap-stepper-btn,
	.bap-chip { min-block-size: 44px; }
	.bapp-checkbox-label { min-block-size: 44px; }
	.bapp-checkbox-label input { inline-size: 1.25rem; block-size: 1.25rem; }
	.bap-btn--icon,
	.bap-btn-danger { min-inline-size: 44px; }
	/* Text links that sit on their own line: give them a finger-sized hit area without changing the look */
	.bap-auth-footer a,
	.bap-renew-link,
	.bap-blog-title,
	.bap-admin-pill { display: inline-flex; align-items: center; min-block-size: 44px; }
	.bap-admin-pill { min-block-size: 32px; padding-inline: 0.75rem; }
	.bap-auth-footer { display: flex; justify-content: center; }
}
@media (hover: none) {
	.bap-btn-primary:hover,
	.bap-btn--primary:hover,
	.bap-step-guide-item:hover { transform: none; }
}

/* ---------- 1. Tablet (<= 1024px) ---------- */
@media (max-width: 1024px) {
	.bap-top-metrics { max-inline-size: none; }
}

/* ---------- 2. Large phone / portrait tablet (<= 768px) ---------- */
@media (max-width: 768px) {
	/* iOS Safari zooms the whole page when a focused field is < 16px. */
	.bap-input,
	.bap-select,
	.bap-textarea,
	.bap-input.code,
	.bap-textarea.code { font-size: 16px; }

	.bap-dashboard-wrap { padding-block-end: 2rem; }

	/* HUD / top bar */
	.bap-top-bar { gap: 1rem; margin-block-end: 1rem; }
	.bap-top-main,
	.bap-user-profile-badge { inline-size: 100%; min-inline-size: 0; }
	.bap-user-name { max-inline-size: 100%; }
	.bap-top-metrics { inline-size: 100%; max-inline-size: none; flex-direction: column; align-items: stretch; gap: 1rem; }
	.bap-metric-box { inline-size: 100%; }

	/* Tabs: single scrolling row with edge fade so users can see it scrolls; active tab is scrolled into view by portal.js */
	.bap-nav-tabs {
		margin-block-end: 1.25rem;
		scroll-padding-inline: 1rem;
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
	}
	.bap-nav-tabs .bap-tab-btn { padding-inline: 1rem; }

	/* Cards */
	.bap-card,
	.bap-guide-card,
	.bap-checklist-card { padding: 1.1rem; border-radius: var(--bap-radius-md); }
	.bap-card { margin-block-end: 1rem; }
	.bap-bento-grid > .bap-card,
	.bap-bento-grid > .bap-checklist-card { margin-block-end: 0; }
	.bap-card-header { margin-block-end: 1rem; }
	.bap-card-header h3 { font-size: 1.0625rem; overflow-wrap: anywhere; }
	.bap-checklist-steps { grid-template-columns: 1fr; }
	.bap-step { padding: 1rem; }

	/* Wizard stepper: one swipeable row instead of eight wrapping buttons */
	.bap-stepper {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 0.5rem;
		padding-block-end: 0.5rem;
		margin-block-end: 1.25rem;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}
	.bap-stepper-btn { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }

	/* Forms */
	.bap-form-row { grid-template-columns: 1fr; gap: 0; }
	.bap-form-group { margin-block-end: 1rem; }
	.bap-label-with-help { flex-wrap: wrap; }
	.bap-oauth-box { flex-direction: column; align-items: stretch; padding: 1rem; }
	.bap-oauth-box .bap-btn { inline-size: 100%; }
	.bap-key-row { flex-wrap: wrap; align-items: stretch; }
	.bap-key-row .bap-input { flex: 1 1 100%; }
	.bap-key-row .bap-btn { flex: 1 1 auto; }
	.bap-form-submit { justify-content: stretch; }
	.bap-form-submit .bap-btn { flex: 1 1 100%; }
	.bap-redirect-uri-card,
	.bap-d17-featured-box { padding: 1rem; }

	/* Activity log */
	.bap-log-container { padding: 0.85rem; max-block-size: 50vh; max-block-size: 50dvh; font-size: 0.75rem; }
	.bap-log-entry { flex-wrap: wrap; gap: 0.15rem 0.6rem; overflow-wrap: anywhere; }

	/* Tables become labelled cards. Cells carry data-label (templates/dashboard.php). */
	.bap-table-wrap { overflow-x: visible; }
	.bap-table th,
	.bap-table td { padding: 0; }
	.bap-table tr { padding: 0.35rem 0.85rem; background: var(--bap-surface-2); }
	.bap-table td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 1rem;
		padding-block: 0.55rem;
		border-block-end: 1px dashed var(--bap-border);
		text-align: end;
		overflow-wrap: anywhere;
	}
	.bap-table td:last-child { border-block-end: 0; }
	.bap-table td::before {
		content: attr(data-label);
		flex: 0 0 38%;
		max-inline-size: 38%;
		font-weight: 700;
		font-size: 0.75rem;
		color: var(--bap-text-muted);
		text-align: start;
	}
	.bap-table td:not([data-label])::before,
	.bap-table td[colspan]::before { content: none; }
	.bap-table td[colspan] { justify-content: center; }
	.bap-table code { white-space: normal; overflow-wrap: anywhere; }
}

/* ---------- 3. Phone (<= 640px) ---------- */
@media (max-width: 640px) {
	.bapp-plan-selector-grid { grid-template-columns: 1fr; gap: 0.5rem; }
	/* Plan chips read as a list row: name on one side, limits on the other */
	.bapp-plan-chip {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		min-block-size: 48px;
		padding: 0.75rem 1rem;
		text-align: start;
	}
	.bapp-plan-chip-metric { text-align: end; font-size: 0.75rem; }
	.bapp-chip-badge { inset-inline-start: auto; inset-inline-end: 0.75rem; transform: none; }

	/* Blog rows: info on top, full-width actions below */
	.bap-blog-row { flex-direction: column; align-items: stretch; padding: 0.9rem; gap: 0.75rem; }
	.bap-blog-info { flex: 1 1 auto; }
	.bap-blog-btns { inline-size: 100%; flex-wrap: wrap; }
	.bap-blog-btns .bap-btn { flex: 1 1 auto; min-block-size: 44px; }
	.bap-blog-btns .bap-btn-danger { flex: 0 0 44px; padding-inline: 0; }
	.bap-blog-subline { flex-wrap: wrap; }

	/* Add-blog box: stack input and button */
	.bap-add-blog-box { flex-wrap: wrap; }
	.bap-add-blog-box .bap-input { flex: 1 1 100%; }
	.bap-add-blog-box .bap-btn { flex: 1 1 100%; }

	/* Bottom-sheet dialogs */
	.bap-dialog-backdrop { align-items: flex-end; padding: 0; }
	.bap-dialog {
		max-inline-size: 100%;
		max-block-size: 92vh;
		max-block-size: 92dvh;
		border-end-start-radius: 0;
		border-end-end-radius: 0;
	}
	.bap-dialog__header,
	.bap-dialog__body { padding: var(--bap-space-3) var(--bap-space-4); }

	/* Toasts span the width above the safe area */
	.bap-toast-region { inset-inline: 1rem; max-inline-size: none; }
	.bap-toast-stack { inset-inline: var(--bap-space-3); max-inline-size: none; }

	/* Guide illustrations: keep text legible by letting the mock screenshot scroll sideways instead of shrinking it */
	.bap-guide-illustration,
	.bap-guide-step-card__visual,
	.bap-step-guide-item__visual { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.bap-guide-svg,
	.bap-guide-step-card__visual svg,
	.bap-step-guide-item__visual svg { min-inline-size: 30rem; }

	.bap-guide-title { font-size: 1.25rem; }
	.bap-copy-box { align-items: stretch; }
	.bap-copy-box .bap-btn { flex: 1 1 100%; }
	.bap-d17-card__number { font-size: 1rem; overflow-wrap: anywhere; }
	#bappD17PhoneCode { font-size: 1.1rem; }
}

/* ---------- 4. Small phone (<= 480px) ---------- */
@media (max-width: 480px) {
	.bap-top-bar { padding: 0.9rem; border-radius: var(--bap-radius-md); }
	.bap-user-avatar { inline-size: 40px; block-size: 40px; font-size: 1.1rem; }
	.bap-card,
	.bap-guide-card,
	.bap-checklist-card { padding: 1rem; }
	.bap-checklist-card__header .bap-btn { justify-content: center; }

	/* Auth screens: top-aligned (the on-screen keyboard otherwise pushes a centred card off-screen) */
	.bap-auth-container { min-block-size: auto; align-items: flex-start; padding: 1rem 0.75rem 2rem; }
	.bap-auth-card { padding: 1.5rem 1.1rem; border-radius: var(--bap-radius-lg); }
	.bap-auth-title { font-size: 1.375rem; }
	.bap-auth-header { margin-block-end: 1.25rem; }
	.bapp-auth-trust-strip { flex-wrap: wrap; justify-content: flex-start; gap: 0.5rem 1rem; }

	/* Buttons: only stand-alone action buttons go full width; buttons inside rows keep their flex sizing */
	.bap-form-submit .bap-btn,
	.bap-btn-block { inline-size: 100%; }
	.bap-btn { max-inline-size: 100%; }
	.bap-flex-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
	.bap-flex-between { align-items: flex-start; }
}

/* ---------- 5. Tiny phones (<= 360px) ---------- */
@media (max-width: 360px) {
	.bap-tab-btn { padding-inline: 0.85rem; font-size: 0.8125rem; }
	.bap-auth-card { padding: 1.25rem 0.9rem; }
	.bap-metric-header { gap: 0.25rem 0.75rem; }
	.bap-guide-svg,
	.bap-guide-step-card__visual svg,
	.bap-step-guide-item__visual svg { min-inline-size: 28rem; }
}