/*
 * Nahnu Code Block — shared styles for the API-documentation blocks
 * (endpoint, parameters, request/response, status codes, auth, try-it).
 *
 * These all wear the base ".nahnu-code-block" class so they inherit the
 * same CSS variables (and therefore the same light/dark behavior) as the
 * plain code block, defined in blocks/code-block/style.css. This file
 * only adds block-specific structural rules on top.
 */

.nahnu-code-block--api {
	padding: 1em 1.1em;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 0.95em;
}

.nahnu-code-block code,
.nahnu-code-block__mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Endpoint block ---------- */

.nahnu-code-block-endpoint__row {
	display: flex;
	align-items: center;
	gap: 0.6em;
	flex-wrap: wrap;
}

.nahnu-code-block-endpoint__method {
	display: inline-block;
	padding: 0.15em 0.6em;
	border-radius: 5px;
	font-weight: 700;
	font-size: 0.8em;
	letter-spacing: 0.03em;
	color: #fff;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.nahnu-code-block-endpoint__method--get { background: var( --nahnu-code-block-accent ); color: var( --nahnu-code-block-accent-fg ); }
.nahnu-code-block-endpoint__method--post { background: #0f7b3f; }
.nahnu-code-block-endpoint__method--put { background: #b45309; }
.nahnu-code-block-endpoint__method--patch { background: #a1520c; }
.nahnu-code-block-endpoint__method--delete { background: #b91c1c; }

.nahnu-code-block-endpoint__path {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-weight: 600;
}

.nahnu-code-block-endpoint__version {
	margin-left: auto;
	font-size: 0.75em;
	color: var( --nahnu-code-block-muted );
	border: 1px solid var( --nahnu-code-block-border );
	border-radius: 999px;
	padding: 0.1em 0.7em;
}

.nahnu-code-block-endpoint__auth-badge {
	margin-left: auto;
	font-size: 0.78em;
	font-weight: 600;
	color: #b45309;
	background: rgba( 180, 83, 9, 0.12 );
	border-radius: 999px;
	padding: 0.15em 0.7em;
	white-space: nowrap;
}

.nahnu-code-block-endpoint__summary {
	margin-top: 0.5em;
	color: var( --nahnu-code-block-fg );
}

.nahnu-code-block-endpoint__description {
	margin-top: 0.5em;
	color: var( --nahnu-code-block-muted );
	font-size: 0.92em;
	line-height: 1.6;
}

.nahnu-code-block-endpoint__related {
	margin-top: 0.8em;
	padding-top: 0.6em;
	border-top: 1px solid var( --nahnu-code-block-border );
}

.nahnu-code-block-endpoint__related-label {
	font-size: 0.75em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --nahnu-code-block-muted );
}

.nahnu-code-block-endpoint__related-list {
	list-style: none;
	margin: 0.4em 0 0;
	padding: 0;
}

.nahnu-code-block-endpoint__related-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	text-decoration: none;
	color: var( --nahnu-code-block-fg );
	margin: 0.2em 0;
}
.nahnu-code-block-endpoint__related-link:hover {
	color: var( --nahnu-code-block-accent );
}

.nahnu-code-block-endpoint__deprecated {
	margin-top: 0.6em;
	padding: 0.5em 0.75em;
	border-radius: 6px;
	background: rgba( 185, 28, 28, 0.12 );
	border: 1px solid rgba( 185, 28, 28, 0.35 );
	color: #b91c1c;
	font-size: 0.85em;
}

/* ---------- Table-based blocks (parameters, status codes) ---------- */

.nahnu-code-block__title {
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --nahnu-code-block-muted );
}

.nahnu-code-block__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
}

/*
 * Every table this plugin renders (Parameters, Error Codes, Events,
 * Status Codes, Response Body's headers/schema tables) is wrapped in one
 * of these. On a wide screen it's invisible — the table already fits.
 * On a narrow one, the table keeps a sane minimum width instead of
 * squeezing its columns down to unreadable slivers, and this wrapper
 * scrolls horizontally on its own so a page-wide row of data never
 * forces the *whole page* to scroll sideways, and never gets silently
 * clipped either.
 */
.nahnu-code-block__table-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.nahnu-code-block__table-scroll > .nahnu-code-block__table {
	min-width: 480px;
}
.nahnu-code-block__table-scroll::-webkit-scrollbar {
	height: 6px;
}
.nahnu-code-block__table-scroll::-webkit-scrollbar-thumb {
	background: var( --nahnu-code-block-border );
	border-radius: 999px;
}

.nahnu-code-block__table th,
.nahnu-code-block__table td {
	text-align: left;
	padding: 0.55em 0.7em;
	border-bottom: 1px solid var( --nahnu-code-block-border );
	vertical-align: top;
}

.nahnu-code-block__table th {
	color: var( --nahnu-code-block-muted );
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}

.nahnu-code-block__pill {
	display: inline-block;
	padding: 0.1em 0.55em;
	border-radius: 999px;
	font-size: 0.78em;
	font-weight: 600;
}
.nahnu-code-block__pill--required {
	background: rgba( 185, 28, 28, 0.12 );
	color: #b91c1c;
}
.nahnu-code-block__pill--optional {
	background: rgba( 107, 114, 128, 0.15 );
	color: var( --nahnu-code-block-muted );
}
.nahnu-code-block__pill--deprecated {
	background: rgba( 180, 83, 9, 0.15 );
	color: #b45309;
}
.nahnu-code-block__pill--nullable {
	background: rgba( 37, 99, 235, 0.12 );
	color: #2563eb;
}
.nahnu-code-block__pill--readonly {
	background: rgba( 107, 114, 128, 0.15 );
	color: var( --nahnu-code-block-muted );
}
.nahnu-code-block__pill--2xx { background: rgba(15,123,63,0.15); color: #0f7b3f; }
.nahnu-code-block__pill--3xx { background: rgba(37,99,235,0.15); color: #2563eb; }
.nahnu-code-block__pill--4xx { background: rgba(180,83,9,0.15); color: #b45309; }
.nahnu-code-block__pill--5xx { background: rgba(185,28,28,0.15); color: #b91c1c; }

.nahnu-code-block__type {
	color: var( --nahnu-code-block-token-function );
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.85em;
}

.nahnu-code-block__type-ref-link {
	color: var( --nahnu-code-block-accent );
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
}
.nahnu-code-block__type-ref-link:hover {
	text-decoration: none;
	border-bottom-style: solid;
}

.nahnu-code-block__location {
	display: inline-block;
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --nahnu-code-block-muted );
	background: var( --nahnu-code-block-chrome-bg );
	border: 1px solid var( --nahnu-code-block-border );
	border-radius: 4px;
	padding: 0.1em 0.5em;
}

.nahnu-code-block__meta-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin-top: 0.5em;
}

.nahnu-code-block__meta-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background: var( --nahnu-code-block-chrome-bg );
	border: 1px solid var( --nahnu-code-block-border );
	border-radius: 999px;
	padding: 0.15em 0.15em 0.15em 0.7em;
	font-size: 0.78em;
}

.nahnu-code-block__meta-badge-label {
	color: var( --nahnu-code-block-muted );
	font-weight: 600;
}

.nahnu-code-block__meta-badge-value {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	background: var( --nahnu-code-block-bg );
	border-radius: 999px;
	padding: 0.15em 0.6em;
}

.nahnu-code-block__nested-row td {
	padding: 0 0.7em 0.7em;
	border-bottom: 1px solid var( --nahnu-code-block-border );
}

.nahnu-code-block__nested-toggle summary {
	cursor: pointer;
	color: var( --nahnu-code-block-accent );
	font-size: 0.85em;
	font-weight: 600;
	list-style: none;
}
.nahnu-code-block__nested-toggle summary::-webkit-details-marker {
	display: none;
}
.nahnu-code-block__nested-toggle summary::before {
	content: '▸';
	display: inline-block;
	margin-right: 0.4em;
	transition: transform 120ms ease;
}
.nahnu-code-block__nested-toggle[open] summary::before {
	transform: rotate( 90deg );
}

.nahnu-code-block__table--nested {
	margin-top: 0.6em;
	margin-left: 1em;
	width: calc( 100% - 1em );
	background: var( --nahnu-code-block-chrome-bg );
	border-radius: 8px;
	overflow: hidden;
}
.nahnu-code-block__table--nested th,
.nahnu-code-block__table--nested td {
	padding: 0.45em 0.6em;
}

/* ---------- Shared description text ---------- */

.nahnu-code-block__description {
	font-size: 0.9em;
	color: var( --nahnu-code-block-muted );
	margin: 0 0 0.8em;
}

/* ---------- Response Body block ---------- */

.nahnu-code-block__response-item {
	border: 1px solid var( --nahnu-code-block-border );
	border-radius: 8px;
	margin-bottom: 0.6em;
	overflow: hidden;
}
.nahnu-code-block__response-item:last-child {
	margin-bottom: 0;
}

.nahnu-code-block__response-item summary {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.6em 0.8em;
	background: var( --nahnu-code-block-chrome-bg );
	cursor: pointer;
	list-style: none;
}
.nahnu-code-block__response-item summary::-webkit-details-marker {
	display: none;
}
.nahnu-code-block__response-item summary::before {
	content: '▸';
	color: var( --nahnu-code-block-muted );
	transition: transform 120ms ease;
}
.nahnu-code-block__response-item[open] summary::before {
	transform: rotate( 90deg );
}

.nahnu-code-block__response-content-type {
	margin-left: auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.8em;
	color: var( --nahnu-code-block-muted );
}

.nahnu-code-block__response-body {
	position: relative;
}

.nahnu-code-block__response-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.8em;
	padding: 0.5em 0.7em;
	border-bottom: 1px solid var( --nahnu-code-block-border );
}

.nahnu-code-block__schema-toggle-input {
	/* Visually hidden but still focusable/toggleable — the visible UI is
	   its <label>, styled via the sibling-combinator rules below. Pure
	   CSS, no JavaScript needed for the toggle itself. */
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.nahnu-code-block__schema-toggle-label {
	margin-right: auto;
	font-size: 0.8em;
	font-weight: 600;
	color: var( --nahnu-code-block-muted );
	cursor: pointer;
	user-select: none;
	padding: 0.3em 0.7em;
	border: 1px solid var( --nahnu-code-block-border );
	border-radius: 999px;
}

.nahnu-code-block__schema-toggle-input:checked ~ .nahnu-code-block__response-toolbar .nahnu-code-block__schema-toggle-label {
	color: var( --nahnu-code-block-accent-fg );
	background: var( --nahnu-code-block-accent );
	border-color: var( --nahnu-code-block-accent );
}

.nahnu-code-block__schema-toggle-input:checked ~ .nahnu-code-block__response-toolbar .nahnu-code-block__copy {
	display: none;
}

.nahnu-code-block__response-schema {
	display: none;
	/* This class now lives on the scroll wrapper div around the schema
	   table (see nahnu-code-block__table-scroll below), not the table
	   itself, so a hidden/shown state toggles a block-level box rather
	   than switching the table's own `display: table`. */
}

.nahnu-code-block__response-headers {
	margin-bottom: 0.8em;
}
.nahnu-code-block__response-headers th,
.nahnu-code-block__response-headers td {
	font-size: 0.85em;
	padding: 0.4em 0.7em;
}

.nahnu-code-block__schema-toggle-input:checked ~ .nahnu-code-block__response-example {
	display: none;
}

.nahnu-code-block__schema-toggle-input:checked ~ .nahnu-code-block__response-schema {
	display: block;
}

/* ---------- Deep-linkable anchors (parameters, endpoints) ---------- */

.nahnu-code-block__anchor-link {
	text-decoration: none;
	opacity: 0;
	margin-left: 0.4em;
	font-size: 0.85em;
	transition: opacity 120ms ease;
}

tr:hover > td .nahnu-code-block__anchor-link,
.nahnu-code-block-endpoint__row:hover .nahnu-code-block__anchor-link,
.nahnu-code-block__anchor-link:focus {
	opacity: 1;
}

.nahnu-code-block__anchor-link--copied {
	opacity: 1;
	filter: hue-rotate( 90deg ) saturate( 2 );
}

/* Touch devices can't hover a row to reveal its anchor link, so keep it
   visible there instead of hidden-by-default. */
@media ( hover: none ) {
	.nahnu-code-block__anchor-link {
		opacity: 1;
	}
}

.nahnu-code-block__example-toggle {
	margin-top: 0.4em;
}
.nahnu-code-block__example-toggle summary {
	cursor: pointer;
	color: var( --nahnu-code-block-accent );
	font-size: 0.85em;
}
.nahnu-code-block__example-toggle pre {
	margin-top: 0.4em;
}

/* ---------- Language tabs (request/response block) ---------- */

.nahnu-code-block-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em;
	padding: 0.6em 0.6em 0;
	border-bottom: 1px solid var( --nahnu-code-block-border );
}

.nahnu-code-block-tabs__tab {
	border: 1px solid transparent;
	border-bottom: none;
	background: transparent;
	color: var( --nahnu-code-block-muted );
	padding: 0.4em 0.9em;
	border-radius: 6px 6px 0 0;
	cursor: pointer;
	font-size: 0.85em;
	font-weight: 600;
}
.nahnu-code-block-tabs__tab.is-active {
	color: var( --nahnu-code-block-accent );
	border-color: var( --nahnu-code-block-border );
	background: var( --nahnu-code-block-bg );
}

.nahnu-code-block-tabs__panel {
	display: none;
}
.nahnu-code-block-tabs__panel.is-active {
	display: block;
}

.nahnu-code-block-tabs__subnav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	padding: 0.6em 1.1em 0;
}
.nahnu-code-block-tabs__subtab {
	border: none;
	background: transparent;
	color: var( --nahnu-code-block-muted );
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
	cursor: pointer;
	padding: 0.2em 0;
	border-bottom: 2px solid transparent;
}
.nahnu-code-block-tabs__subtab.is-active {
	color: var( --nahnu-code-block-fg );
	border-bottom-color: var( --nahnu-code-block-accent );
}
.nahnu-code-block-tabs__subpanel {
	display: none;
}
.nahnu-code-block-tabs__subpanel.is-active {
	display: block;
}

/* ---------- Auth block ---------- */

.nahnu-code-block-auth__header-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6em;
	background: var( --nahnu-code-block-chrome-bg );
	border: 1px solid var( --nahnu-code-block-border );
	border-radius: 6px;
	padding: 0.6em 0.85em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.88em;
	overflow-x: auto;
}
.nahnu-code-block-auth__placeholder {
	color: var( --nahnu-code-block-token-string );
	word-break: break-all;
}
.nahnu-code-block-auth__description {
	margin-top: 0.6em;
	font-size: 0.88em;
	color: var( --nahnu-code-block-muted );
}

/* ---------- Servers block ---------- */

.nahnu-code-block-servers__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nahnu-code-block-servers__item + .nahnu-code-block-servers__item {
	margin-top: 0.7em;
}

.nahnu-code-block-servers__label {
	font-size: 0.78em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --nahnu-code-block-muted );
	margin-bottom: 0.3em;
}

/* ---------- Try-it console ---------- */

.nahnu-code-block-tryit__warning {
	background: rgba( 180, 83, 9, 0.12 );
	border: 1px solid rgba( 180, 83, 9, 0.35 );
	color: #b45309;
	border-radius: 6px;
	padding: 0.5em 0.75em;
	font-size: 0.85em;
	margin-bottom: 0.8em;
}

.nahnu-code-block-tryit__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-bottom: 0.6em;
}

.nahnu-code-block-tryit__method {
	font-weight: 700;
	padding: 0.4em 0.6em;
	border-radius: 5px;
	color: #fff;
	font-size: 0.8em;
	align-self: flex-start;
}

.nahnu-code-block-tryit__url {
	flex: 1 1 200px;
	min-width: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.88em;
	padding: 0.4em 0.6em;
	border: 1px solid var( --nahnu-code-block-border );
	border-radius: 5px;
	background: var( --nahnu-code-block-bg );
	color: var( --nahnu-code-block-fg );
}

.nahnu-code-block-tryit__field-label {
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --nahnu-code-block-muted );
	font-weight: 600;
	display: block;
	margin: 0.6em 0 0.3em;
}

.nahnu-code-block-tryit__textarea {
	width: 100%;
	min-height: 5em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.85em;
	padding: 0.5em 0.6em;
	border: 1px solid var( --nahnu-code-block-border );
	border-radius: 5px;
	background: var( --nahnu-code-block-bg );
	color: var( --nahnu-code-block-fg );
	box-sizing: border-box;
}

.nahnu-code-block-tryit__send {
	margin-top: 0.8em;
	background: var( --nahnu-code-block-accent );
	color: var( --nahnu-code-block-accent-fg );
	border: none;
	border-radius: 6px;
	padding: 0.55em 1.2em;
	font-weight: 600;
	cursor: pointer;
}
.nahnu-code-block-tryit__send:disabled {
	opacity: 0.6;
	cursor: default;
}

.nahnu-code-block-tryit__response {
	margin-top: 1em;
	border-top: 1px solid var( --nahnu-code-block-border );
	padding-top: 0.8em;
}

.nahnu-code-block-tryit__response-status {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.85em;
	margin-bottom: 0.4em;
}

.nahnu-code-block-tryit__response-body {
	white-space: pre-wrap;
	word-break: break-word;
	max-height: 320px;
	overflow: auto;
	background: var( --nahnu-code-block-chrome-bg );
	border: 1px solid var( --nahnu-code-block-border );
	border-radius: 6px;
	padding: 0.7em 0.85em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.85em;
}

/* ---------- API Navigation block ---------- */

.nahnu-code-block-api-navigation__list {
	list-style: none;
	margin: 0.6em 0 0;
	padding: 0;
}

.nahnu-code-block-api-navigation__item + .nahnu-code-block-api-navigation__item {
	border-top: 1px solid var( --nahnu-code-block-border );
}

.nahnu-code-block-api-navigation__link {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.5em 0.2em;
	text-decoration: none;
	color: var( --nahnu-code-block-fg );
}
.nahnu-code-block-api-navigation__link:hover {
	color: var( --nahnu-code-block-accent );
}

.nahnu-code-block-api-navigation__path {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

.nahnu-code-block-api-navigation__deprecated {
	margin-left: auto;
	font-size: 0.75em;
	color: var( --nahnu-code-block-muted );
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ---------- Mobile ---------- */

@media ( max-width: 480px ) {
	.nahnu-code-block--api {
		padding: 0.8em 0.7em;
		font-size: 0.9em;
	}
}