/*
 * API dokumentacija (/api/): rakto kortelė, metodų paieška, operacijos dviem stulpeliais,
 * kodo skirtukai ir „Išbandyti" forma. Įkeliama tik šiame puslapyje (gospin_api_assets()),
 * spalvos — tik --gs-* kintamieji, tad veikia ir tamsiame, ir šviesiame režime.
 * Paprastas CSS, be Tailwind perkompiliavimo (versija pagal failo mtime).
 */

/* `hidden` turi nugalėti komponentų display (grid / flex) — JS juos rodo tik kai veikia. */
.gs-keycard [hidden],
.gs-op [hidden],
.gs-op[hidden],
[data-gs-tag][hidden],
.gs-apisearch[hidden],
[data-gs-nav-group][hidden],
nav li[hidden] { display: none !important; }

/* ---------- Rakto kortelė antraštėje ---------- */
.gs-keycard {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .875rem;
	border: 1px solid var(--gs-border);
	border-radius: var(--gs-radius);
	background: var(--gs-surface);
	box-shadow: var(--gs-shadow);
	padding: 1.5rem;
}
.gs-keycard__title {
	display: flex;
	align-items: center;
	gap: .5rem;
	font: 600 1.05rem/1.3 "IBM Plex Sans", ui-sans-serif, sans-serif;
	color: var(--gs-text);
}
.gs-keycard__title svg { color: var(--gs-text-soft); }
.gs-keycard__text { font-size: .875rem; line-height: 1.6; color: var(--gs-text-body); }
.gs-keycard__form { display: flex; gap: .5rem; }
.gs-keycard__form input {
	min-width: 0;
	flex: 1;
	height: 44px;
	border: 1px solid var(--gs-border);
	border-radius: var(--gs-radius-sm);
	background: var(--gs-ground);
	padding: 0 .875rem;
	font: 400 .875rem/1 "IBM Plex Mono", ui-monospace, monospace;
	color: var(--gs-text);
	outline: none;
}
.gs-keycard__form input:focus { border-color: var(--gs-accent); }
.gs-keycard__form .btn,
.gs-try .btn { height: 44px; padding: 0 18px; font-size: 14px; }

.gs-keycard__status {
	display: grid;
	gap: .5rem;
	border-radius: var(--gs-radius-sm);
	border: 1px solid var(--gs-border);
	background: var(--gs-ground);
	padding: .75rem .875rem;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--gs-text-body);
}
.gs-keycard__status.is-ok { border-color: var(--gs-good); }
.gs-keycard__status.is-error { border-color: var(--gs-bad); }
.gs-keycard__status b { color: var(--gs-text); font-weight: 600; }
.gs-keycard__status .gs-keycard__row { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; }
.gs-keycard__status .gs-chips { gap: .25rem; }
.gs-keycard__status .gs-chip { padding: .25rem .4rem; font-size: .6875rem; }
.gs-keycard__forget {
	justify-self: start;
	font-size: .75rem;
	color: var(--gs-text-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.gs-keycard__forget:hover { color: var(--gs-text); }

.gs-keycard__links { display: flex; flex-wrap: wrap; gap: .5rem; }
.gs-keycard__links a,
.gs-keycard__links button {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	height: 34px;
	border: 1px solid var(--gs-border);
	border-radius: var(--gs-radius-sm);
	padding: 0 .75rem;
	font: 500 .8125rem/1 "IBM Plex Mono", ui-monospace, monospace;
	color: var(--gs-text-strong);
	transition: border-color .2s;
}
.gs-keycard__links a:hover,
.gs-keycard__links button:hover { border-color: var(--gs-text-muted); }
.gs-keycard__hint { font-size: .75rem; color: var(--gs-text-muted); }

/* ---------- Metodų paieška šoniniame meniu ---------- */
.gs-apisearch {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
}
.gs-apisearch svg { position: absolute; left: .7rem; color: var(--gs-text-muted); pointer-events: none; }
.gs-apisearch input {
	width: 100%;
	height: 38px;
	border: 1px solid var(--gs-border);
	border-radius: var(--gs-radius-sm);
	background: var(--gs-surface);
	padding: 0 2rem 0 2.1rem;
	font-size: .875rem;
	color: var(--gs-text);
	outline: none;
}
.gs-apisearch input:focus { border-color: var(--gs-accent); }
.gs-apisearch input::-webkit-search-cancel-button { display: none; }
.gs-apisearch kbd {
	position: absolute;
	right: .55rem;
	border: 1px solid var(--gs-border);
	border-radius: var(--gs-radius-sm);
	padding: 0 .35rem;
	font: 500 .6875rem/1.4 "IBM Plex Mono", ui-monospace, monospace;
	color: var(--gs-text-muted);
}
.gs-apisearch input:focus + kbd,
.gs-apisearch input:not(:placeholder-shown) + kbd { display: none; }
.gs-apisearch__empty { padding: 0 .75rem; font-size: .8125rem; color: var(--gs-text-muted); }

/* ---------- Operacija: per visą plotį; kodas ir atsakymo pavyzdys plačiame ekrane greta ---------- */
.gs-op { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.gs-op__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 1.5rem; align-items: start; min-width: 0; }
.gs-op__side > .gs-try__open { align-self: start; }
@media (min-width: 1024px) {
	.gs-op__side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gs-op__side > .gs-try,
	.gs-op__side > .gs-try__open { grid-column: 1 / -1; }
}
.gs-op__resp { display: grid; grid-template-columns: minmax(0, 1fr); }
.gs-op__resp-h {
	display: flex;
	align-items: center;
	gap: .5rem;
	min-height: 2.25rem;
	border-radius: var(--gs-radius-sm) var(--gs-radius-sm) 0 0;
	background: var(--gs-ink);
	border-bottom: 1px solid var(--gs-on-ink-line);
	padding: 0 1rem;
	font: 500 .75rem/1 "IBM Plex Mono", ui-monospace, monospace;
	color: var(--gs-on-ink-body);
}
.gs-op__resp-h .gs-op__code { color: var(--gs-good-on-ink); }
.gs-op__resp .gs-code pre { border-top-left-radius: 0; border-top-right-radius: 0; }

.gs-op__path {
	display: inline-flex;
	align-items: baseline;
	gap: .4rem;
	min-width: 0;
	font: 600 .875rem/1.4 "IBM Plex Mono", ui-monospace, monospace;
	color: var(--gs-text);
	word-break: break-all;
}
.gs-op__path span { color: var(--gs-text-faint); opacity: 0; transition: opacity .2s; }
.gs-op__path:hover span,
.gs-op__path:focus-visible span { opacity: 1; }
.gs-op__scope { padding: .3rem .45rem; font-size: .6875rem; }
.gs-op__scope svg { color: var(--gs-text-muted); }
.gs-op__scope.is-granted { color: var(--gs-good); border-color: var(--gs-good); background: var(--gs-good-tint); }
.gs-op__scope.is-granted svg { color: currentColor; }
.gs-op__scope.is-missing { color: var(--gs-bad); border-color: var(--gs-bad); background: var(--gs-bad-tint); }
.gs-op__scope.is-missing svg { color: currentColor; }

.gs-op__h {
	margin-top: 1.5rem;
	font: 600 .75rem/1.4 "IBM Plex Mono", ui-monospace, monospace;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gs-text-soft);
}
.gs-op__code { color: var(--gs-text-muted); }

/* Parametrai — aprašų sąrašas vietoj 4 stulpelių lentelės: siaurame stulpelyje nesilaužo */
.gs-params { margin-top: .75rem; border-top: 1px solid var(--gs-line); }
.gs-params__row { display: grid; gap: .25rem; border-bottom: 1px solid var(--gs-line); padding: .7rem 0; }
@media (min-width: 640px) {
	.gs-params__row { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 1.25rem; }
}
.gs-params dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; }
.gs-params dt code { font: 600 .8125rem/1.4 "IBM Plex Mono", ui-monospace, monospace; color: var(--gs-text); }
.gs-params__req { font-size: .6875rem; font-weight: 600; color: var(--gs-bad); }
.gs-params__meta { flex-basis: 100%; font: 400 .6875rem/1.4 "IBM Plex Mono", ui-monospace, monospace; color: var(--gs-text-muted); }
.gs-params dd { font-size: .875rem; line-height: 1.6; color: var(--gs-text-body); }
.gs-params__enum { display: block; margin-top: .2rem; font: 400 .75rem/1.5 "IBM Plex Mono", ui-monospace, monospace; color: var(--gs-text-soft); }

/* ---------- Kodo skirtukai ---------- */
.gs-snip { display: grid; grid-template-columns: minmax(0, 1fr); }
.gs-snip__tabs {
	display: flex;
	overflow-x: auto;
	border-radius: var(--gs-radius-sm) var(--gs-radius-sm) 0 0;
	background: var(--gs-ink);
	border-bottom: 1px solid var(--gs-on-ink-line);
	padding: 0 .35rem;
}
.gs-snip__tab {
	flex: none;
	border-bottom: 2px solid transparent;
	padding: .6rem .7rem .5rem;
	font: 500 .75rem/1 "IBM Plex Mono", ui-monospace, monospace;
	color: var(--gs-on-ink-faint);
	transition: color .2s, border-color .2s;
}
.gs-snip__tab:hover { color: var(--gs-on-ink-body); }
.gs-snip__tab[aria-selected="true"] { color: var(--gs-on-ink); border-bottom-color: var(--gs-brand-light); }
.gs-snip__tabs:not([hidden]) ~ .gs-code pre { border-top-left-radius: 0; border-top-right-radius: 0; }
.gs-code pre { max-height: 26rem; }
/* Kodas ir atsakymas greta — ištempiami iki aukštesniojo, kad eilė būtų lygi. */
@media (min-width: 1024px) {
	.gs-op__side { align-items: stretch; }
	.gs-op__side > .gs-try__open { justify-self: start; }
	.gs-snip, .gs-op__resp { grid-template-rows: auto 1fr; }
	.gs-snip .gs-code:not([hidden]), .gs-op__resp .gs-code { display: grid; }
	.gs-snip .gs-code pre, .gs-op__resp .gs-code pre { height: 100%; }
}
.gs-code__tall { max-height: 20rem; }

/* ---------- „Išbandyti" ---------- */
.gs-try__open { justify-self: start; height: 40px; padding: 0 16px; font-size: 14px; }
.gs-try__open svg { width: 14px; height: 14px; }
.gs-try__open:hover svg { transform: none; }
.gs-try__open[aria-expanded="true"] { border-color: var(--gs-accent); color: var(--gs-accent); }

.gs-try {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: .75rem 1rem;
	border: 1px solid var(--gs-border);
	border-radius: var(--gs-radius-sm);
	background: var(--gs-ground);
	padding: 1rem;
}
/* Ilgi elementai — per visą formos plotį; laukai išsidėsto stulpeliais. */
.gs-try__key,
.gs-try__body,
.gs-try__confirm,
.gs-try__actions,
.gs-try__out { grid-column: 1 / -1; }
.gs-try__key { font-size: .8125rem; color: var(--gs-text-body); }
.gs-try__key a { color: var(--gs-accent); text-decoration: underline; text-underline-offset: 2px; }
.gs-try__key.is-missing { color: var(--gs-warn); }
.gs-try__field { display: grid; gap: .3rem; }
.gs-try__field > span { font-size: .75rem; color: var(--gs-text-soft); }
.gs-try__field code { font: 600 .75rem/1.4 "IBM Plex Mono", ui-monospace, monospace; color: var(--gs-text-strong); }
.gs-try__field b { color: var(--gs-bad); font-weight: 600; }
.gs-try input,
.gs-try select,
.gs-try textarea {
	width: 100%;
	border: 1px solid var(--gs-border);
	border-radius: var(--gs-radius-sm);
	background: var(--gs-surface);
	padding: .5rem .65rem;
	font: 400 .8125rem/1.5 "IBM Plex Mono", ui-monospace, monospace;
	color: var(--gs-text);
	outline: none;
}
.gs-try input:focus,
.gs-try select:focus,
.gs-try textarea:focus { border-color: var(--gs-accent); }
.gs-try textarea { resize: vertical; min-height: 8rem; white-space: pre; }
.gs-try [aria-invalid="true"] { border-color: var(--gs-bad); }
.gs-try__confirm { display: flex; align-items: flex-start; gap: .5rem; font-size: .8125rem; line-height: 1.5; color: var(--gs-warn); }
.gs-try__confirm input { width: auto; margin-top: .2rem; accent-color: var(--gs-accent); }
.gs-try__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem; }
.gs-try__actions .btn:disabled { opacity: .6; cursor: progress; }
.gs-try__url { min-width: 0; font: 400 .6875rem/1.5 "IBM Plex Mono", ui-monospace, monospace; color: var(--gs-text-muted); word-break: break-all; }

.gs-try__out:empty { display: none; }
.gs-try__out { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.gs-try__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font: 400 .75rem/1.4 "IBM Plex Mono", ui-monospace, monospace; color: var(--gs-text-muted); }
.gs-try__msg { font-size: .8125rem; line-height: 1.55; color: var(--gs-text-body); }
.gs-try__msg.is-error { color: var(--gs-bad); }