@charset "utf-8";
@import url("./fonts.css");

:root
{
	font-family: 'Booton', 'Saans', ui-sans-serif, sans-serif;
	font-size: 13pt;
	line-height: 1.5em;
	letter-spacing: -0.0125em;
}

html
{
	-webkit-text-size-adjust: 100%;
}

a
{
	text-decoration: none;
}

header
{
	position: fixed;
	display: flex;
	padding: 1em;
	box-sizing: border-box;
	width: 100%;
	height: 4.5rem;
	top: 0px;
	left: 0px;
	border-bottom-style: solid;
	z-index: 100;
}

/* Push deep-linked content out from under the fixed header. */
:target
{
	scroll-margin: 6rem 0 0 0;
}

header #shopMark
{
	display: flex;
	text-wrap: nowrap;
	margin-top: auto;
	margin-bottom: auto;
	vertical-align: middle;
}

header a.logo
{
	display: inline-flex;
	background-image: url("/https/help.panic.com/images/panic-logo-gray.svg");
	background-image: url("//signserver.panic.com/get/svg");
	background-repeat: no-repeat;
	background-size: 2.5rem 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
	margin-right: 0.5rem;
	color: transparent;
}

header a.siteTitle
{
	display: inline-flex;
	font-size: 1.5rem;
	line-height: 1rem;
	font-weight: 300;
	letter-spacing: -0.05em;
	margin-top: auto;
	margin-bottom: auto;
	vertical-align: middle;
}

header .breadcrumb-nav
{
	margin-top: auto;
	margin-bottom: auto;
	padding-left: 2rem;
	vertical-align: middle;
	text-wrap: nowrap;
}

.mainContent .breadcrumb-nav
{
	display: none;
}

header #search-container
{
	margin-left: auto;
	margin-top: auto;
	margin-bottom: auto;
	flex-grow: 1;
	max-width: min(350px, 50vw);
	min-width: 0em;
	box-sizing: border-box;
}

header #search-results
{
	position: absolute;
	width: min(350px, 50vw);
	box-sizing: border-box;
	max-height: 50vh;
	overflow-y: scroll;
	font-size: 0.9rem;
	line-height: 1.2rem;
	padding: 1em;
	border-radius: 0.5em;
	box-shadow: 0.25em 0.25em 8px 2px rgba(0, 0, 0, 0.3);
	margin-left: auto;
	text-wrap: wrap;
}

header #search-results h2
{
	font-size: 1em;
	margin-block: 0;
}

header #search-container form
{
	display: flex;
	box-sizing: border-box;
}

header #search-container form input
{
	display: inline-flex;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
	box-sizing: border-box;
	font-size: 1rem;
	flex-grow: 1;
	height: auto;
	border-style: none;
	padding: 0.25rem 0.25rem 0.25rem 1.75rem;
	border-radius: 1rem;
	max-width: min(350px, 50vw);
	margin-left: auto;
	min-width: 0em;
	background-image: url("/https/help.panic.com/images/search.svg");
	background-repeat: no-repeat;
	background-position: 0.5em 55%;
	background-size: 1em;
	opacity: 70%;
}

header #search-container form input:focus
{
	opacity: 100%;
}

header #search-results #results
{
	list-style: none;
	padding: 0;
}

header #search-results #results a
{
	font-weight: 600;
}

header #search-results #results li
{
	padding-bottom: 1em;
}

#search-results.noResults h2,
#search-results h2.noResults
{
	display: none;
}

#search-results.noResults h2.noResults
{
	display: block;
}

#search-results.noResults ol {
	display: none;
}

.mainContent
{
	padding-top: 5em;
	width: 80vw;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.mainContent img
{
	max-width: 100%;
	height: auto;
}

.mainContent img.fullwidth
{
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.mainContent a:hover, header .breadcrumb-nav a:hover
{
	text-decoration: underline;
}

.breadcrumb
{
	font-weight: 600;
	font-size: 0.9rem;
	text-transform: uppercase;
}

.breadcrumb::after
{
	content: " ❯ ";
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

.breadcrumb[data-here]::after
{
	content: "";
}

h1
{
	font-size: 3em;
	line-height: 1em;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

h2
{
	font-size: 1.5em;
	letter-spacing: -0.01em;
	font-weight: 700;
}

h3
{
	font-size: 1.5em;
	font-weight: 200;
	letter-spacing: -0.02em;
}

blockquote
{
	padding: 0.8rem;
	font-weight: 400;
	font-size: 0.9rem;
	border-radius: 0.5rem;
	border-left-style: solid;
	border-left-width: 0.5rem;
}

blockquote p, li p
{
	margin: auto;
}

.lastUpdate
{
	font-style: italic;
}

pre
{
	padding: 1rem;
	border-radius: 0.5rem;
	overflow: scroll;
}

code
{
	padding: 0.1rem;
	border-radius: 0.25rem;
	font-family: 'space-mono', ui-monospace, monospace, monospace;
	font-variant-ligatures: none;
	font-size: 12pt;
}

pre code
{
	padding: 0;
}

.iconTinted
{
	mask-size: contain;
	mask-repeat: no-repeat;
}


.mainContent li
{
	margin-bottom: 1rem;
}

#featuredArticles ul, #generalArticles
{
	display: grid;
	grid-template-columns: 50% 50%;
	list-style-type: none;
	padding-left: 1em;
	padding-right: 1em;
}

#featuredArticles ul, #generalArticles, .articleList
{
	list-style: none;
}

#featuredArticles ul li, #generalArticles li
{
	padding-right: 1em;
}

#featuredArticles ul li a, #generalArticles li a, #appList a, .articleList a
{
	font-weight: 600;
}

#appList
{
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr;
}

#appList ul
{
	padding: 0;
}

#appList .appList-cat
{
	/* grid-row: 1; */
}

#appList .appList-cat li
{
	list-style: none;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

#appList .appList-cat img
{
	width: auto;
	height: 1.8rem;
}

#appList .appList-cat h2
{
	text-align: center;
}

#appList .appList-cat h2 a
{
	font-size: 1.7em;
	font-weight: 600;
	letter-spacing: -0.03em;
	/* text-align: center; */
}

#bugreporting
{
	font-size: 1.2em;
	text-align: center;
	padding-bottom: 1em;
}

/* list icons */

li.featuredArticle,
#newArticles li.newArticle,
ul#generalArticles li,
ul.articleList li,
#results li
{
	background-position: 0 0.4em !important;
	background-size: 1rem;
	background-repeat: no-repeat;
	padding-left: 1.4rem;
}

li.general
{
	background-image: url("/https/help.panic.com/images/summary.svg");
	background-size: 0.8rem !important;
	background-position: 0.1em 0.4em !important;
}

li.releasenotes
{
	background-image: url("/https/help.panic.com/images/releasenotes.svg");
}

li.coda
{
	background-image: url("/https/help.panic.com/images/product-coda.svg");
}

li.nova
{
	background-image: url("/https/help.panic.com/images/product-nova.svg");
}

li.code-editor
{
	background-image: url("/https/help.panic.com/images/product-coda-ios.svg");
}

li.transmit,
li.transmit5
{
	background-image: url("/https/help.panic.com/images/product-transmit.svg");
}

li.transmit-ios
{
	background-image: url("/https/help.panic.com/images/product-transmit-ios.svg");
}

li.prompt
{
	background-image: url("/https/help.panic.com/images/product-prompt.svg");
}

li.sync
{
	background-image: url("/https/help.panic.com/images/product-sync.svg");
}

li.statusboard
{
	background-image: url("/https/help.panic.com/images/product-status-board.svg");
}

footer #japan {
	/* display: inline-block; */
	padding-left: 24px;
	text-align: right;
	background: url("/https/help.panic.com/images/lang-jp.svg") left 13px no-repeat;
	background-position: 0.0em 0.1em;
	background-size: 20px 16px;
	height: 1em;
}

/* Product Headers */

section.product-header
{
	box-sizing: border-box;
	width: 100%;
	padding: 2em;
	border-radius: 1em;
	margin-top: 1.4em;
	min-height: fit-content;
	margin-bottom: 1.4rem;
	margin-left: auto;
	margin-right: auto;
	background-size: 10rem 10rem;
	display: flex;
}

.product-header .product-image
{
	display: flex;
	max-width: fit-content;
}

.product-header .product-image img
{
	margin-top: auto;
	margin-bottom: auto;
	padding-right: 1em;
	max-height: 150px;
	max-width: 150px;
	height: auto;
}

.product-header .postTitle
{
	margin-top: 0;
	margin-bottom: 0;
}

.product-header .product-info
{
	margin-top: auto;
	margin-bottom: auto;
}

.product-info p
{
	margin: 0;
}

.product-info .product-description
{
	padding-top: 1em;
}

#product-header-nova .postTitle
{
	font-family: "Hellix", ui-sans-serif, sans-serif;
	font-weight: 800;
	font-size: 5em;
	font-style: normal;
	text-transform: lowercase;
	letter-spacing: -0.05em;
	margin-top: -0.4em;
}

#product-header-transmit .postTitle
{
	font-family: "ChronoBlack", ui-sans-serif, sans-serif;
	font-size: 4em;
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: -0.05em;
}

#product-header-prompt .postTitle
{
	font-size: 4em;
}

#product-header-coda .postTitle, #product-header-code-editor .postTitle, #product-header-statusboard .postTitle, #product-header-sync .postTitle
{
	font-family: "Chrono", ui-sans-serif, sans-serif;
	font-weight: 200;
	font-size: 4em;
	font-style: italic;
	letter-spacing: -0.07em;
}

/* release notes */

.releasenotes h3[id|="added"],
.releasenotes h3[id|="new"],
.releasenotes h3[id|="fixed"],
.releasenotes h3[id|="improved"],
.releasenotes h3[id|="fixed--improved"],
.releasenotes h3[id|="removed"],
.releasenotes h3[id|="修正"],
.releasenotes h3[id|="変更"],
.releasenotes h3[id|="改良と問題の修正"],
.releasenotes h3[id|="改良"],
.releasenotes h3[id|="新機能"]
{
	line-height: 2em;
	font-weight: 800;
	padding-left: 0.5em;
	border-top-left-radius: 0.25em;
	border-bottom-left-radius: 0.25em;
}

/* table of contents */

body.toc #TableOfContents
{
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	display: inline-block;
	position: fixed;
	box-sizing: border-box;
	left: 0;
	top: 4.5rem;
	height: calc(100dvh - 4.5rem);
	width: 25vw;
	max-width: 20em;
	overflow-y: scroll;
	z-index: 50;
	/* border-right-style: solid;
	border-right-width: 2px; */
	font-size: 0.85em;
	line-height: 2em;
}

body.toc #TableOfContents ul, body.toc #TableOfContents ul li {
	list-style: disc none inside;
	margin: 0;
	padding: 0 0.5em 0 0.5em;
}

#TableOfContents ul li .tocCurrentHeader {
	font-weight: 600;
}

li:first-child:is(.tocCurrentHeader)
{
	padding-left: 1em !important;
}

.tocCurrentHeader:before
{
	/* content: "•"; */
	padding-right: 0.5em;
}

hr
{
	border: 0;
	border-bottom-width: 0.1rem;
	border-bottom-style: solid;
	margin: 1.6rem 0;
}

ul#tagList
{
	margin-block-start: 0;
	padding-inline-start: 0;
}

#tagList li
{
	display: inline-block;
	padding: 0 0.5rem 0 0.5rem;
	border-radius: 0.5rem;
	font-size: 0.9rem;
}

#tagList li a
{
	font-weight: 600;
}

/* tables */

.postBody table
{
	display: table;
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;
}

.postBody td,
.postBody th

{
	padding: 0.5rem;
	vertical-align: middle;
}

.postBody th,
.postBody th a
{
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	font-size: 0.8rem;
}

.postBody th:first-child
{
  border-top-left-radius: 0.5rem;
}

.postBody th:last-child
{
  border-top-right-radius: 0.5rem;
}

/* .postBody td p
{
	margin: 0.25em;
} */

.postBody td a
{
	font-weight: 600;
}

.postBody th
{
	font-weight: 400;
	border-bottom: 1px solid;
}

.postBody dt
{
	margin-top: 1em;
}

.postBody dt, .postBody dd
{
	border-left-width: 3px;
	border-left-style: solid;
	padding-left: 1em;
	margin-left: 0;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
	cursor: pointer;
	padding: 1em;
	font-size: 1rem;
	border: none;
	width: 100%;
	text-align: left;
	border-radius: 0.8rem;
}

.collapsibleActive
{
	border-radius: 0.8rem 0.8rem 0 0;
}

.collapsibleContent {
	padding: 0 18px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.15s ease-out;
	margin: 0px !important;
	border-radius: 0 0 0.8rem 0.8rem;
}

.collapsible:before {
	content: '\25B6';
	float: left;
	margin-right: 0.5em;
}

.collapsibleActive:before {
	content: "\25BC";
}

/* for mobile */
@media screen and (max-width: 1022px) {

	h1
	{
		font-size: 2.5em;
	}

	.mainContent
	{
		width: 95vw;
	}

	.mainContent .breadcrumb-nav
	{
		display: block;
	}

	header .breadcrumb-nav
	{
		display: none;
	}

	body.toc #TableOfContents
	{
		display: none;
	}

	body.toc
	{
		margin-left: unset;
	}

	#featuredArticles ul, #generalArticles, #appList
	{
		display: block;
		list-style-type: none;
		padding-left: 1em;
		padding-right: 1em;
	}

	blockquote
	{
		margin: 0;
	}
	
	.releasenotes header
	{
		display: none;
	}
	
	.releasenotes .mainContent
	{
		padding-top: 0em;
	}
}

@media screen and (max-width: 500px) {

	header #search-container:has(form input:focus), header #search-container form input:focus
	{
		max-width: 100%;
		animation-name: searchGrow;
		animation-duration: 0.15s;
	}

	@keyframes searchGrow {
		from {
			max-width: min(350px, 50vw);
		}

		to {
			max-width: 100%;
		}
	}

	header #shopMark:has(+ .breadcrumb-nav + #search-container form input:focus)
	{
		display: none !important;
	}

	header #search-results
	{
		box-sizing: border-box;
		left: 0;
		width: 100vw;
		max-width: 100vw;
	}

	section.product-header
	{
		margin-top: 1em;
		display: block;
	}

	.product-header .product-image
	{
		justify-content: center;
		padding-bottom: 0.5em;
	}

	.product-header .product-image img
	{
		padding-right: 0em;
		max-height: 128px;
		max-width: 128px;
		height: auto;
	}
}

@media screen and (min-width: 1023px) {

	body.toc
	{
		margin-left: 26vw;
	}

	body.toc .mainContent
	{
		width: 70vw;
	}
}

/* for big desktop windows */
@media screen and (min-width: 1680px) {
	body.toc
	{
		margin-left: auto;
	}

	body.toc .mainContent
	{
		width: 80vw;
	}
}