/**
 * WoollyWaffles — Ratios view styles.
 *
 * Unlike the waffle grid, this drops into an arbitrary WordPress post inside
 * whatever theme is active, so it deliberately has no colour system of its
 * own: text inherits the surrounding colour, and structural lines are
 * mixed from currentColor at low opacity so they hold up on any light or
 * dark theme without a separate light/dark toggle. The explicit colours
 * are the ratio bar fills and legend swatches (from the chart's diverging
 * palette) and the filled squares (from --waffly-ratios-highlight, set
 * inline on the figure from the chart's ratio_squares_colour).
 */

.waffly-ratios__notice {
	/* Editor-only (current_user_can('edit_posts')) explanation shown in
	   place of the table when the shortcode can't render -- an unknown
	   chart ID, or one without enough tabs to compare. Deliberately plain
	   text on a dashed currentColor border rather than a themed "alert"
	   colour: it needs to read as a placeholder note to the person who can
	   fix it, not as an error state a real visitor might see. */
	margin: 1.5em auto;
	padding: 0.8em 1em;
	border: 1px dashed rgba(128, 128, 128, 0.5);
	border-radius: 4px;
	font-size: 0.92em;
	opacity: 0.85;
}

.waffly-ratios {
	/* Auto horizontal margin centres the figure whenever its Max Width
	   setting is narrower than the post column -- matches .waffly-waffle's
	   own convention. Explicit width:100% claims the full available width
	   even in a shrink-to-fit container (flex/grid theme layouts), so
	   there's always leftover space for the auto margin to centre into. */
	margin: 1.5em auto;
	width: 100%;
	box-sizing: border-box;
	font-size: 0.92em;
}

.waffly-ratios__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	margin: 0 0 0.6em;
}

.waffly-ratios__head-controls {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	flex-shrink: 0;
	/* space-between alone only pushes this right when a title is also
	   present as the other flex child -- show_title off would otherwise
	   leave this as the sole child and flush left instead. */
	margin-left: auto;
}

.waffly-ratios__title {
	margin: 0;
	font-size: 1.15em;
	font-weight: 600;
}

/* Hidden by default -- waffly-ratios-front.js adds is-scrollable to the
   figure only once it's confirmed the table-wrap actually overflows, so
   this never shows on a chart (or a screen) that doesn't need it. Without
   JavaScript it stays hidden; the table itself is still fully usable via
   its own overflow-x:auto, just without the hint. */
.waffly-ratios__scroll-hint {
	display: none;
	align-items: center;
	gap: 0.25em;
	flex-shrink: 0;
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	opacity: 0.65;
	white-space: nowrap;
}

.waffly-ratios.is-scrollable .waffly-ratios__scroll-hint {
	display: inline-flex;
}

.waffly-ratios__scroll-hint-arrow {
	font-size: 0.85em;
}

.waffly-ratios__table-wrap {
	overflow-x: auto;
	border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
	border-radius: 4px;
}

.waffly-ratios__table {
	table-layout: fixed;
	border-collapse: collapse;
	width: 100%;
}

/* Fixed layout makes a column's width authoritative regardless of how long
   its header label is — the whole point, since "Difficulty:Effectiveness"
   is far wider than any value or ratio cell that will ever sit under it.
   Item, Category, and value column widths are computed per chart in
   Waffly_Ratios::column_widths() and set inline on each header cell, so
   a column takes only the room its own data actually needs (e.g. a
   Category column of short labels stays narrow; a squares column reserves
   space for exactly this chart's Max Value, not a worst-case ten). Only
   the ratio column stays a plain constant here — its width is dominated
   by the fixed-size bar-track, not by the ratio number. */
.waffly-ratios__table th.num,
.waffly-ratios__table td.num {
	text-align: right;
}

.waffly-ratios__table th[data-key^="r"],
.waffly-ratios__table td.waffly-ratios__ratio {
	width: 7.5em;
}

.waffly-ratios__table th,
.waffly-ratios__table td {
	padding: 0.55em 0.6em;
	text-align: left;
	white-space: nowrap;
}

/* Ellipsis-truncation belongs on Item/Category only — a genuinely long
   item name is the one thing here whose content can legitimately exceed
   its column. Value and ratio cells (numbers, squares, bar-tracks) are
   sized to fit what they draw and must stay visible if they ever don't,
   since a clipped square or bar-fill reads as broken, not truncated. */
.waffly-ratios__table td.waffly-ratios__item,
.waffly-ratios__table td:not(.num) {
	overflow: hidden;
	text-overflow: ellipsis;
}

.waffly-ratios__table td.num {
	overflow: visible;
}

/* Headers wrap their label across as many lines as the column's fixed
   width needs — a ratio-pair label like "Difficulty and Complexity:Value
   and Effectiveness" can run past 300px, far more than any fixed header
   height could reserve for a rotated diagonal without either spilling
   into the data rows below or off the top of the table. Ordinary wrapped
   text has no such failure mode: the header row simply grows as tall as
   its own content needs, however long that content is. */
.waffly-ratios__table thead th {
	padding: 0.6em 0.5em;
	vertical-align: bottom;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	user-select: none;
}

.waffly-ratios__table thead th:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.waffly-ratios__table thead th.is-active {
	border-bottom-color: currentColor;
}

.waffly-ratios__label {
	display: inline-block;
	white-space: normal;
	word-break: break-word;
	line-height: 1.3;
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	opacity: 0.7;
}

.waffly-ratios__table thead th:hover .waffly-ratios__label,
.waffly-ratios__table thead th.is-active .waffly-ratios__label {
	opacity: 1;
}

.waffly-ratios__table thead th.is-active .waffly-ratios__label {
	font-weight: 700;
}

.waffly-ratios__table tbody tr {
	border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent);
}

.waffly-ratios__table tbody tr:last-child {
	border-bottom: none;
}

/* Alternating row tint (ratio_zebra_stripes). :nth-child rather than a
   per-row class means this re-derives itself automatically after
   click-to-sort reorders the rows -- nothing to keep in sync. currentColor
   mixed toward transparent tints darker on a light theme and lighter on a
   dark one without knowing which, the same trick used everywhere else in
   this file. */
.waffly-ratios__table--zebra tbody tr:nth-child(even) {
	background: color-mix(in srgb, currentColor 5%, transparent);
}

.waffly-ratios__item {
	font-weight: 500;
}

.waffly-ratios__tag {
	display: inline-block;
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	opacity: 0.65;
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	border-radius: 2px;
	padding: 0.05em 0.4em;
}

/* -------------------------------------------------------------------------
   Value squares (ratio_value_style = 'squares'). Filled colour comes from
   --waffly-ratios-highlight (set on the figure); unfilled squares stay
   theme-relative, like everything else in this file.
   ------------------------------------------------------------------------- */

.waffly-ratios__squares {
	display: inline-flex;
	gap: 2px;
	/* Breathing room after the last square, so one column's squares don't
	   visually run into the next column's — matched by the same allowance
	   in Waffly_Ratios::value_column_width(), which reserves it as part
	   of the column's own width rather than borrowing the cell's padding. */
	margin-right: 0.4em;
	vertical-align: middle;
	overflow: visible;
}

.waffly-ratios__square {
	/* border-box so the 1.5px border sits inside the 0.8em budget instead
	   of adding to it — value_column_width() sizes each square as exactly
	   0.8em, and a content-box border would silently overflow that. */
	box-sizing: border-box;
	width: 0.8em;
	height: 0.8em;
	flex-shrink: 0;
	border-radius: 2px;
	border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent);
	background: color-mix(in srgb, currentColor 10%, transparent);
}

.waffly-ratios__square.is-filled {
	background: var(--waffly-ratios-highlight, #FF0099);
	border-color: color-mix(in srgb, var(--waffly-ratios-highlight, #FF0099) 65%, black 20%);
}

/* -------------------------------------------------------------------------
   Ratio bar-track: a tick at the neutral centre (ratio = 1), and a fill
   running from there out to the ratio's position — length shows distance
   from 1, colour comes from the chart's diverging palette.
   ------------------------------------------------------------------------- */

.waffly-ratios__ratio-cell {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	overflow: visible;
}

.waffly-ratios__ratio-num {
	font-variant-numeric: tabular-nums;
	min-width: 2.2em;
	text-align: right;
}

.waffly-ratios__bar-track {
	position: relative;
	width: 3.6em;
	height: 0.4em;
	flex-shrink: 0;
	border-radius: 2px;
	background: color-mix(in srgb, currentColor 12%, transparent);
}

.waffly-ratios__bar-tick {
	position: absolute;
	left: 50%;
	top: -2px;
	bottom: -2px;
	width: 1px;
	background: color-mix(in srgb, currentColor 40%, transparent);
}

.waffly-ratios__bar-fill {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 2px;
}

.waffly-ratios__dash {
	opacity: 0.4;
}

.waffly-ratios__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3em 1.1em;
	margin-top: 0.85em;
	font-size: 0.82em;
	opacity: 0.85;
}

.waffly-ratios__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.waffly-ratios__swatch {
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	border-radius: 2px;
	flex-shrink: 0;
}

.waffly-ratios__legend-note {
	flex-basis: 100%;
	opacity: 0.75;
}

@media (min-width: 700px) {
	.waffly-ratios__legend-note {
		flex-basis: auto;
	}
}