/* AI Standards — public catalogue (v3.0, CSS Grid). Scoped to .aism-root
   to avoid colliding with the theme's own styles. */

.aism-root {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	color: #1B2A4A;
	background: #F4F2EC;
	padding: 16px;
	border-radius: 10px;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}
.aism-root *, .aism-root *::before, .aism-root *::after { box-sizing: border-box; }

.aism-mono { font-family: 'Courier New', Courier, monospace; }

/* ------------------------------------------------------------------ */
/* Filter bar                                                          */
/* ------------------------------------------------------------------ */
.aism-filterbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }

.aism-search input {
	border: 1px solid #D8D3C4; border-radius: 6px; padding: 7px 10px; font-size: 13px;
	min-width: 200px; background: #FFFFFF; color: #1B2A4A;
}

.aism-checkbox-group { display: flex; gap: 8px; flex-wrap: wrap; }

/* Real (accessible) checkboxes, styled as pills with a drawn checkmark —
   not just buttons that merely look like a selection. */
.aism-checkbox-pill {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 12px; font-weight: 500; padding: 6px 12px 6px 8px;
	border-radius: 999px; border: 1px solid #D8D3C4; background: #FFFFFF; color: #8C8571;
	cursor: pointer; user-select: none; line-height: 1;
}
.aism-checkbox-pill.is-checked { border-color: #2C5F8A; background: rgba(44,95,138,.08); color: #2C5F8A; }
.aism-checkbox-pill input[type="checkbox"] {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.aism-checkbox-mark {
	width: 16px; height: 16px; flex-shrink: 0; border-radius: 4px; border: 1.5px solid #C8C2AE;
	background: #FFFFFF; position: relative;
}
.aism-checkbox-pill.is-checked .aism-checkbox-mark { background: #2C5F8A; border-color: #2C5F8A; }
.aism-checkbox-mark::after {
	content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px;
	border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg);
	opacity: 0; transition: opacity .1s ease;
}
.aism-checkbox-pill.is-checked .aism-checkbox-mark::after { opacity: 1; }
.aism-checkbox-pill:focus-within { outline: 2px solid #2C5F8A; outline-offset: 2px; }

.aism-filterbar select {
	font-size: 12px; border: 1px solid #D8D3C4; border-radius: 6px; padding: 6px 8px;
	background: #FFFFFF; color: #1B2A4A;
}

.aism-count { font-size: 12px; color: #8C8571; margin-left: auto; }

.aism-legend-toggle {
	font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: 999px;
	border: 1px solid #D8D3C4; background: #FFFFFF; color: #8C8571; cursor: pointer;
}
.aism-legend-toggle.is-active { border-color: #2C5F8A; background: rgba(44,95,138,.08); color: #2C5F8A; }

.aism-stage-legend {
	display: flex; flex-wrap: wrap; gap: 8px 16px;
	background: #FBFAF6; border: 1px solid #D8D3C4; border-radius: 8px;
	padding: 10px 14px; margin-bottom: 12px; font-size: 12.5px;
}
.aism-stage-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #4A4738;
	line-height: 1;
}
.aism-stage-legend-item .aism-dot { width: 8px; height: 8px; flex-shrink: 0; }
.aism-stage-legend-item .aism-mono { font-weight: 600; color: #1B2A4A; line-height: 1; }

/* ------------------------------------------------------------------ */
/* Data display — CSS Grid. minmax() guarantees each column NEVER gets  */
/* narrower than its minimum, regardless of screen width. The Number    */
/* column has a generous minimum width and NO truncation — the whole    */
/* number, including the year, must always be visible.                  */
/* Three columns (Number / Title / Status code) — no organisation       */
/* column, since this catalogue only lists CEN-CENELEC publications.    */
/* ------------------------------------------------------------------ */
.aism-root {
	--aism-grid-columns: minmax(200px, 1fr) minmax(220px, 2.6fr) minmax(170px, 1.1fr);
}

.aism-grid-wrap {
	background: #FFFFFF; border: 1px solid #D8D3C4; border-radius: 10px;
	overflow-x: auto;
}

.aism-grid-row {
	display: grid;
	grid-template-columns: var(--aism-grid-columns);
	column-gap: 12px;
	align-items: center;
	border-bottom: 1px solid #EDE9DC;
}
.aism-grid-row:not(.aism-grid-head):not(.is-selected):last-child { border-bottom: none; }
.aism-grid-row:not(.aism-grid-head) { cursor: pointer; }
.aism-grid-row:not(.aism-grid-head):hover { background: #F7F5EE; }
.aism-grid-row.is-selected { background: #EAF1F6; }
.aism-grid-row:not(.aism-grid-head):focus-visible { outline: 2px solid #2C5F8A; outline-offset: -2px; }

.aism-grid-head {
	font-size: 10px; letter-spacing: .03em; color: #8C8571; text-transform: uppercase; font-weight: 600;
	border-bottom: 1px solid #D8D3C4;
}
.aism-grid-head .aism-grid-cell { white-space: nowrap; }

.aism-grid-cell { padding: 10px 4px; font-size: 12.5px; overflow: hidden; }
.aism-grid-cell:first-child { padding-left: 14px; }
.aism-grid-cell:last-child { padding-right: 14px; }
.aism-grid-cell-title { overflow-wrap: break-word; }

.aism-grid-empty { padding: 24px; text-align: center; color: #A6A08C; font-style: italic; }

.aism-code {
	font-weight: 600; display: block;
	white-space: normal; overflow-wrap: break-word; word-break: break-word;
}

/* Green OJEU badge under the number — shown ONLY when the standard is
   formally cited in OJEU (independent of the "Harmonised standard" field —
   see buildDetailRow() in frontend.js). */
.aism-ojeu-badge {
	display: inline-flex; align-items: center; gap: 3px;
	font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
	color: #1C7C4C; background: #E6F4EC; border: 1px solid #1C7C4C;
	border-radius: 999px; padding: 1px 7px; margin-top: 4px; line-height: 1;
}

.aism-stage { display: inline-flex; align-items: flex-start; gap: 5px; white-space: normal; font-size: 12px; line-height: 1.4; }
.aism-stage .aism-dot { margin-top: 4px; }
.aism-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.aism-muted { color: #A6A08C; font-size: 12px; }

/* ------------------------------------------------------------------ */
/* Inline expanded details — shown directly UNDER the selected row,     */
/* not at the bottom of the page.                                       */
/* ------------------------------------------------------------------ */
.aism-detail-inline {
	background: #FBFAF6;
	border-bottom: 1px solid #EDE9DC;
	border-left: 3px solid #2C5F8A;
	padding: 16px 18px 18px calc(14px + 14px);
}
.aism-detail-inline .aism-detail-head h3 { font-size: 15.5px; font-weight: 600; margin: 0; color: #1B2A4A; }
.aism-detail-inline .aism-detail-meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	margin-top: 8px; font-size: 12.5px;
}
.aism-harmonised-text { color: #2C5F8A; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; line-height: 1; }
.aism-harmonised-icon { font-weight: 700; color: #2C5F8A; }
.aism-ojeu-text { color: #1C7C4C; font-weight: 600; }

.aism-detail-inline .aism-scope { margin-top: 12px; max-width: 70ch; }
.aism-label { font-size: 10.5px; color: #8C8571; letter-spacing: .06em; }
.aism-detail-inline .aism-scope p { font-size: 13.5px; color: #4A4738; margin: 4px 0 0; line-height: 1.55; }

.aism-articles { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.aism-article-tag { font-size: 11px; border: 1px solid #D8D3C4; border-radius: 999px; padding: 2px 8px; color: #1B2A4A; background: #FFFFFF; }

.aism-detail-inline .aism-detail-footer {
	display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: #8C8571;
}
.aism-detail-inline .aism-detail-footer a { color: #2C5F8A; }

/* "See details" / "Download" — small icon + text, one combined link. */
.aism-iconlink {
	display: inline-flex; align-items: center; gap: 5px;
	color: #2C5F8A; text-decoration: none; font-weight: 600; line-height: 1;
}
.aism-iconlink:hover, .aism-iconlink:focus { text-decoration: underline; }
.aism-iconlink-icon { display: inline-flex; line-height: 0; color: currentColor; }
.aism-iconlink-icon svg { display: block; }

/* ------------------------------------------------------------------ */
/* "Show more standards"                                               */
/* ------------------------------------------------------------------ */
.aism-loadmore { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 18px; }
.aism-btn-loadmore {
	font-size: 13px; font-weight: 600; padding: 10px 22px; border-radius: 999px;
	border: 1px solid #2C5F8A; background: #FFFFFF; color: #2C5F8A; cursor: pointer;
}
.aism-btn-loadmore:hover { background: rgba(44,95,138,.08); }
.aism-loadmore-count { font-size: 12px; color: #8C8571; }

/* ------------------------------------------------------------------ */
/* Below 780px: stack each field in its own card with a label, instead  */
/* of squeezing columns into a narrow screen.                           */
/* ------------------------------------------------------------------ */
@media (max-width: 780px) {
	.aism-grid-wrap { overflow-x: visible; border: none; background: transparent; }
	.aism-grid-head { display: none; }

	.aism-grid-row {
		display: block;
		background: #FFFFFF; border: 1px solid #D8D3C4; border-radius: 10px;
		padding: 12px 14px; margin-bottom: 10px;
	}
	.aism-grid-row.is-selected { border-color: #2C5F8A; border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }

	.aism-grid-cell { display: block; padding: 4px 0 !important; }
	.aism-code { white-space: normal; overflow: visible; text-overflow: unset; max-width: none; }

	.aism-grid-cell[data-label]::before {
		content: attr(data-label);
		display: block; font-size: 10px; font-weight: 600; letter-spacing: .04em;
		text-transform: uppercase; color: #8C8571; margin-bottom: 2px;
	}
	.aism-grid-cell-title { font-size: 14px; font-weight: 500; margin: 6px 0; }

	.aism-detail-inline {
		padding: 14px 14px 16px 16px;
		border-radius: 0 0 10px 10px;
		border-left: 3px solid #2C5F8A;
		margin-bottom: 10px;
	}
}

@media (max-width: 640px) {
	.aism-filterbar { flex-direction: column; align-items: stretch; }
	.aism-search input { width: 100%; }
	.aism-count { margin-left: 0; }
}