/* Single-entry content: copyable code blocks + responsive tables.
   Loaded only when the entry contains code blocks or tables (inc/modules/ui-content.php). */

/* ---------- Code blocks ---------- */
.wpi-code {
	--code-bg: var(--wp--preset--color--ink, #0b0b12);
	--code-fg: #e6e8ff;
	--code-line: rgba(201, 206, 255, .12);
	position: relative;
	max-width: 100%;
	min-width: 0;
	margin-block: 1.75rem;
	border-radius: 16px;
	border: 1px solid var(--code-line);
	background:
		radial-gradient(120% 140% at 100% 0, rgba(76, 91, 255, .22), transparent 55%),
		var(--code-bg);
	color: var(--code-fg);
	box-shadow: 0 1px 2px rgba(11, 11, 18, .08), 0 24px 48px -28px rgba(36, 44, 140, .55);
	overflow: hidden;
}
.wpi-code__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	min-height: 48px;
	padding: .45rem .55rem .45rem 1.25rem;
	border-bottom: 1px solid var(--code-line);
	background: rgba(255, 255, 255, .02);
}
.wpi-code__bar::before { /* window dots */
	content: "";
	flex: 0 0 auto;
	width: 46px;
	height: 10px;
	background:
		radial-gradient(circle at 5px 5px, rgba(201, 206, 255, .32) 4px, transparent 4.5px),
		radial-gradient(circle at 23px 5px, rgba(201, 206, 255, .2) 4px, transparent 4.5px),
		radial-gradient(circle at 41px 5px, rgba(201, 206, 255, .12) 4px, transparent 4.5px);
}
.wpi-code.has-lang .wpi-code__bar::before { display: none; }
.wpi-code__lang {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font: 500 .78rem/1 var(--wp--preset--font-family--montreal, inherit);
	color: var(--wp--preset--color--lavender, #c9ceff);
}
.wpi-code__lang::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--indigo, #4c5bff);
	box-shadow: 0 0 0 3px rgba(76, 91, 255, .25), 0 0 12px rgba(76, 91, 255, .8);
}
.wpi-code__copy {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-left: auto;
	min-height: 34px;
	padding: 0 .85rem 0 .7rem;
	border: 1px solid var(--code-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, .05);
	color: var(--code-fg);
	font: 500 .8rem/1 var(--wp--preset--font-family--montreal, inherit);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.wpi-code__copy:hover { background: var(--wp--preset--color--indigo, #4c5bff); border-color: transparent; color: #fff; }
.wpi-code__copy:focus-visible { outline: 2px solid var(--wp--preset--color--lavender, #c9ceff); outline-offset: 2px; border-radius: 999px; }
.wpi-code__ico { flex: 0 0 auto; }
.wpi-code__ico--done { display: none; }
.wpi-code__copy.is-copied { background: rgba(76, 91, 255, .28); border-color: rgba(201, 206, 255, .35); color: #fff; }
.wpi-code__copy.is-copied .wpi-code__ico--copy { display: none; }
.wpi-code__copy.is-copied .wpi-code__ico--done { display: block; color: #9ff0c1; }

.wpi-code > pre {
	margin: 0 !important;
	max-width: 100%;
	padding: 1.15rem 1.5rem 1.35rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	font-size: var(--wp--preset--font-size--small, .9rem);
	line-height: 1.65;
	tab-size: 4;
	/* Long lines scroll inside the block, never the page. */
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(201, 206, 255, .3) transparent;
}
.wpi-code > pre.has-background { border-radius: 0; }
.wpi-code > pre:not(.wp-block-preformatted) { white-space: pre; }
.wpi-code > pre code { display: block; width: max-content; min-width: 100%; padding: 0; background: none; color: inherit; font: inherit; white-space: inherit; }
/* Preformatted text is prose-like: wrap it. */
.wpi-code > pre.wp-block-preformatted { white-space: pre-wrap; overflow-wrap: anywhere; }
.wpi-code > pre.wp-block-preformatted code { width: auto; }
.wpi-code > pre:focus-visible { outline: 2px solid var(--wp--preset--color--lavender, #c9ceff); outline-offset: -4px; }

@media (max-width: 600px) {
	.wpi-code { border-radius: 14px; }
	.wpi-code > pre { padding: 1rem 1.1rem 1.15rem; font-size: .82rem; }
	.wpi-code__bar { padding-left: 1rem; }
}

/* ---------- Tables ---------- */
.wpi-rt-wrap {
	container-type: inline-size;
	max-width: 100%;
	margin-block: 1.75rem;
	/* Last-resort safety on in-between widths; stacking normally kicks in first. */
	overflow-x: auto;
	scrollbar-width: thin;
}
.wp-block-table > .wpi-rt-wrap { margin-block: 0; }
.wp-block-table:has(> .wpi-rt-wrap) { overflow: visible; }

table.wpi-rt {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--wp--preset--color--line, #e4e5ee);
	border-radius: 18px;
	background: #fff;
	color: var(--wp--preset--color--ink, #0b0b12);
	font-size: var(--wp--preset--font-size--small, .95rem);
	line-height: 1.5;
	overflow: hidden;
}
table.wpi-rt caption {
	caption-side: top;
	padding: 0 0 .8rem;
	text-align: left;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--medium, 1.05rem);
	color: var(--wp--preset--color--ink, #0b0b12);
}
table.wpi-rt th,
table.wpi-rt td {
	padding: .85rem 1.1rem;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line, #e4e5ee);
	text-align: left;
	vertical-align: top;
	overflow-wrap: break-word;
}
table.wpi-rt thead,
table.wpi-rt tfoot { border: 0; }
table.wpi-rt thead th,
table.wpi-rt thead td,
table.wpi-rt .wpi-rt__head > * {
	background: var(--wp--preset--color--ink, #0b0b12);
	color: #fff;
	font-weight: 500;
	border-bottom-color: transparent;
	white-space: nowrap;
}
table.wpi-rt tbody tr:nth-child(even) > *:not(.wpi-rt__head > *) { background: color-mix(in srgb, var(--wp--preset--color--mist, #f4f5fb) 70%, #fff); }
table.wpi-rt tbody th.wpi-rt__title { font-weight: 600; }
table.wpi-rt tbody tr:last-child > *,
table.wpi-rt tfoot tr:last-child > * { border-bottom: 0; }
table.wpi-rt tfoot > tr > * { background: var(--wp--preset--color--mist, #f4f5fb); font-weight: 500; border-top: 1px solid var(--wp--preset--color--line, #e4e5ee); }
table.wpi-rt tbody tr:hover > *:not(.wpi-rt__head > *) { background: color-mix(in srgb, var(--wp--preset--color--lavender, #c9ceff) 22%, #fff); }
table.wpi-rt a { color: var(--wp--preset--color--indigo, #4c5bff); }

/*
 * Stacked cards: each row becomes a card, each cell shows its column name.
 * The header row stays in the accessibility tree (visually hidden) and the
 * explicit ARIA roles keep table semantics after the display change.
 * 4+ columns stack below 640px of available width, 3 columns below 440px.
 */
@container (max-width: 640px) {
	table.wpi-rt--c4 { display: block; border: 0; border-radius: 0; background: none; overflow: visible; }
	table.wpi-rt--c4 caption { display: block; }
	table.wpi-rt--c4 :is(thead, tbody, tfoot) { display: block; }
	table.wpi-rt--c4 tr { display: block; margin: 0 0 .85rem; border: 1px solid var(--wp--preset--color--line, #e4e5ee); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(11, 11, 18, .04), 0 12px 28px -20px rgba(36, 44, 140, .35); overflow: hidden; }
	table.wpi-rt--c4 tr:last-child { margin-bottom: 0; }
	table.wpi-rt--c4 .wpi-rt__head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
	table.wpi-rt--c4 tr > * { display: grid; grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr); gap: .25rem 1rem; align-items: baseline; padding: .7rem 1rem; border-bottom: 1px solid var(--wp--preset--color--line, #e4e5ee); background: none !important; overflow-wrap: anywhere; white-space: normal; }
	table.wpi-rt--c4 tr > *:last-child { border-bottom: 0; }
	table.wpi-rt--c4 tr > [data-label]::before { content: attr(data-label); content: attr(data-label) / ""; color: var(--wp--preset--color--graphite, #5b5d6e); font-size: .8rem; font-weight: 500; line-height: 1.35; }
	table.wpi-rt--c4 tr > :not([data-label]) { display: block; }
	table.wpi-rt--c4 tr > .wpi-rt__title { display: block; background: var(--wp--preset--color--ink, #0b0b12) !important; color: #fff; font-weight: 500; border-bottom: 0; }
	table.wpi-rt--c4 tfoot tr { background: var(--wp--preset--color--mist, #f4f5fb); }
	table.wpi-rt--c4 tfoot tr > * { border-top: 0; }
}
@container (max-width: 440px) {
	table.wpi-rt--c3 { display: block; border: 0; border-radius: 0; background: none; overflow: visible; }
	table.wpi-rt--c3 caption { display: block; }
	table.wpi-rt--c3 :is(thead, tbody, tfoot) { display: block; }
	table.wpi-rt--c3 tr { display: block; margin: 0 0 .85rem; border: 1px solid var(--wp--preset--color--line, #e4e5ee); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(11, 11, 18, .04), 0 12px 28px -20px rgba(36, 44, 140, .35); overflow: hidden; }
	table.wpi-rt--c3 tr:last-child { margin-bottom: 0; }
	table.wpi-rt--c3 .wpi-rt__head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
	table.wpi-rt--c3 tr > * { display: grid; grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr); gap: .25rem 1rem; align-items: baseline; padding: .7rem 1rem; border-bottom: 1px solid var(--wp--preset--color--line, #e4e5ee); background: none !important; overflow-wrap: anywhere; white-space: normal; }
	table.wpi-rt--c3 tr > *:last-child { border-bottom: 0; }
	table.wpi-rt--c3 tr > [data-label]::before { content: attr(data-label); content: attr(data-label) / ""; color: var(--wp--preset--color--graphite, #5b5d6e); font-size: .8rem; font-weight: 500; line-height: 1.35; }
	table.wpi-rt--c3 tr > :not([data-label]) { display: block; }
	table.wpi-rt--c3 tr > .wpi-rt__title { display: block; background: var(--wp--preset--color--ink, #0b0b12) !important; color: #fff; font-weight: 500; border-bottom: 0; }
	table.wpi-rt--c3 tfoot tr { background: var(--wp--preset--color--mist, #f4f5fb); }
	table.wpi-rt--c3 tfoot tr > * { border-top: 0; }
}
/* Very narrow cards: label above value. */
@container (max-width: 300px) {
	table.wpi-rt tr > [data-label] { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.wpi-code__copy { transition: none; }
}

/* ---------- Comments (patterns/comments.php) ---------- */
.wpi-comments { --c-pad: clamp(1.1rem, 2.5vw, 1.5rem); }
.wpi-comments > * + * { margin-block-start: 0; }
.wpi-comments__head { margin-bottom: 1.5rem; }
.wpi-comments__kicker { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font: 400 11.5px/1.3 var(--wp--preset--font-family--mono, ui-monospace, monospace); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.wpi-comments__kicker::before { content: ""; width: 14px; height: 8px; border-radius: 4px; background: radial-gradient(circle at 4px 4px, var(--indigo) 4px, transparent 4.5px), radial-gradient(circle at 10px 4px, var(--lav) 4px, transparent 4.5px); }
.wpi-comments .wp-block-comments-title { margin: 0; font-size: var(--wp--preset--font-size--x-large); font-weight: 500; line-height: 1.15; }

/* Comment cards + threads */
.wpi-comments .wpi-comments__list, .wpi-comments .wpi-comments__list ol { margin: 0; padding: 0; list-style: none; }
.wpi-comments .wpi-comments__list { display: grid; gap: .75rem; margin-bottom: 2.5rem; }
.wpi-comments .wpi-comments__list li { margin: 0; }
.wpi-comments .wpi-comments__list ol.children { display: grid; gap: .75rem; margin: .75rem 0 0 clamp(1rem, 4vw, 2.25rem); padding-left: clamp(.75rem, 2vw, 1.25rem); border-left: 2px solid var(--line); }
.wpi-comment { gap: .9rem !important; margin: 0 !important; padding: var(--c-pad); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--white); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.wpi-comment:hover { border-color: color-mix(in srgb, var(--line) 40%, var(--peri)); box-shadow: var(--shadow-1); }
.wpi-comment__avatar { flex: none; }
.wpi-comment__avatar img { display: block; width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 3px var(--white), 0 0 0 4px var(--line); object-fit: cover; }
.wpi-comment__body { flex: 1; min-width: 0; }
.wpi-comment__meta { gap: .2rem .65rem !important; align-items: baseline !important; margin: 0 0 .4rem; }
.wpi-comment__meta > * { margin: 0 !important; }
.wpi-comment .wp-block-comment-author-name { font-size: var(--wp--preset--font-size--small); font-weight: 500; color: var(--ink); }
.wpi-comment .wp-block-comment-author-name a { color: inherit; text-decoration: none; }
.wpi-comment .wp-block-comment-author-name a:hover { color: var(--indigo); }
.wpi-comment .wp-block-comment-date, .wpi-comment .wp-block-comment-date a { font-size: var(--wp--preset--font-size--x-small); color: var(--muted); text-decoration: none; }
/* The post author's own replies */
.bypostauthor > .wpi-comment { border-color: color-mix(in srgb, var(--indigo) 30%, var(--line)); background: linear-gradient(180deg, var(--lav-2), var(--white) 70%); }
.bypostauthor > .wpi-comment .wp-block-comment-author-name::after { content: "Author"; display: inline-block; margin-left: .45rem; padding: .15rem .45rem; border-radius: 999px; background: var(--indigo); color: var(--white); font-size: 10.5px; font-weight: 500; line-height: 1.2; vertical-align: 2px; }
.wpi-comment .wp-block-comment-content { font-size: var(--wp--preset--font-size--small); line-height: 1.65; color: var(--ink-2); overflow-wrap: anywhere; }
.wpi-comment .wp-block-comment-content > * { margin: 0 0 .65rem; }
.wpi-comment .wp-block-comment-content > :last-child { margin-bottom: 0; }
.wpi-comment .wp-block-comment-content a { color: var(--indigo); }
.wpi-comment .comment-awaiting-moderation { display: inline-block; margin: 0 0 .5rem; padding: .25rem .6rem; border-radius: 999px; background: #FFF4DE; color: #8A5A00; font-size: var(--wp--preset--font-size--x-small); }
.wpi-comment__actions { gap: .5rem !important; margin-top: .75rem; }
.wpi-comment__actions > * { margin: 0 !important; }
.wpi-comment__actions a { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font-size: var(--wp--preset--font-size--x-small); font-weight: 500; line-height: 1.2; text-decoration: none; transition: background-color .2s var(--ease), border-color .2s, color .2s; }
.wpi-comment__actions .comment-reply-link::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E") center / contain no-repeat; }
.wpi-comment__actions a:hover, .wpi-comment__actions a:focus-visible { border-color: var(--indigo); background: var(--indigo); color: var(--white); }

/* Pagination */
.wpi-comments .wpi-comments__pager { margin: -1rem 0 2.5rem; font-size: var(--wp--preset--font-size--small); }
.wpi-comments .wpi-comments__pager a, .wpi-comments .wpi-comments__pager .page-numbers { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 .75rem; border-radius: 999px; color: var(--ink); text-decoration: none; }
.wpi-comments .wpi-comments__pager .page-numbers.current { background: var(--ink); color: var(--white); }
.wpi-comments .wpi-comments__pager a:hover { background: var(--white); }

/* Reply form */
.wpi-comments .comment-respond { margin: 0; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--white); box-shadow: var(--shadow-1); }
.wpi-comments__list .comment-respond { margin-top: .75rem; } /* reply form moved under a comment */
.wpi-comments .comment-reply-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; margin: 0 0 .35rem; font-size: var(--wp--preset--font-size--large); font-weight: 500; }
.wpi-comments .comment-reply-title small a { font-size: var(--wp--preset--font-size--x-small); font-weight: 500; color: var(--muted); }
.wpi-comments .comment-reply-title small a:hover { color: #B42339; }
.wpi-comments .comment-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 700px) {
	.wpi-comments .comment-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wpi-comments .comment-form > :not(.comment-form-author, .comment-form-email, .comment-form-url) { grid-column: 1 / -1; }
}
.wpi-comments .comment-form > * { margin: 0; }
.wpi-comments .comment-notes, .wpi-comments .logged-in-as { font-size: var(--wp--preset--font-size--x-small); color: var(--muted); }
.wpi-comments .logged-in-as a { color: var(--indigo); }
.wpi-comments .comment-form label { display: block; margin: 0 0 .35rem; font-size: var(--wp--preset--font-size--small); font-weight: 500; color: var(--ink); }
.wpi-comments .comment-form .required { color: var(--indigo); }
.wpi-comments .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) { box-sizing: border-box; width: 100%; min-height: 48px; margin: 0; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--mist); color: var(--ink); font: 400 var(--wp--preset--font-size--small)/1.5 var(--wp--preset--font-family--montreal); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.wpi-comments .comment-form textarea { min-height: 140px; resize: vertical; }
.wpi-comments .comment-form :is(input, textarea):hover { border-color: color-mix(in srgb, var(--line) 50%, var(--peri)); }
.wpi-comments .comment-form :is(input, textarea):focus { outline: 0; border-color: var(--indigo); background: var(--white); box-shadow: 0 0 0 4px var(--lav-2); }
.wpi-comments .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: .55rem; font-size: var(--wp--preset--font-size--x-small); color: var(--muted); }
.wpi-comments .comment-form-cookies-consent input { flex: none; width: 16px; height: 16px; margin: .1rem 0 0; accent-color: var(--indigo); }
.wpi-comments .comment-form-cookies-consent label { margin: 0; font-size: inherit; font-weight: 400; color: inherit; }
.wpi-comments .form-submit { display: flex; justify-content: flex-end; }
.wpi-comments .form-submit .submit, .wpi-comments .form-submit .wp-block-button__link { min-height: 48px; padding: .75rem 1.5rem; border: 0; border-radius: 999px; background: var(--indigo); color: var(--white); font: 500 var(--wp--preset--font-size--small)/1.1 var(--wp--preset--font-family--montreal); cursor: pointer; box-shadow: 0 14px 30px -14px rgba(76, 91, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .2); transition: background-color .25s var(--ease), transform .25s var(--ease); }
.wpi-comments .form-submit .submit:hover { background: var(--indigo-2); transform: translateY(-1px); }
.wpi-comments .comments-closed, .wpi-comments .no-comments { padding: 1rem 1.25rem; border: 1px dashed var(--line); border-radius: var(--r-m); color: var(--muted); font-size: var(--wp--preset--font-size--small); }