/* Development-only styles — NEVER loaded on production.
 *
 * Enqueued by `kodansha_house_scripts()` only when
 * `! kodansha_house_is_production_environment()`. The class names below
 * are safe to leave applied to production markup: with this stylesheet
 * absent, they have zero visual effect.
 *
 * Ported from the kodansha.us sister theme's `css/dev-styles.css`.
 *
 * Usage:
 *   .dev-in-progress           — bold WIP indicator. Orange left border,
 *                                "🚧 In Development" badge at top-right.
 *                                Use on a section/container whose contents
 *                                aren't production-ready.
 *   .dev-in-progress--subtle   — quieter WIP indicator. Yellow dashed
 *                                border all around, "WIP" badge. Use on
 *                                buttons / CTAs whose `href` is still a
 *                                placeholder.
 *   .dev-review-only           — violet left border, "👁 Review Only —
 *                                Will Be Hidden" badge. Use on a section
 *                                that's ready for stakeholder review but
 *                                is NOT going live yet (slated to be
 *                                hidden/removed before/at launch).
 */

.dev-in-progress {
	position: relative;
	border-left: 4px solid #f39c12;
}

.dev-in-progress::before {
	content: "🚧 In Development";
	position: absolute;
	top: -8px;
	right: 8px;
	background: #f39c12;
	color: #fff;
	font-family: "Maax Medium";
	font-weight: 400;
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 12px;
	z-index: 10;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	pointer-events: none;
}

/* Subtle variant — for inline CTAs/buttons where the bold orange border
 * would clash with the button's existing visual treatment. */
.dev-in-progress--subtle {
	background: rgba(255, 235, 59, 0.1);
	border: 1px dashed #ffc107;
}

.dev-in-progress--subtle::before {
	content: "WIP";
	background: #ffc107;
	color: #333;
}

/* Review-only — section is review-ready but won't ship in this state;
 * it's slated to be hidden/removed before or at launch. Violet so it
 * reads as distinct from the orange "In Development" WIP tag. */
.dev-review-only {
	position: relative;
	border-left: 4px solid #8e44ad;
}

.dev-review-only::before {
	content: "👁 Review Only — Will Be Hidden";
	position: absolute;
	top: -8px;
	right: 8px;
	background: #8e44ad;
	color: #fff;
	font-family: "Maax Medium";
	font-weight: 400;
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 12px;
	z-index: 10;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	pointer-events: none;
}