/* Bonzi overrides for the scoped page clone (loaded last).
 *
 * The captured clone theme is grayscale and uses very faint hairlines:
 * dark-mode `--border` is `#ffffff1a` (white @ 10%) and `--primary` is
 * `#e5e5e5` (near-white). On Bonzi's near-black page that makes the
 * structural lines (the `border-x` rails, `border-r` column split, the
 * accordion/tab dividers) and the active-tab accent practically
 * invisible. Repoint the scoped theme variables to Bonzi's palette:
 * stronger hairlines + the brand amber accent. Variables cascade to
 * every `border-color:var(--border)` / `var(--primary)` consumer, so the
 * whole clone picks them up without touching the generated CSS.
 */

.new-clone .dark {
	/* Refined hairline on near-black — soft enough to frame, not fence in. */
	--border: #ffffff1f; /* white @ 12% */
	--input: #ffffff1f;
	/* Brand amber accent — drives the active-tab underline
	   (`border-b-primary`) and any `--primary`-tinted affordance. */
	--primary: #fbbf24;
	--ring: #fbbf24;
}

/* The active FAQ tab underline reads as the accent. `border-b-primary`
   only sets the bottom color; make the indicator a touch thicker so the
   amber is unmistakable. */
.new-clone [data-slot="tabs-trigger"][data-state="active"] {
	border-bottom-width: 2px;
	color: #fbbf24;
}

/* Mobile: close the "Create With" models grid frame. At `grid-cols-2` the
   left-column cells have no left edge, and the final cell drops its right
   edge (`last:border-r-0`), so the grid reads as unframed on the left and at
   the bottom-right. Add those two edges back below the md breakpoint. */
@media (max-width: 767px) {
	.new-clone #stack .grid > div:nth-child(odd) {
		border-left: 1px solid var(--border);
	}
	.new-clone #stack .grid > div:last-child {
		border-right: 1px solid var(--border);
	}
}