/* ==========================================================================
   ShieldKnot Developer Portal
   Color system inherits adminSite tokens for brand consistency.
   ========================================================================== */

:root {
	--sk-brand:        #331C29;
	--sk-brand-soft:   #5C4552;
	--sk-mint:         #66FFCC;
	--sk-cyan:         #6EEAF5;
	--sk-bg:           #FAFAFA;
	--sk-surface:      #FFFFFF;
	--sk-border:       #E5E7EB;
	--sk-text:         #231F20;
	--sk-muted:        #8C9092;
	--sk-shadow:       0 0 4px 0 #CCCCCC;
	--sk-radius:       20px;
	--sk-radius-sm:    10px;

	/* Code panel (Theneo-style dark plum) */
	--sk-code-bg:      #2A1622;
	--sk-code-header:  #3A1F2E;
	--sk-code-text:    #F5F1F3;
	--sk-code-key:     #FFB7E0;
	--sk-code-string:  #66FFCC;
	--sk-code-number:  #6EEAF5;
	--sk-code-muted:   #8E7682;
	--sk-code-comment: #6F5563;

	--topbar-h:        64px;
	--sidebar-w:       260px;
	--toc-w:           220px;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--sk-bg);
	color: var(--sk-text);
	font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.6;
}

a { color: var(--sk-brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
	color: var(--sk-brand);
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0 0 0.6em 0;
	line-height: 1.2;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.4rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--sk-border); }
h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
h3 { font-size: 1.1rem; margin-top: 1.6rem; }
p  { margin: 0 0 1rem 0; }

code, pre, .mono {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
	font-size: 0.85rem;
}

code.inline {
	background: rgba(51,28,41,0.06);
	color: var(--sk-brand);
	padding: 0.1em 0.4em;
	border-radius: 4px;
}

/* —— TOPBAR ——————————————————————————————————————— */

.topbar {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: var(--topbar-h);
	background: var(--sk-brand);
	color: #fff;
	display: flex;
	align-items: center;
	padding: 0 1.5rem;
	z-index: 50;
	box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.topbar-logo {
	display: flex; align-items: center; gap: 0.6rem;
	color: #fff;
	font-weight: 600;
	font-size: 1.05rem;
}
.topbar-logo img { height: 28px; width: auto; }
.topbar-tabs {
	display: flex; gap: 0.25rem;
	margin-left: 2rem;
}
.topbar-tab {
	display: inline-flex; align-items: center; gap: 0.4rem;
	color: rgba(255,255,255,0.7);
	padding: 0.45rem 0.9rem;
	border-radius: 8px;
	font-size: 0.85rem;
	font-weight: 400;
	transition: background 0.15s, color 0.15s;
}
.topbar-tab:hover { background: rgba(255,255,255,0.06); color: #fff; text-decoration: none; }
.topbar-tab.active { background: rgba(102,255,204,0.12); color: var(--sk-mint); }

.topbar-search {
	margin-left: auto;
	margin-right: 1rem;
	display: flex; align-items: center; gap: 0.5rem;
	background: rgba(255,255,255,0.08);
	color: rgba(255,255,255,0.7);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 8px;
	padding: 0.4rem 0.7rem;
	font-size: 0.82rem;
	min-width: 260px;
}
.topbar-search .kbd {
	margin-left: auto;
	font-size: 0.7rem;
	color: rgba(255,255,255,0.5);
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 4px;
	padding: 0.05rem 0.35rem;
}
.topbar-logout {
	color: rgba(255,255,255,0.6);
	font-size: 0.8rem;
}
.topbar-logout:hover { color: var(--sk-mint); text-decoration: none; }

/* —— LAYOUT ——————————————————————————————————————— */

.shell {
	display: grid;
	grid-template-columns: var(--sidebar-w) 1fr;
	min-height: 100vh;
	padding-top: var(--topbar-h);
}

.sidebar {
	background: transparent;
	border-right: 1px solid var(--sk-border);
	padding: 1.5rem 0.75rem 3rem 1.5rem;
	position: sticky;
	top: var(--topbar-h);
	height: calc(100vh - var(--topbar-h));
	overflow-y: auto;
}
.sidebar-section {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sk-muted);
	margin: 1.5rem 0 0.5rem 0.75rem;
}
.sidebar-section:first-child { margin-top: 0; }
.sidebar a {
	display: block;
	padding: 0.4rem 0.75rem;
	color: var(--sk-text);
	font-size: 0.88rem;
	font-weight: 400;
	border-radius: 8px;
	margin-bottom: 0.1rem;
}
.sidebar a:hover { background: rgba(51,28,41,0.05); text-decoration: none; }
.sidebar a.active {
	background: rgba(110,234,245,0.12);
	color: var(--sk-brand);
	font-weight: 500;
}

/* —— MAIN CONTENT ————————————————————————————————— */

.main {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding: 2.5rem 3rem;
	max-width: 1400px;
}
.main.with-toc { grid-template-columns: minmax(0,1fr) var(--toc-w); gap: 3rem; }
.main.with-code { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 2.5rem; }

.content { min-width: 0; }
.content .lead { color: var(--sk-muted); font-size: 1.02rem; }

.crumbs {
	display: flex; gap: 0.4rem;
	font-size: 0.8rem;
	color: var(--sk-muted);
	margin-bottom: 1rem;
}
.crumbs a { color: var(--sk-muted); }
.crumbs span.sep { opacity: 0.6; }

/* —— ON-PAGE TOC (right rail, ReadMe style) ———————— */

.toc {
	position: sticky;
	top: calc(var(--topbar-h) + 2.5rem);
	height: max-content;
	padding-left: 1rem;
	border-left: 2px solid var(--sk-border);
	font-size: 0.82rem;
}
.toc a {
	display: block;
	padding: 0.25rem 0;
	color: var(--sk-muted);
	font-weight: 400;
}
.toc a.active, .toc a:hover { color: var(--sk-brand); text-decoration: none; }

/* —— PARAM TABLE (left side of endpoint pages) ——— */

.param-section { margin-top: 2.2rem; }
.param-section h2 { font-size: 1.1rem; padding-top: 0; border-top: none; margin-bottom: 1rem; }
.param-row {
	padding: 0.9rem 0;
	border-top: 1px solid var(--sk-border);
}
.param-row:first-child { border-top: 1px solid var(--sk-border); }
.param-name {
	display: flex; align-items: center; gap: 0.6rem;
	margin-bottom: 0.35rem;
}
.param-name code {
	font-weight: 600;
	color: var(--sk-brand);
	background: none;
	padding: 0;
}
.param-type {
	color: var(--sk-muted);
	font-size: 0.8rem;
}
.param-required {
	background: rgba(220,38,38,0.1);
	color: #DC2626;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 0.1rem 0.45rem;
	border-radius: 4px;
	text-transform: uppercase;
}
.param-desc {
	color: var(--sk-muted);
	font-size: 0.88rem;
}
.param-child {
	margin-left: 1.25rem;
	border-left: 2px solid var(--sk-border);
	padding-left: 1rem;
}

/* —— CODE PANELS (right side, Theneo-style) ——————— */

.code-panel {
	background: var(--sk-code-bg);
	color: var(--sk-code-text);
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 1.25rem;
	box-shadow: 0 6px 24px rgba(42,22,34,0.18);
}
.code-panel + .code-panel { margin-top: 0; }
.code-header {
	background: var(--sk-code-header);
	padding: 0.55rem 1rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.78rem;
	color: rgba(255,255,255,0.55);
	border-bottom: 1px solid rgba(255,255,255,0.05);
}
.code-header .method {
	font-family: 'JetBrains Mono', monospace;
	font-weight: 700;
	color: var(--sk-mint);
}
.code-header .endpoint {
	font-family: 'JetBrains Mono', monospace;
	color: rgba(255,255,255,0.85);
}
.code-header .right {
	margin-left: auto;
	display: flex; gap: 0.6rem; align-items: center;
}
.code-header .copy {
	background: none;
	border: 1px solid rgba(255,255,255,0.12);
	color: rgba(255,255,255,0.7);
	font-size: 0.72rem;
	padding: 0.18rem 0.55rem;
	border-radius: 6px;
	cursor: pointer;
}
.code-header .copy:hover { background: rgba(255,255,255,0.05); color: #fff; }

.code-body {
	margin: 0;
	padding: 1rem 1.1rem;
	max-height: 540px;
	overflow: auto;
	font-size: 0.82rem;
	line-height: 1.55;
	white-space: pre;
}

/* Response tabs */
.code-tabs {
	display: flex; gap: 0.4rem;
	padding: 0.4rem 1rem 0 1rem;
	background: var(--sk-code-header);
}
.code-tab {
	background: none;
	border: none;
	color: rgba(255,255,255,0.5);
	padding: 0.45rem 0.7rem;
	font-size: 0.78rem;
	font-family: 'JetBrains Mono', monospace;
	cursor: pointer;
	border-bottom: 2px solid transparent;
}
.code-tab.active { color: var(--sk-mint); border-bottom-color: var(--sk-mint); }
.code-tab.error.active { color: #FCA5A5; border-bottom-color: #FCA5A5; }

/* Syntax tokens */
.tok-key    { color: var(--sk-code-key); }
.tok-str    { color: var(--sk-code-string); }
.tok-num    { color: var(--sk-code-number); }
.tok-mute   { color: var(--sk-code-muted); }
.tok-cmt    { color: var(--sk-code-comment); font-style: italic; }
.tok-flag   { color: #FFD58E; }

/* —— PRODUCT GRID (Reference index) ———————————————— */

.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1rem;
	margin-top: 1.5rem;
}
.product-card {
	display: block;
	background: var(--sk-surface);
	border: 1px solid var(--sk-border);
	border-radius: var(--sk-radius-sm);
	padding: 1.2rem;
	color: var(--sk-text);
	transition: border-color 0.15s, transform 0.15s;
}
.product-card:hover {
	border-color: var(--sk-mint);
	text-decoration: none;
	transform: translateY(-1px);
}
.product-card .name {
	color: var(--sk-brand);
	font-weight: 600;
	font-size: 1rem;
	margin-bottom: 0.3rem;
}
.product-card .meta {
	font-size: 0.78rem;
	color: var(--sk-muted);
	font-family: 'JetBrains Mono', monospace;
}
.product-card .desc {
	font-size: 0.85rem;
	color: var(--sk-muted);
	margin-top: 0.6rem;
}

.badge-prod {
	display: inline-block;
	background: rgba(34,197,94,0.12);
	color: #15803D;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
	text-transform: uppercase;
}
.badge-coming {
	display: inline-block;
	background: rgba(110,234,245,0.15);
	color: #0E7490;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
	text-transform: uppercase;
}

/* —— BASE-URL CALLOUT (top-right of endpoint pages) — */

.base-url {
	background: var(--sk-brand);
	color: #fff;
	border-radius: 12px;
	padding: 1rem 1.1rem;
	margin-bottom: 1.25rem;
}
.base-url .label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255,255,255,0.55);
	margin-bottom: 0.5rem;
}
.base-url .env {
	margin-bottom: 0.5rem;
}
.base-url .env-name {
	color: rgba(255,255,255,0.65);
	font-size: 0.78rem;
	margin-bottom: 0.15rem;
}
.base-url .env-url {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.85rem;
	color: var(--sk-mint);
}

/* —— FOOTER ——————————————————————————————————————— */

.dev-footer {
	border-top: 1px solid var(--sk-border);
	padding: 2rem 3rem;
	margin-left: var(--sidebar-w);
	font-size: 0.78rem;
	color: var(--sk-muted);
	display: flex; justify-content: space-between;
}

/* —— LOGIN ——————————————————————————————————————— */

.login-shell {
	min-height: 100vh;
	display: grid;
	grid-template-columns: 5fr 7fr;
}
.login-brand {
	background: var(--sk-brand);
	color: #fff;
	padding: 3rem;
	display: flex; flex-direction: column; justify-content: center;
	position: relative;
	overflow: hidden;
}
.login-brand .shape {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.login-brand .shape.s1 { top: -80px; right: -80px; width: 300px; height: 300px; background: rgba(102,255,204,0.08); }
.login-brand .shape.s2 { bottom: -120px; left: -60px; width: 400px; height: 400px; background: rgba(110,234,245,0.06); }
.login-brand .shape.s3 { top: 40%; right: 10%; width: 180px; height: 180px; background: rgba(102,255,204,0.05); }
.login-brand .inner { position: relative; z-index: 2; max-width: 480px; }
.login-brand h2 {
	color: #fff;
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 1.15;
	margin-bottom: 0.8rem;
}
.login-brand p {
	color: rgba(255,255,255,0.7);
	font-size: 1.05rem;
	font-weight: 300;
	line-height: 1.7;
	max-width: 360px;
}
.login-brand .signals { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.9rem; }
.login-brand .signal { display: flex; align-items: center; gap: 0.8rem; color: rgba(255,255,255,0.65); font-size: 0.88rem; }
.login-brand .signal .dot {
	min-width: 36px; height: 36px; border-radius: 10px;
	display: inline-flex; align-items: center; justify-content: center;
}
.login-brand .signal .dot.mint { background: rgba(102,255,204,0.12); color: var(--sk-mint); }
.login-brand .signal .dot.cyan { background: rgba(110,234,245,0.12); color: var(--sk-cyan); }

.login-form-side {
	display: flex; align-items: center; justify-content: center;
	background: #FAFAFA;
	padding: 2rem;
}
.login-card {
	background: #fff;
	border-radius: var(--sk-radius);
	box-shadow: var(--sk-shadow);
	padding: 2.2rem;
	width: 100%;
	max-width: 420px;
}
.login-card h1 { font-size: 1.4rem; margin-bottom: 0.25rem; }
.login-card .sub { color: var(--sk-muted); font-size: 0.9rem; margin-bottom: 1.5rem; }
.login-card label { font-size: 0.88rem; font-weight: 500; color: var(--sk-brand); display: block; margin-bottom: 0.4rem; }
.login-card input[type=password] {
	width: 100%;
	border: 1.5px solid var(--sk-border);
	border-radius: 12px;
	padding: 0.7rem 1rem;
	font-size: 0.95rem;
}
.login-card input[type=password]:focus {
	outline: none;
	border-color: var(--sk-mint);
	box-shadow: 0 0 0 3px rgba(102,255,204,0.15);
}
.login-card button {
	width: 100%;
	background: var(--sk-brand);
	color: #fff;
	border: none;
	border-radius: 20px;
	padding: 0.75rem;
	font-size: 0.95rem;
	font-weight: 500;
	cursor: pointer;
	margin-top: 1.2rem;
	transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.login-card button:hover {
	background: var(--sk-brand-soft);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(51,28,41,0.2);
}
.login-card .err {
	background: rgba(220,38,38,0.08);
	border: 1px solid rgba(220,38,38,0.2);
	color: #B91C1C;
	padding: 0.6rem 0.8rem;
	border-radius: 8px;
	font-size: 0.85rem;
	margin-bottom: 1rem;
}

@media (max-width: 991px) {
	.login-shell { grid-template-columns: 1fr; }
	.login-brand { display: none; }
}

/* —— SMALL BITS ——————————————————————————————————— */

.callout {
	background: rgba(110,234,245,0.08);
	border-left: 3px solid var(--sk-cyan);
	padding: 0.9rem 1.1rem;
	border-radius: 0 8px 8px 0;
	margin: 1.25rem 0;
	font-size: 0.9rem;
}
.callout.warn {
	background: rgba(245,158,11,0.08);
	border-left-color: #F59E0B;
}

.bullet-list { margin: 0.6rem 0 1.2rem 1.2rem; }
.bullet-list li { margin-bottom: 0.45rem; }


/* ============================================================
   Reference page building blocks

   Product reference pages (reference/*.asp) were originally written with these
   values as inline style attributes. They are classes now - same values, so a
   page can be converted a section at a time without anything shifting.
   ============================================================ */

/* Reference pages run full width - the prose/code split is per section. */
.content-wide { max-width: none; }

/* One endpoint: prose on the left, request/response panels on the right. */
.api-section {
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	gap: 2.5rem;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--sk-border);
}
/* Without this a long code panel forces the whole grid wider than the viewport. */
.api-section > div { min-width: 0; }

/* A full-width prose block between endpoints (coverage tables, pricing notes). */
.doc-section {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--sk-border);
}

/* h2 sitting directly under a section's own top border, which already provides
   the separation the default h2 rule adds. */
.section-title {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}

/* Jump links to the endpoints on the page. */
.endpoint-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 2rem;
}
.endpoint-nav-link {
	background: rgba(102,255,204,0.12);
	color: var(--sk-brand);
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--sk-border);
	border-radius: 6px;
	font-size: 0.82rem;
	font-weight: 600;
	white-space: nowrap;
}
.endpoint-nav-link:hover { background: rgba(102,255,204,0.2); text-decoration: none; }

/* Plain data table in reference prose (coverage options, status codes). */
.doc-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.25rem 0;
}
.doc-table th {
	text-align: left;
	padding: 0.6rem 0.5rem;
	border-bottom: 1px solid var(--sk-border);
}
.doc-table td {
	padding: 0.6rem 0.5rem;
	border-bottom: 1px solid var(--sk-border);
}
.doc-table tbody tr:last-child td { border-bottom: none; }


/* ============================================================
   OpenAPI example runner (openapi/run-examples.asp)
   Moved out of an inline <style> block on that page so the portal
   can run without 'unsafe-inline' style. Classes are used only by
   run-examples.asp.
   ============================================================ */

.runner-form {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr auto;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
	align-items: end;
}
.runner-form label {
	display: block;
	font-size: 0.85rem;
	font-weight: 500;
	margin-bottom: 0.25rem;
	color: var(--sk-text-muted, #666);
}
.runner-form input {
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--sk-border, #ddd);
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.9rem;
}
.runner-form button {
	padding: 0.6rem 1.2rem;
	background: var(--sk-brand, #0d6efd);
	color: white;
	border: 0;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.runner-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1rem;
	font-size: 0.9rem;
}
.runner-table th,
.runner-table td {
	text-align: left;
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--sk-border, #eee);
	vertical-align: top;
}
.runner-table th { font-weight: 600; background: rgba(0,0,0,0.02); }
.pill {
	display: inline-block;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
}
.pill-pass { background: #d1f7e3; color: #0a6b3a; }
.pill-fail { background: #fde2e2; color: #8a1f1f; }
.summary {
	display: flex;
	gap: 1rem;
	margin: 1rem 0;
	font-weight: 600;
}
.summary-pass { color: #0a6b3a; }
.summary-fail { color: #8a1f1f; }
details.body-detail summary {
	cursor: pointer;
	color: var(--sk-brand, #0d6efd);
	font-size: 0.8rem;
}
details.body-detail pre {
	background: #0f172a;
	color: #e2e8f0;
	padding: 0.75rem;
	border-radius: 6px;
	max-height: 320px;
	overflow: auto;
	font-size: 0.78rem;
	margin-top: 0.5rem;
	white-space: pre-wrap;
	word-break: break-word;
}