/*
 * ASB Post Thumbnail — PC admin skin
 *
 * A modern, FlyingPress-style reskin of the settings page that shares one
 * visual language with the ASB plugin family (Smart Flow / Calendar / PWA
 * Engine / LINE). Scoped entirely under `.asb-ptp-admin` (added to the page
 * `.wrap`) so it never bleeds into surrounding wp-admin chrome.
 *
 * The settings screen keeps its existing two-column grid (settings + a sticky
 * live-preview / family-promo sidebar); this skin supplies the soft canvas,
 * brand bar, icon tabs, white cards, and modern field/button styling on top.
 *
 * The indigo/violet brand identity is fixed so the page reads as one product
 * across the whole family.
 */

/* ----------------------------------------------------------------- */
/* Full-bleed canvas                                                 */
/* ----------------------------------------------------------------- */

.asb-ptp-admin.wrap {
	/* Asobit corporate palette. */
	--asb-yellow: #f5ab00;
	--asb-cream: #fdf3d8;
	--asb-cream-border: #eeda9f;
	--asb-amber: #8a6100;
	--asb-black: #1f2126;
	--asb-ink: #1f2126;
	--asb-muted: #64686f;
	--asb-faint: #989da5;
	--asb-border: #e5e6e9;
	--asb-hairline: #f0f0f2;
	--asb-bg: #f5f5f6;
	--asb-card: #ffffff;
	--asb-bar: #1d1f22;
	--asb-bar-ink: #fbfbfa;
	--asb-bar-muted: #b2b5ba;
	--asb-bar-hover: rgba(255, 255, 255, .08);
	--asb-focus-ring: rgba(245, 171, 0, .28);
	--asb-radius: 14px;
	--asb-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);
	--asb-btn-shadow: 0 4px 12px rgba(16, 24, 40, .18);
	--asb-btn-hover-shadow: 0 4px 12px rgba(16, 24, 40, .25), inset 0 0 0 1px rgba(245, 171, 0, .55);

	margin: 0 20px 0 -20px;
	padding: 0 0 56px;
	background: var(--asb-bg);
	min-height: calc(100vh - 32px);
	color: var(--asb-ink);
	font-size: 13px;
	line-height: 1.6;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

.asb-ptp-admin *,
.asb-ptp-admin *::before,
.asb-ptp-admin *::after { box-sizing: border-box; }

@media screen and (max-width: 782px) {
	.asb-ptp-admin.wrap { margin: 0 10px 0 -10px; }
	/* Reclaim width on phones: a tighter brand bar, a near-edge-to-edge tab
	 * strip that slides horizontally, and a slimmer body gutter. */
	.asb-ptp-admin__bar { padding: 14px 16px; }
	.asb-ptp-admin .asb-ptp-admin__tabs { padding: 0 12px; }
	.asb-ptp-admin__body { padding: 16px; }
}

/* ----------------------------------------------------------------- */
/* Top app bar                                                       */
/* ----------------------------------------------------------------- */

.asb-ptp-admin__bar {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 18px 28px;
	background: var(--asb-bar);
	border-bottom: 1px solid var(--asb-bar);
}

.asb-ptp-admin__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

.asb-ptp-admin__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--asb-yellow);
	color: var(--asb-black);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
	flex: 0 0 auto;
}
.asb-ptp-admin__logo svg { width: 22px; height: 22px; display: block; }

.asb-ptp-admin__title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0;
	color: var(--asb-bar-ink);
	line-height: 1.2;
}

.asb-ptp-admin__ver {
	display: inline-block;
	margin-left: 8px;
	font-size: 11px;
	font-weight: 600;
	color: var(--asb-bar-muted);
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
	padding: 1px 9px;
	vertical-align: middle;
}

.asb-ptp-admin__bar-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
	flex-wrap: wrap;
}

.asb-ptp-admin__wporg {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 600;
	color: var(--asb-bar-muted);
	text-decoration: none;
	padding: 8px 12px;
	border-radius: 9px;
	transition: background .15s, color .15s;
}
.asb-ptp-admin__wporg:hover { background: var(--asb-bar-hover); color: var(--asb-bar-ink); }
.asb-ptp-admin__wporg:focus { box-shadow: none; outline: none; }
.asb-ptp-admin__wporg svg { width: 16px; height: 16px; }

/* ----------------------------------------------------------------- */
/* Body wrapper around the existing two-column grid                  */
/* ----------------------------------------------------------------- */

.asb-ptp-admin__body {
	max-width: 1280px;
	margin: 0 auto;
	padding: 24px 28px;
}

/* The grid is set inline on #asbptp-settings-wrapper; refine its gap and
 * let it stack on small screens. */
.asb-ptp-admin #asbptp-settings-wrapper { grid-gap: 24px !important; align-items: start; }

/* `align-items: start` above keeps the white settings card from being stretched
 * to a taller sidebar — but it shrank the sidebar too, and a sticky element can
 * only travel inside its own parent's box. The Live Preview therefore scrolled
 * away once the sidebar's own content (preview + promo cards) had passed, which
 * is precisely where the long Layout tab needs it. Opt this one item back into
 * stretching: the sidebar now owns the full row height, so the preview stays on
 * screen all the way down. Its children keep their natural heights, so nothing
 * about the cards changes. */
.asb-ptp-admin #asbptp-settings-sidebar { align-self: stretch; }

@media screen and (max-width: 960px) {
	.asb-ptp-admin #asbptp-settings-wrapper { grid-template-columns: 1fr !important; }
}

/* ----------------------------------------------------------------- */
/* Main column → white card with icon tabs at the top                */
/* ----------------------------------------------------------------- */

.asb-ptp-admin #asbptp-settings-main {
	background: var(--asb-card);
	border: 1px solid var(--asb-border);
	border-radius: var(--asb-radius);
	box-shadow: var(--asb-shadow);
	padding: 18px 24px 22px;
	min-width: 0;
}

/* Full-width tab strip directly under the header — matches the ASB family
 * pattern (LINE / Smart Flow / Calendar). It spans the page width and scrolls
 * horizontally on narrow screens instead of clipping inside the card. v3.4.2. */
.asb-ptp-admin .asb-ptp-admin__tabs {
	display: flex;
	align-items: stretch;
	gap: 4px;
	margin: 0;
	padding: 0 28px;
	background: var(--asb-card);
	border-bottom: 1px solid var(--asb-border);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
}
.asb-ptp-admin .asb-ptp-admin__tabs::-webkit-scrollbar { height: 6px; }
.asb-ptp-admin .asb-ptp-admin__tabs::-webkit-scrollbar-thumb { background: var(--asb-border); border-radius: 999px; }
.asb-ptp-admin .asb-ptp-admin__tabs::-webkit-scrollbar-track { background: transparent; }

.asb-ptp-admin .nav-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 14px 12px 11px;
	font-size: 13px;
	font-weight: 600;
	color: var(--asb-muted);
	background: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	box-shadow: none;
	white-space: nowrap;
	line-height: 1.4;
	transition: color .15s, border-color .15s;
}
.asb-ptp-admin .nav-tab:hover { color: var(--asb-ink); background: transparent; }
.asb-ptp-admin .nav-tab:focus { box-shadow: none; outline: none; color: var(--asb-ink); }

.asb-ptp-admin .nav-tab.nav-tab-active,
.asb-ptp-admin .nav-tab.nav-tab-active:hover,
.asb-ptp-admin .nav-tab.nav-tab-active:focus {
	color: var(--asb-ink);
	background: transparent;
	border-color: transparent transparent var(--asb-yellow);
	border-bottom-width: 3px;
}

/* Per-tab glyphs via masked SVG, keyed off each tab's #anchor href. */
.asb-ptp-admin .nav-tab::before {
	content: "";
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	display: inline-block;
	background-color: currentColor;
	-webkit-mask: var(--asb-tab-icon) center / contain no-repeat;
	mask: var(--asb-tab-icon) center / contain no-repeat;
	opacity: .9;
}
.asb-ptp-admin .nav-tab[href="#tab-general"]    { --asb-tab-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="4.5" width="17" height="13" rx="2"/><circle cx="9" cy="10" r="1.6"/><path d="m4.5 16 4.2-3.6 3 2.4 2.6-2.2 5.2 4.4"/></svg>'); }
.asb-ptp-admin .nav-tab[href="#tab-layout"]     { --asb-tab-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="4.5" width="17" height="15" rx="2"/><path d="M3.5 9.5h17M9 9.5v10"/></svg>'); }
.asb-ptp-admin .nav-tab[href="#tab-rules"]      { --asb-tab-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01"/></svg>'); }
.asb-ptp-admin .nav-tab[href="#tab-permission"] { --asb-tab-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.2"/><path d="M3.5 19c0-3 2.6-5 5.5-5s5.5 2 5.5 5"/><path d="M16 5.2a3.2 3.2 0 0 1 0 6M17.5 14c2.3.5 4 2.4 4 5"/></svg>'); }

/* ----------------------------------------------------------------- */
/* Section headings + form-table inside the card                     */
/* ----------------------------------------------------------------- */

.asb-ptp-admin #asbptp-settings-main h2.title,
.asb-ptp-admin #asbptp-settings-main .form-table h3 {
	font-size: 14px;
	font-weight: 700;
	color: var(--asb-ink);
	letter-spacing: -.01em;
}

.asb-ptp-admin .form-table th {
	font-weight: 600;
	font-size: 13.5px;
	color: var(--asb-ink);
}
.asb-ptp-admin .form-table td .description,
.asb-ptp-admin p.description { color: var(--asb-muted); font-size: 12.5px; }

/* ----------------------------------------------------------------- */
/* Inputs                                                            */
/* ----------------------------------------------------------------- */

.asb-ptp-admin input[type="text"],
.asb-ptp-admin input[type="url"],
.asb-ptp-admin input[type="number"],
.asb-ptp-admin input[type="password"],
.asb-ptp-admin input[type="email"],
.asb-ptp-admin input[type="search"],
.asb-ptp-admin select,
.asb-ptp-admin textarea {
	border: 1px solid #d5d7dc;
	border-radius: 9px;
	padding: 7px 11px;
	font-size: 13px;
	color: var(--asb-ink);
	background: #fff;
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
	min-height: 36px;
}
.asb-ptp-admin input:focus,
.asb-ptp-admin select:focus,
.asb-ptp-admin textarea:focus {
	border-color: var(--asb-yellow);
	box-shadow: 0 0 0 3px var(--asb-focus-ring);
	outline: none;
}
.asb-ptp-admin input[type="checkbox"],
.asb-ptp-admin input[type="radio"] { accent-color: var(--asb-yellow); }

/* WP core paints the check / radio dot via ::before (appearance: none),
 * so accent-color alone can't recolour the checkmark — pin it to the brand.
 * The radio dot is deliberately NOT branded: core draws it in the control's
 * own scheme, and a yellow dot inside the blue-filled control clashed. */
.asb-ptp-admin input[type="checkbox"]:checked::before { color: var(--asb-amber); }
.asb-ptp-admin input[type="checkbox"]:focus,
.asb-ptp-admin input[type="radio"]:focus {
	border-color: var(--asb-yellow);
	box-shadow: 0 0 0 3px var(--asb-focus-ring);
}

/* ----------------------------------------------------------------- */
/* Buttons                                                           */
/* ----------------------------------------------------------------- */

.asb-ptp-admin .button,
.asb-ptp-admin .button-secondary {
	border-radius: 9px;
	border: 1px solid #d5d7dc;
	background: #fff;
	color: var(--asb-ink);
	font-weight: 600;
	box-shadow: none;
	transition: background .15s, border-color .15s;
}
.asb-ptp-admin .button:hover { background: var(--asb-bg); border-color: #c4c7cd; color: var(--asb-ink); }

.asb-ptp-admin .button-primary {
	border: 0;
	border-radius: 9px;
	background: var(--asb-yellow);
	color: var(--asb-black);
	text-shadow: none;
	box-shadow: var(--asb-btn-shadow);
}
.asb-ptp-admin .button-primary:hover {
	background: var(--asb-black);
	color: var(--asb-yellow);
	box-shadow: var(--asb-btn-hover-shadow);
}
.asb-ptp-admin .button-primary:focus { box-shadow: 0 0 0 3px var(--asb-focus-ring); }

/* ----------------------------------------------------------------- */
/* Sidebar: Live Preview card + family cross-promo                   */
/* ----------------------------------------------------------------- */

.asb-ptp-admin .asbptp-preview-container {
	background: var(--asb-card);
	border: 1px solid var(--asb-border);
	border-radius: var(--asb-radius);
	box-shadow: var(--asb-shadow);
	padding: 18px 18px 16px;
}
.asb-ptp-admin .asbptp-preview-container > h3 {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--asb-ink);
}
.asb-ptp-admin #asbptp-settings-preview-wrapper {
	border-radius: 10px;
	overflow: hidden;
	background: var(--asb-bg) !important;
}
.asb-ptp-admin #asbptp-settings-preview-image { border: 0 !important; border-radius: 10px; }

/* Family promo: its own card beneath the Live Preview in the sidebar. */
.asb-ptp-admin .asbptp-family-promo-wrap { margin-top: 18px; }
.asb-ptp-admin .asbptp-family-promo-wrap .postbox {
	background: var(--asb-card);
	border: 1px solid var(--asb-border);
	border-radius: var(--asb-radius);
	box-shadow: var(--asb-shadow);
	margin: 0;
	overflow: hidden;
}
.asb-ptp-admin .asbptp-family-promo-wrap .postbox > .hndle,
.asb-ptp-admin .asbptp-family-promo-wrap .postbox > h2.hndle {
	padding: 13px 18px;
	margin: 0;
	border-bottom: 1px solid var(--asb-border);
	font-size: 13px;
	font-weight: 700;
	color: var(--asb-ink);
	cursor: default;
}
.asb-ptp-admin .asbptp-family-promo-wrap .postbox .inside { padding: 4px 18px 14px; margin: 0; }
.asb-ptp-admin .asbptp-fam-promo { margin: 0; padding-top: 4px; }
.asb-ptp-admin .asbptp-fam-promo .asbptp-fam-card { padding: 14px 0; border-top: 1px solid var(--asb-hairline); }
.asb-ptp-admin .asbptp-fam-promo .asbptp-fam-card:first-child { border-top: 0; padding-top: 10px; }
.asb-ptp-admin .asbptp-fam-promo .asbptp-fam-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.asb-ptp-admin .asbptp-fam-promo .asbptp-fam-emoji { font-size: 18px; line-height: 1; }
.asb-ptp-admin .asbptp-fam-promo .asbptp-fam-name { font-weight: 700; font-size: 13px; color: var(--asb-ink); }
.asb-ptp-admin .asbptp-fam-promo .asbptp-fam-badge {
	font-size: 10px; font-weight: 700; letter-spacing: .03em;
	color: #15803d; background: #dcfce7; border-radius: 999px; padding: 1px 8px;
}
.asb-ptp-admin .asbptp-fam-promo .asbptp-fam-tagline { margin: 7px 0 9px; color: var(--asb-muted); font-size: 12px; }
.asb-ptp-admin .asbptp-fam-promo .asbptp-fam-label {
	font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	color: var(--asb-amber); margin: 8px 0 3px;
}
.asb-ptp-admin .asbptp-fam-promo .asbptp-fam-list { margin: 0 0 10px; padding: 0; list-style: none; }
.asb-ptp-admin .asbptp-fam-promo .asbptp-fam-list li {
	position: relative; padding-left: 20px; font-size: 12px; color: var(--asb-ink); margin: 3px 0;
}
.asb-ptp-admin .asbptp-fam-promo .asbptp-fam-free li::before { content: "\2713"; position: absolute; left: 0; color: #16a34a; font-weight: 700; }
.asb-ptp-admin .asbptp-fam-promo .asbptp-fam-pro li::before { content: "\2726"; position: absolute; left: 0; color: var(--asb-amber); }
.asb-ptp-admin .asbptp-fam-promo .asbptp-fam-cta {
	display: block; width: 100%; text-align: center;
	font-size: 12.5px; font-weight: 600; text-decoration: none;
	padding: 9px 12px; border-radius: 9px; border: 0;
	background: var(--asb-yellow);
	color: var(--asb-black) !important; box-shadow: 0 3px 9px rgba(16, 24, 40, .15); margin-top: 4px;
}
.asb-ptp-admin .asbptp-fam-promo .asbptp-fam-cta:hover { background: var(--asb-black); color: var(--asb-yellow) !important; box-shadow: var(--asb-btn-hover-shadow); }
.asb-ptp-admin .asbptp-fam-promo .asbptp-fam-sub {
	display: block; text-align: center; margin-top: 7px;
	font-size: 11.5px; color: var(--asb-muted); text-decoration: none;
}
.asb-ptp-admin .asbptp-fam-promo .asbptp-fam-sub:hover { color: var(--asb-amber); }

/* ----------------------------------------------------------------- */
/* Mobile hardening — no horizontal bleed, reclaim wasted width      */
/* ----------------------------------------------------------------- */

@media screen and (max-width: 782px) {
	/* Form controls never exceed the card width. */
	.asb-ptp-admin input[type="text"],
	.asb-ptp-admin input[type="url"],
	.asb-ptp-admin input[type="number"],
	.asb-ptp-admin input[type="password"],
	.asb-ptp-admin input[type="email"],
	.asb-ptp-admin input[type="search"],
	.asb-ptp-admin select,
	.asb-ptp-admin textarea { max-width: 100%; }

	/* Long descriptions / URLs wrap instead of widening the page. */
	.asb-ptp-admin p.description,
	.asb-ptp-admin .form-table td .description { overflow-wrap: anywhere; }

	/* Override-rule cards: slimmer padding and stacked nested tables. */
	.asb-ptp-admin .override-rule { padding: 12px; }
	.asb-ptp-admin .override-rule-details .form-table th,
	.asb-ptp-admin .override-rule-details .form-table td,
	.asb-ptp-admin .override-rule .rule-target-table th,
	.asb-ptp-admin .override-rule .rule-target-table td { padding: 6px 0; }

	/* Background-image rows wrap rather than push the actions off-screen. */
	.asb-ptp-admin .asbptp-bg-settings-wrapper .asbptp-image-repeater-item { flex-wrap: wrap; }

	/* WP core inflates every checkbox/radio to 25px on phones and scales its
	 * dashicon checkmark to ~30px — in this dense skin the glyph overflows the
	 * box (looks doubled/overlapping) and the controls dwarf the 13px labels.
	 * Bring them back to a comfortable touch size and keep the mark inside. */
	.asb-ptp-admin .form-table input[type="checkbox"],
	.asb-ptp-admin .form-table input[type="radio"],
	.asb-ptp-admin fieldset input[type="checkbox"],
	.asb-ptp-admin fieldset input[type="radio"] {
		width: 20px;
		height: 20px;
		min-width: 20px;
		margin: 0 6px 0 0;
		flex: 0 0 auto;
	}
	.asb-ptp-admin .form-table input[type="checkbox"]:checked::before,
	.asb-ptp-admin fieldset input[type="checkbox"]:checked::before {
		width: 20px;
		font-size: 20px;
		line-height: 1;
		margin: -2px 0 0 -3px;
	}
	.asb-ptp-admin .form-table input[type="radio"]:checked::before,
	.asb-ptp-admin fieldset input[type="radio"]:checked::before {
		width: 8px;
		height: 8px;
		margin: 5px;
	}
	/* Pair each box with its label text and align to the first line so a long
	 * or wrapped label sits beside the box, never under it. */
	.asb-ptp-admin .form-table td label,
	.asb-ptp-admin fieldset label {
		display: inline-flex;
		align-items: flex-start;
		gap: 8px;
	}
}

@media screen and (max-width: 600px) {
	.asb-ptp-admin #asbptp-settings-main { padding: 14px 14px 18px; }
	.asb-ptp-admin__body { padding: 12px; }
	.asb-ptp-admin__bar { padding: 12px 14px; gap: 10px; }
	.asb-ptp-admin__title { font-size: 16px; }
	/* Checkbox / radio option rows: glue each box to its own label text so
	 * the pair wraps as a unit instead of the box detaching and the text
	 * overflowing. Spacing between options is preserved. (Alignment + sizing
	 * are handled in the 782px block above so they apply on all phones.) */
	.asb-ptp-admin .form-table td label,
	.asb-ptp-admin fieldset label { display: inline-flex; align-items: flex-start; gap: 8px; }
}

/* ----------------------------------------------------------------- */
/* Family cross-promo base styles (moved here from a <style> block in    */
/* class-asb-family-promo.php: wp.org asks for no raw <style> in PHP).   */
/* Kept last so the order matches what the page used to print.          */
/* ----------------------------------------------------------------- */
.asbptp-fam-promo .asbptp-fam-card { padding: 12px 0; border-top: 1px solid #f0f0f1; }
.asbptp-fam-promo .asbptp-fam-card:first-child { border-top: 0; padding-top: 0; }
.asbptp-fam-promo .asbptp-fam-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.asbptp-fam-promo .asbptp-fam-emoji { font-size: 18px; line-height: 1; }
.asbptp-fam-promo .asbptp-fam-name { font-weight: 600; }
.asbptp-fam-promo .asbptp-fam-badge { font-size: 10px; font-weight: 700; color: #50575e; background: #f0f0f1; border-radius: 9px; padding: 1px 7px; }
.asbptp-fam-promo .asbptp-fam-tagline { margin: 6px 0; color: #50575e; font-size: 12px; }
.asbptp-fam-promo .asbptp-fam-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #8a6100; margin: 6px 0 2px; }
.asbptp-fam-promo .asbptp-fam-list { margin: 0 0 8px; padding: 0; list-style: none; }
.asbptp-fam-promo .asbptp-fam-list li { position: relative; padding-left: 18px; font-size: 12px; color: #1d2327; margin: 2px 0; }
.asbptp-fam-promo .asbptp-fam-free li::before { content: '\2713'; position: absolute; left: 0; color: #1a9d54; }
.asbptp-fam-promo .asbptp-fam-pro li::before { content: '\2726'; position: absolute; left: 0; color: #8a6100; }
.asbptp-fam-promo .asbptp-fam-badge-pro { color: #8a6100; background: #fdf3d8; }
.asbptp-fam-promo .asbptp-fam-thanks { margin: 6px 0 8px; color: #50575e; font-size: 12px; }
.asbptp-fam-cta { width: 100%; text-align: center; margin-top: 4px; box-sizing: border-box; }
.asbptp-fam-cta-review { color: #8a6100; }
.asbptp-fam-dev-lead { margin: 6px 0 10px; color: #50575e; font-size: 12px; }
.asbptp-fam-promo .asbptp-fam-sub { display: block; text-align: center; margin-top: 6px; font-size: 11px; }

/* ----------------------------------------------------------------- */
/* Settings screen layout (moved here from a <style> block at the end of */
/* trait-asbptp-settings-render.php, for the same reason). It still      */
/* comes after everything above, as it did when the page printed it.    */
/* ----------------------------------------------------------------- */
.override-rule { margin-bottom: 20px; padding: 15px; border: 1px solid #ccc; background: #f9f9f9; border-radius: 4px; }
.override-rule-details { border-top: 1px solid #ddd; margin-top: 15px; padding-top: 15px; }
.override-rule-details summary { font-weight: bold; cursor: pointer; }
.override-rule-details .form-table th, .override-rule-details .form-table td { padding: 8px 10px; }
.override-rule .rule-target-table th, .override-rule .rule-target-table td { padding: 8px 10px; vertical-align: top; }
.override-rule .select2-container { width: 100% !important; }
.asbptp-font-select-container { max-width: 350px; }
.asbptp-font-select-container .select2-container { width: 100% !important; }
#image_size_custom_wrapper { margin-left: 20px; }
.form-table h3 { padding: 15px 0 0; border-top: 1px dotted #ccc; margin-top: 15px; }
.form-table tr:first-child h3 { border-top: none; margin-top: 0; padding-top: 0; }
/* プレビューは設定を触っている間ずっと見えていないと意味がない。
 * sticky が効く範囲は「親の箱の中」なので、右カラム自身が行の高さ
 * いっぱいに伸びていないと、サイドバーの中身（プレビュー＋紹介
 * カード）の分だけ動いた所で一緒に流れて消える。伸ばす指定は
 * pc-admin.css 側（#asbptp-settings-sidebar { align-self: stretch }）。 */
.asbptp-preview-container { position: sticky; top: 48px; }
/* 背の高いプレビュー（正方形など）でも画面から溢れないようにする。 */
#asbptp-settings-preview-image { max-height: 58vh; object-fit: contain; transition: opacity .12s linear; }
/* 描き直している間の絵は「答え」ではない。濃いまま残すと、変えた直後の
 * 数秒間、前の設定の絵を結果として読んでしまう。 */
#asbptp-settings-preview-image.is-updating { opacity: .35; }
#asbptp-settings-preview-wrapper { position: relative; width: 100%; background-color: #f0f0f0; min-height: 160px; }
#asbptp-settings-preview-error p { padding: 15px; margin: 0; }
#asbptp-settings-preview-wrapper .spinner-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
}
.asbptp-bg-settings-wrapper .asbptp-image-repeater { border: 1px solid #ddd; padding: 10px; margin-top: 10px; background: #fff; }
.asbptp-bg-settings-wrapper .asbptp-image-repeater-item { display: flex; align-items: center; gap: 10px; padding: 5px; border-bottom: 1px solid #eee; }
.asbptp-bg-settings-wrapper .asbptp-image-repeater-item:last-child { border-bottom: none; }
.asbptp-bg-settings-wrapper .asbptp-image-repeater-item img { width: 80px; height: 42px; object-fit: cover; }
.asbptp-bg-settings-wrapper .asbptp-image-repeater-item .actions { margin-left: auto; }
.asbptp-bg-settings-wrapper .asbptp-overlay-setting { display: flex; align-items: center; gap: 15px; margin-top: 15px; }
.asbptp-bg-settings-wrapper .asbptp-overlay-setting .components-range-control { flex: 1; }
.asbptp-bg-settings-wrapper fieldset { padding-bottom: 10px; }
.asbptp-padding-inputs { display: flex; align-items: center; gap: 5px; }
.asbptp-padding-inputs input { width: 60px; }
@media screen and (max-width: 960px) {
	/* 1 カラムでは右に置けない。列の最後（＝全設定の後ろ）へ回すと
	 * 存在しないのと同じなので、設定の手前に出して上へ貼り付ける。
	 * display:contents でサイドバーの箱だけ畳み、プレビューと紹介
	 * カードを外側のグリッドへ直接並べ替える。 */
	#asbptp-settings-wrapper { grid-template-columns: 1fr; }
	#asbptp-settings-sidebar { display: contents; }
	.asbptp-preview-container { order: -1; position: sticky; top: 32px; z-index: 20; margin: 0; }
	#asbptp-settings-preview-image { max-height: 22vh; }
}
@media screen and (max-width: 782px) {
	/* 782px 以下では wp-admin のツールバーが固定されず一緒に流れる。 */
	.asbptp-preview-container { top: 0; }
}