/* JerryCat Git landing page and shared application branding. */
:root {
	--jc-ink: #0b1117;
	--jc-surface: #111a23;
	--jc-surface-raised: #17232e;
	--jc-line: #2a3a49;
	--jc-text: #e8f0f5;
	--jc-muted: #91a4b3;
	--jc-coral: #ff7657;
	--jc-coral-soft: #ffad8d;
	--jc-blue: #78d8ed;
}

/* Shared JerryCat branding for application pages outside the custom landing page. */
a[href^="https://forgejo.org/"],
a[href^="https://codeberg.org/forgejo/"] { display: none !important; }
li:has(> a[href^="https://forgejo.org/"]),
li:has(> a[href^="https://codeberg.org/forgejo/"]) { display: none !important; }
body:not(:has(.jerrycat-home)) #navbar-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: max-content;
	padding-right: 16px;
	border-right: 1px solid var(--color-secondary-alpha-20);
}
body:not(:has(.jerrycat-home)) #navbar-logo img {
	display: block;
	border-radius: 7px;
	content: url("/assets/img/logo.svg?v=jerrycat-brand-5");
}
body:not(:has(.jerrycat-home)) #navbar-logo::before { display: none !important; }
body:not(:has(.jerrycat-home)) #navbar-logo::after {
	content: "JerryCat Git";
	color: var(--color-text);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	white-space: nowrap;
}

.page-footer .jc-app-footer-brand {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--color-text);
	font-weight: 700;
	white-space: nowrap;
}
.page-footer .jc-app-footer-brand:hover { color: var(--color-primary); text-decoration: none; }
.page-footer .jc-app-footer-brand img { border-radius: 5px; }
.page-footer .jc-app-footer-brand small { color: var(--color-text-light-2); font-size: 11px; font-weight: 500; }

body:has(.jerrycat-home) {
	background: var(--jc-ink);
	color: var(--jc-text);
}

body:has(.jerrycat-home) #navbar {
	position: fixed;
	top: 14px;
	right: auto;
	left: 50%;
	z-index: 100;
	display: flex;
	box-sizing: border-box;
	width: min(1180px, calc(100% - 32px));
	height: 58px;
	padding: 0 14px 0 10px;
	transform: translateX(-50%);
	background: rgba(17, 26, 35, .74);
	border: 1px solid rgba(232, 240, 245, .14);
	border-radius: 16px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 14px 32px rgba(0, 0, 0, .24);
	backdrop-filter: blur(20px) saturate(135%);
	-webkit-backdrop-filter: blur(20px) saturate(135%);
}

body:has(.jerrycat-home) #navbar-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	width: auto;
	height: 42px;
	margin-right: 10px;
	padding: 0 12px 0 6px;
	border-right: 1px solid rgba(232, 240, 245, .12);
}

body:has(.jerrycat-home) #navbar-logo::after {
	content: "JerryCat Git";
	color: var(--jc-text);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	white-space: nowrap;
}

body:has(.jerrycat-home) #navbar-logo::before {
	display: none !important;
}

body:has(.jerrycat-home) #navbar-logo img {
	display: block;
	border-radius: 7px;
	content: url("/assets/img/logo.svg?v=jerrycat-brand-5");
}
body:has(.jerrycat-home) #navbar .item { color: var(--jc-muted); }
body:has(.jerrycat-home) #navbar .item:hover { color: var(--jc-text); background: transparent; }
body:has(.jerrycat-home) #navbar .navbar-left::after {
	display: none;
}
body:has(.jerrycat-home) #navbar .navbar-right .item { color: var(--jc-text); }

body:has(.jerrycat-home) .page-content.home {
	max-width: none;
	margin: 0;
	box-sizing: border-box;
	min-height: 100vh;
	padding: 92px 0 116px;
}

.jerrycat-home {
	background: var(--jc-ink);
}

.jc-shell {
	width: min(1180px, calc(100% - 48px));
	margin: 0 auto;
	padding: clamp(44px, 6vw, 78px) 0 54px;
}

.jc-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr);
	gap: clamp(48px, 9vw, 140px);
	align-items: center;
}

.jc-copy { max-width: 650px; }
.jc-kicker {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 24px;
	color: var(--jc-muted);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0;
}
.jc-kicker > span:not(.jc-kicker-mark) { color: var(--jc-coral); }
.jc-kicker-mark {
	display: inline-grid;
	place-items: center;
	width: 25px;
	height: 25px;
	border: 1px solid var(--jc-coral);
	border-radius: 6px;
	color: var(--jc-coral-soft);
	font-size: 8px;
	letter-spacing: 0;
}
.jc-copy h1 {
	margin: 0;
	color: var(--jc-text);
	font-size: 64px;
	font-weight: 750;
	letter-spacing: 0;
	line-height: 1.08;
}
.jc-copy h1 em { color: var(--jc-coral-soft); font-style: normal; }
.jc-lede {
	max-width: 510px;
	margin: 28px 0 0;
	color: var(--jc-muted);
	font-size: 17px;
	line-height: 1.85;
}
.jc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.jc-button {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-height: 45px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: 7px;
	font-size: 13px;
	font-weight: 750;
	text-decoration: none;
	transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}
.jc-button:hover { transform: translateY(-2px); text-decoration: none; }
.jc-button-primary { background: var(--jc-coral); color: var(--jc-ink) !important; }
.jc-button-primary:hover { background: var(--jc-coral-soft); }
.jc-button-quiet { border-color: var(--jc-line); color: var(--jc-text) !important; }
.jc-button-quiet:hover { border-color: var(--jc-blue); background: var(--jc-surface); }
.jc-note {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
	margin: 26px 0 0;
	color: #64798a;
	font-size: 11px;
	letter-spacing: 0;
}
.jc-note-dot, .jc-pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--jc-blue); }
.jc-note span:not(.jc-note-dot) { color: #4d6273; }

.jc-console {
	position: relative;
	background: var(--jc-surface);
	border: 1px solid var(--jc-line);
	border-radius: 8px;
	box-shadow: 18px 18px 0 rgba(255, 118, 87, .08);
	overflow: hidden;
}
.jc-console::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: var(--jc-coral);
}
.jc-console-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 0 19px;
	border-bottom: 1px solid var(--jc-line);
	color: #687d8e;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 11px;
}
.jc-window-dots { display: flex; gap: 5px; }
.jc-window-dots span { width: 7px; height: 7px; border-radius: 50%; background: #496071; }
.jc-window-dots span:first-child { background: var(--jc-coral); }
.jc-console-title { flex: 1; }
.jc-console-lock { color: var(--jc-blue); font-size: 8px; }
.jc-console-body { padding: 32px 32px 25px; }
.jc-console-label { margin: 0 0 18px; color: var(--jc-coral); font-size: 10px; font-weight: 800; letter-spacing: 0; }
.jc-code { color: var(--jc-text); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 14px; line-height: 2; }
.jc-prompt { margin-right: 9px; color: var(--jc-coral); }
.jc-code-url { padding-left: 22px; color: var(--jc-blue); font-size: 12px; overflow-wrap: anywhere; }
.jc-code-url span { color: #a7b7c2; }
.jc-console-rule { height: 1px; margin: 27px 0 22px; background: var(--jc-line); }
.jc-console-meta { display: grid; gap: 13px; }
.jc-console-meta div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.jc-console-meta span { color: #627789; font-size: 9px; letter-spacing: 0; }
.jc-console-meta strong { color: var(--jc-text); font-size: 12px; font-weight: 650; }
.jc-console-footer { display: flex; align-items: center; gap: 9px; margin-top: 28px; color: #6f8493; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; }
.jc-pulse { box-shadow: 0 0 0 4px rgba(120, 216, 237, .1); }

.jc-rail {
	display: grid;
	grid-template-columns: 1.05fr repeat(3, 1fr);
	gap: 22px;
	margin-top: clamp(96px, 8vw, 112px);
	padding-top: 24px;
	border-top: 1px solid var(--jc-line);
}
.jc-rail-intro { color: var(--jc-muted); font-size: 10px; letter-spacing: 0; line-height: 1.7; }
.jc-rail-intro span { display: block; margin-bottom: 10px; color: var(--jc-coral); font-family: ui-monospace, monospace; }
.jc-rail-intro strong { color: var(--jc-text); font-size: 11px; font-weight: 750; }
.jc-capability { display: flex; gap: 13px; min-width: 0; }
.jc-capability-index { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border: 1px solid var(--jc-line); border-radius: 6px; color: var(--jc-blue); font-family: ui-monospace, monospace; font-size: 10px; }
.jc-capability strong { display: block; color: var(--jc-text); font-size: 13px; font-weight: 700; }
.jc-capability small { display: block; margin-top: 7px; color: var(--jc-muted); font-size: 11px; line-height: 1.5; }

body:has(.jerrycat-home) .page-footer { display: none; }

.jc-footer {
	position: fixed;
	bottom: 16px;
	left: 50%;
	z-index: 90;
	box-sizing: border-box;
	width: min(860px, calc(100% - 32px));
	margin: 0;
	transform: translateX(-50%);
	border: 1px solid rgba(232, 240, 245, .14);
	border-radius: 16px;
	background: rgba(17, 26, 35, .7);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 42px rgba(0, 0, 0, .3);
	backdrop-filter: blur(20px) saturate(135%);
	-webkit-backdrop-filter: blur(20px) saturate(135%);
	overflow: hidden;
}
.jc-footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	min-height: 56px;
	box-sizing: border-box;
	padding: 10px 18px;
	color: #657988;
	font-size: 11px;
}
.jc-footer-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--jc-text) !important;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0;
	text-decoration: none;
}
.jc-footer-brand:hover { color: var(--jc-coral-soft) !important; text-decoration: none; }
.jc-footer-mark {
	display: inline-grid;
	place-items: center;
	width: 25px;
	height: 25px;
	border: 1px solid var(--jc-coral);
	border-radius: 6px;
	color: var(--jc-coral-soft);
	font-size: 8px;
	letter-spacing: 0;
}
.jc-footer-inner p { margin: 0; color: #657988; }
.jc-footer-inner p span { margin: 0 7px; color: #3f5362; }
.jc-footer-inner .jc-footer-timing { color: #526675; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 10px; }
.jc-footer-timing strong { color: var(--jc-muted); font-weight: 650; }
.jc-footer-inner nav { display: flex; gap: 18px; }
.jc-footer-inner nav a { color: var(--jc-muted); text-decoration: none; }
.jc-footer-inner nav a:hover { color: var(--jc-text); }

@media (max-width: 820px) {
	body:has(.jerrycat-home) #navbar { top: 8px; width: calc(100% - 20px); height: 54px; padding: 0 12px 0 8px; border-radius: 14px; }
	body:has(.jerrycat-home) .page-content.home { padding-top: 82px; padding-bottom: 98px; }
	.jc-shell { width: min(100% - 34px, 620px); padding-top: 48px; }
	.jc-hero { grid-template-columns: 1fr; gap: 55px; }
	.jc-copy h1 { font-size: 56px; }
	.jc-rail { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
	.jc-rail-intro { grid-column: 1 / -1; }
	.jc-console { box-shadow: 10px 10px 0 rgba(255, 118, 87, .08); }
	.jc-footer { bottom: 12px; width: calc(100% - 24px); }
}

@media (max-width: 480px) {
	body:not(:has(.jerrycat-home)) #navbar-logo { min-width: auto; padding-right: 8px; border-right: 0; }
	body:not(:has(.jerrycat-home)) #navbar-logo::after { display: none; }
	body:has(.jerrycat-home) #navbar { top: 8px; width: calc(100% - 16px); height: 52px; padding: 0 9px 0 6px; border-radius: 14px; }
	body:has(.jerrycat-home) #navbar-logo { width: 42px; padding: 0 8px 0 4px; }
	body:has(.jerrycat-home) #navbar-logo::after { display: none; }
	body:has(.jerrycat-home) #navbar .navbar-left::after { display: none; }
	body:has(.jerrycat-home) .page-content.home { padding-top: 66px; padding-bottom: 88px; }
	.jc-shell { width: calc(100% - 28px); padding-top: 38px; }
	.jc-copy h1 { font-size: 43px; }
	.jc-lede { font-size: 15px; }
	.jc-console-body { padding: 27px 22px 23px; }
	.jc-code-url span { display: block; }
	.jc-console-meta div { display: block; }
	.jc-console-meta strong { display: block; margin-top: 4px; }
	.jc-rail { grid-template-columns: 1fr; }
	.jc-rail-intro { grid-column: auto; }
	.jc-footer { bottom: 10px; width: calc(100% - 20px); border-radius: 15px; }
	.jc-footer-inner { min-height: 52px; gap: 10px; padding: 8px 11px; }
	.jc-footer-brand { gap: 7px; font-size: 9px; letter-spacing: 0; }
	.jc-footer-mark { width: 23px; height: 23px; }
	.jc-footer-inner > p:not(.jc-footer-timing) { display: none; }
	.jc-footer-inner .jc-footer-timing { display: block; margin-left: auto; font-size: 9px; white-space: nowrap; }
	.jc-footer-inner nav { gap: 11px; }
}