/*
 * Square Buttons — group "clean".
 *
 * Ported from docs/quadrat-buttons.html (group B). The conversion rules are
 * documented in group-gravitas.css and apply unchanged; the two that matter most
 * here:
 *
 *   - every scaling px value is px / 3 in cqi (the tile is drawn at 300px)
 *   - the prototype's var(--c) becomes var(--mf-sq-c), which the base sheet
 *     resolves to the chosen accent or the engine default
 *
 * This group leans on the accent more than any other: six of its seven templates
 * tint something with it.
 *
 * Requires assets/square/base.css (registered as its dependency).
 */

/*
 * Every template in this group uses the same muted grey for its kicker. The
 * prototype's #8b93a1 measured 3.09:1 on white at 9.5px, below WCAG AA;
 * darkened to 4.80:1 with hue and saturation preserved.
 */
.mf-sq--soft-card .mf-sq__k,
.mf-sq--top-accent .mf-sq__k,
.mf-sq--big-number .mf-sq__k,
.mf-sq--progress .mf-sq__k,
.mf-sq--bookmark .mf-sq__k,
.mf-sq--quote-card .mf-sq__k {
	color: #6c737e;
}

/* Shared lift-on-hover, the group's signature. */
.mf-sq--soft-card:hover,
.mf-sq--top-accent:hover,
.mf-sq--big-number:hover,
.mf-sq--progress:hover,
.mf-sq--quote-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgb(20 30 55 / 10%);
}

/* ---------- sq-soft-card (B01) — icon chip ---------- */
.mf-sq--soft-card {
	background: #fff;
	border: 1px solid #e8eaef;
	box-shadow: 0 1px 3px rgb(20 30 55 / 5%);
}

/*
 * The chip. Unlike the rest of this group's decorations it carries a real glyph
 * from the self-hosted icon font, chosen per item — the renderer enqueues the
 * font only for this template (Mf_Square_Render::needs_icon_font).
 *
 * The font-family has to be declared HERE. assets/material-symbols.css contains
 * only the @font-face — there is no `.material-symbols-outlined` class rule in
 * this plugin, unlike in Google's CDN snippet. Without this the ligature name
 * renders as the literal word "database". The `liga` feature is what turns that
 * name into a glyph.
 */
.mf-sq--soft-card .mf-sq__dec {
	display: flex;
	top: 6.667cqi;
	left: 6.667cqi;
	z-index: 3;
	align-items: center;
	justify-content: center;
	width: 17.333cqi;
	height: 17.333cqi;
	border-radius: 4.667cqi;
	background: color-mix(in srgb, var(--mf-sq-c) 12%, #fff);
	color: var(--mf-sq-accent-deep);
	font-family: "Material Symbols Outlined", var(--mf-font);
	font-size: 8cqi;
	font-weight: 400;
	font-feature-settings: "liga";
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	-webkit-font-smoothing: antialiased;
}

/* ---------- sq-top-accent (B02) — coloured top edge ---------- */
.mf-sq--top-accent {
	background: #fff;
	border: 1px solid #eceef2;
	border-top: 5px solid var(--mf-sq-c);
	border-radius: 3.333cqi;
}

/* ---------- sq-big-number (B04) — proof figure ---------- */
.mf-sq--big-number {
	justify-content: space-between;
	background: #fff;
	border: 1px solid #eceef2;
}

.mf-sq--big-number .mf-sq__dec--text {
	color: var(--mf-sq-accent-deep);
	font-size: 25.333cqi;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 0.92;
	letter-spacing: -0.045em;
}

/* ---------- sq-progress (B06) — position in a series ---------- */
.mf-sq--progress {
	background: #fff;
	border: 1px solid #e8eaef;
}

/*
 * The bars. Count and fill come from the item ("2/3"), not from a position in a
 * list — a standalone square has none. The base sheet styles the bars; this only
 * places the row.
 */
.mf-sq--progress .mf-sq__dec--fill {
	position: absolute;
	top: 7.333cqi;
	right: 6.667cqi;
	left: 6.667cqi;
	z-index: 3;
}

/* ---------- sq-bookmark (B08) — ribbon ---------- */
.mf-sq--bookmark {
	background: #fff;
	border: 1px solid #e8eaef;
}

.mf-sq--bookmark .mf-sq__dec {
	top: 0;
	left: 8cqi;
	z-index: 3;
	width: 6.667cqi;
	height: 17.333cqi;
	background: var(--mf-sq-c);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
	transition: height 0.25s ease;
}

.mf-sq--bookmark:hover .mf-sq__dec {
	height: 22cqi;
}

/* The ribbon hangs from the top edge at 8cqi, so the label moves to the other
   corner. Measured as a 20×19 overlap at the shared default. */
.mf-sq--bookmark .mf-sq__ad {
	right: 0;
	left: auto;
	border-radius: 0 0 0 1.667cqi;
}

/* ---------- sq-frost (B09) — light glass ---------- */
.mf-sq--frost {
	padding: 11.333cqi;
	background: linear-gradient(140deg, #dfe6f2, #efe7f4, #f4ebe2);
}

.mf-sq--frost .mf-sq__dec {
	inset: 4.667cqi;
	border: 1px solid rgb(255 255 255 / 90%);
	border-radius: 4cqi;
	background: rgb(255 255 255 / 55%);
	backdrop-filter: blur(9px);
	transition: background 0.25s ease;
}

.mf-sq--frost .mf-sq__k {
	color: var(--mf-sq-accent-deep);
}

.mf-sq--frost:hover .mf-sq__dec {
	background: rgb(255 255 255 / 68%);
}

/*
 * The glass panel *is* this tile's body, so the label belongs inside it rather than
 * straddling its edge — at the shared default it clipped the panel's top-left corner
 * by 5px. Fully rounded, because it no longer sits in a corner of the tile.
 */
.mf-sq--frost .mf-sq__ad {
	top: 6.667cqi;
	left: 6.667cqi;
	border-radius: 1.667cqi;
}

/* ---------- sq-quote-card (B12) — testimonial ---------- */
.mf-sq--quote-card {
	background: #fff;
	border: 1px solid #e8eaef;
}

/* The opening quote mark, as ornament: the glyph is CSS, so it is neither
   selectable nor announced. */
.mf-sq--quote-card .mf-sq__dec {
	top: 2cqi;
	left: 6cqi;
	z-index: 1;
	color: var(--mf-sq-accent-deep);
	font-family: var(--mf-serif);
	font-size: 27.333cqi;
	line-height: 1;
	opacity: 0.22;
}

.mf-sq--quote-card .mf-sq__dec::before {
	content: "\201E";
}

.mf-sq--quote-card .mf-sq__t {
	font-family: var(--mf-serif);
	font-size: 6.333cqi;
	font-weight: 500;
}

/* ---------- sq-checklist (B13) — the arguments, ticked off ---------- */
.mf-sq--checklist {
	background: #fff;
	border: 1px solid #e8eaef;
}

/*
 * A real <ul>, and the tick is a ::before rather than a character in the text:
 * decoration a screen reader should not read out as content. The list comes from
 * the meta field, comma-separated and capped, so a long one cannot overrun the
 * title below it.
 */
.mf-sq--checklist .mf-sq__list {
	position: absolute;
	top: 6.667cqi;
	right: 6.667cqi;
	left: 6.667cqi;
	z-index: 3;
}

.mf-sq--checklist .mf-sq__list ul {
	display: flex;
	flex-direction: column;
	gap: 2.667cqi;
	margin: 0;
	padding: 0;
}

.mf-sq--checklist .mf-sq__list li {
	display: flex;
	gap: 2.667cqi;
	color: #4b5563;
	font-size: 4cqi;
	line-height: 1.3;
	list-style: none;
}

.mf-sq--checklist .mf-sq__list li::before {
	color: var(--mf-sq-accent-deep);
	font-size: 3.667cqi;
	font-weight: 800;
	content: "\2713";
}

.mf-sq--checklist:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgb(20 30 55 / 10%);
}