/*
 * Constraint spec.
 *
 * A three-column table in a card: a navy header band, one row per constraint,
 * and the severity as a tinted badge in its own column. The proportions are no
 * longer placeholders — this is the case study design.
 *
 * Same rules as every component stylesheet: design-system `--btx-*` tokens
 * only, a fallback on every var(). See cta-button/style.css for the full note.
 *
 * One thing here needs saying out loud. The design asks for red and green
 * badges and the palette has no status slots — it has six brand colours, none
 * of them a semantic red or green. Rather than hard-code the two hues and lose
 * the palette, severity is mixed out of the slots that already carry the right
 * signal: `secondary-2` for blocked, `primary-2` for limited. So blocked reads
 * deep rose rather than brick red, and both badges repaint if the palette
 * moves. Ratios were picked against the card, not guessed — see each pair.
 */

@layer bertex-components {
	.btxc-constraint-spec {
		box-sizing: border-box;
		font-family: var(--btx-font-body-family, system-ui, sans-serif);
		color: var(--btx-color-primary-1, #1a2744);
	}

	.btxc-constraint-spec__heading {
		margin: 0 0 var(--btx-text-spacing, 1rem);

		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: var(--btx-font-heading-lg, 1.75rem);
		line-height: var(--btx-line-height-heading, 1.2);
	}

	/*
	 * The card. `overflow: hidden` is load-bearing rather than tidiness — it is
	 * what clips the square corners of the header band into the rounded ones of
	 * the frame, which a border-radius on the band itself cannot do once the
	 * table collapses its borders.
	 *
	 * Transparent border rather than none, so the box keeps the same size as
	 * every other bordered card in the set and a theme can colour it in.
	 */
	.btxc-constraint-spec__frame {
		border: 1px solid transparent;
		border-radius: var(--btx-border-radius-lg, 0.5rem);
		background-color: var(--btx-color-text-bg-1, #f9fafb);
		box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 8px 24px rgb(0 0 0 / 8%);
		overflow: hidden;
	}

	/*
	 * Fixed layout, so the label column stays put down the page instead of
	 * being resized by whichever value happens to be longest. The price is that
	 * a long unbroken token would overflow rather than widen its column, which
	 * `overflow-wrap` pays.
	 */
	.btxc-constraint-spec__table {
		width: 100%;
		table-layout: fixed;
		border-collapse: collapse;
		overflow-wrap: break-word;
	}

	/* Header band --------------------------------------------------------- */

	.btxc-constraint-spec__head {
		background-color: var(--btx-color-primary-1, #1a2744);
		color: var(--btx-color-text-bg-1, #f9fafb);
	}

	.btxc-constraint-spec__column {
		padding: var(--btx-spacing-xs, 0.5rem) var(--btx-spacing-m, 1rem);

		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: var(--btx-font-body-m, 1rem);
		font-weight: 700;
		line-height: var(--btx-line-height-body, 1.6);
		text-align: center;
	}

	.btxc-constraint-spec__column--label {
		width: 28%;
	}

	.btxc-constraint-spec__column--status {
		width: 26%;
	}

	/* Rows ---------------------------------------------------------------- */

	/*
	 * Separators between rows and not around them: the band already closes the
	 * top of the list and the frame closes the bottom, so a border on every row
	 * would double both edges.
	 */
	.btxc-constraint-spec__row + .btxc-constraint-spec__row {
		border-top: 1px solid var(--btx-color-text-bg-1-dark-30, #dbdcde);
	}

	.btxc-constraint-spec__label,
	.btxc-constraint-spec__value,
	.btxc-constraint-spec__status {
		padding: var(--btx-spacing-s, 0.75rem) var(--btx-spacing-m, 1rem);
		vertical-align: middle;
	}

	.btxc-constraint-spec__label {
		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: var(--btx-font-body-m, 1rem);
		font-weight: 700;
		line-height: var(--btx-line-height-body, 1.6);
		text-align: left;
		color: var(--btx-color-primary-1, #1a2744);
	}

	.btxc-constraint-spec__value {
		font-size: var(--btx-font-body-m, 1rem);
		line-height: var(--btx-line-height-body, 1.6);
		text-align: left;
	}

	/*
	 * The column holds either `0.3%` or a full sentence, and the design gives
	 * them different shapes rather than making one of them look wrong: prose
	 * runs ragged-right like the paragraph it is, a figure is boxed and centred
	 * so it reads as a measurement.
	 *
	 * Centring belongs to the cell, not the box, so it takes `:has()`. Where
	 * that is unsupported the figure keeps its box and sits left, which is the
	 * old layout — a degradation, not a break.
	 */
	.btxc-constraint-spec__value:has(.btxc-constraint-spec__figure) {
		text-align: center;
	}

	.btxc-constraint-spec__figure {
		display: inline-block;
		padding: var(--btx-spacing-xxs, 0.35rem) var(--btx-spacing-xs, 0.75rem);

		border: 2px solid var(--btx-color-primary-1, #1a2744);
		border-radius: var(--btx-border-radius-m, 0.25rem);

		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-weight: 700;
		line-height: var(--btx-line-height-heading, 1.2);
		white-space: nowrap;
	}

	.btxc-constraint-spec__status {
		text-align: center;
	}

	/*
	 * All three severity words are seven characters, so they come out close to
	 * the same width on their own; the min-width is what makes them exactly
	 * equal, which is what stops the column reading as ragged.
	 */
	.btxc-constraint-spec__badge {
		display: inline-block;
		min-width: 8em;
		padding: var(--btx-spacing-xxs, 0.35rem) var(--btx-spacing-xs, 0.75rem);

		border-radius: var(--btx-border-radius-m, 0.25rem);

		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: var(--btx-font-body-m, 1rem);
		font-weight: 700;
		line-height: var(--btx-line-height-heading, 1.2);
		text-align: center;
	}

	/* Severity ------------------------------------------------------------ */

	/*
	 * Each pair is declared twice: a flat hex pair first, then the same pair
	 * mixed from the palette. A browser without `color-mix()` drops the second
	 * declaration and keeps the first, so it gets the default palette's colours
	 * frozen rather than an unstyled badge. The hexes ARE the mix, computed
	 * against the shipped palette — they are fallbacks in exactly the sense
	 * every var() fallback in this file is.
	 *
	 * Contrast is badge ink against badge fill, measured, not assumed.
	 */

	/* Neutral: a fact, not a problem — so it is the only one with no hue. */
	.btxc-constraint-spec__row[data-status='neutral'] .btxc-constraint-spec__badge {
		background-color: var(--btx-color-text-bg-1-dark-20, #e5e6e7);
		color: var(--btx-color-primary-1-light-40, #2e4578); /* 7.5:1 */
	}

	/* Limited: primary-2 at 14% on the card, ink at 40% over primary-1. 5.4:1 */
	.btxc-constraint-spec__row[data-status='limited'] .btxc-constraint-spec__badge {
		background-color: #e3f8e8;
		color: #226f5b;

		background-color: color-mix(
			in oklab,
			var(--btx-color-primary-2, #09e76a) 14%,
			var(--btx-color-text-bg-1, #f9fafb)
		);
		color: color-mix(
			in oklab,
			var(--btx-color-primary-2, #09e76a) 40%,
			var(--btx-color-primary-1, #1a2744)
		);
	}

	/* Blocked: secondary-2 at 12% on the card, ink at 55% over primary-1. 5.9:1 */
	.btxc-constraint-spec__row[data-status='blocked'] .btxc-constraint-spec__badge {
		background-color: #ffe5ee;
		color: #96336d;

		background-color: color-mix(
			in oklab,
			var(--btx-color-secondary-2, #ff0190) 12%,
			var(--btx-color-text-bg-1, #f9fafb)
		);
		color: color-mix(
			in oklab,
			var(--btx-color-secondary-2, #ff0190) 55%,
			var(--btx-color-primary-1, #1a2744)
		);
	}

	.btxc-constraint-spec__footnote {
		margin: var(--btx-spacing-m, 1rem) 0 0;

		font-size: var(--btx-font-body-s, 0.875rem);
		line-height: var(--btx-line-height-body, 1.6);
		color: var(--btx-color-primary-1-light-40, #2e4578);
	}

	/* Stacked ------------------------------------------------------------- */

	/*
	 * Three columns of prose do not fit a phone, so each row becomes a small
	 * card: the constraint and its badge on one line, what was true of it
	 * underneath. Changing `display` on table elements drops their implicit
	 * roles in several engines, which is why the render callback writes every
	 * role explicitly — the table stays a table here, it just stops looking
	 * like one.
	 *
	 * The header band is hidden rather than removed. `display: none` would take
	 * the column headers out of the accessibility tree along with the band, and
	 * the rows still reference them.
	 */
	@media (width < 48rem) {
		.btxc-constraint-spec__table,
		.btxc-constraint-spec__head,
		.btxc-constraint-spec__body,
		.btxc-constraint-spec__row,
		.btxc-constraint-spec__label,
		.btxc-constraint-spec__value,
		.btxc-constraint-spec__status {
			display: block;
		}

		.btxc-constraint-spec__head {
			position: absolute;
			width: 1px;
			height: 1px;
			margin: -1px;
			padding: 0;
			border: 0;
			overflow: hidden;
			clip-path: inset(50%);
			white-space: nowrap;
		}

		.btxc-constraint-spec__row {
			display: grid;
			grid-template-columns: minmax(0, 1fr) auto;
			align-items: center;
			gap: var(--btx-spacing-xxs, 0.35rem);

			padding: var(--btx-spacing-s, 0.75rem) var(--btx-spacing-m, 1rem);
		}

		.btxc-constraint-spec__label,
		.btxc-constraint-spec__value,
		.btxc-constraint-spec__status {
			padding: 0;
		}

		.btxc-constraint-spec__status {
			grid-column: 2;
			grid-row: 1;
			text-align: right;
		}

		.btxc-constraint-spec__value {
			grid-column: 1 / -1;
		}

		/* Same specificity as the rule above, later in the file: a figure on a
		   phone is one item in a stack, not a column to centre in. */
		.btxc-constraint-spec__value:has(.btxc-constraint-spec__figure) {
			text-align: left;
		}

		.btxc-constraint-spec__badge {
			min-width: 0;
		}
	}
}